/* Social Media Icons
   Icons are inline SVGs coloured with CSS, so changing the look is just these variables. */

/* Palette colours with defaults. Registered with @property so a palette colour that's missing OR empty
   (a new site before Customizer > Colors is set up) falls back to initial-value instead of going invisible. */
@property --social-palette-1 {
	syntax: "<color>";
	inherits: true;
	initial-value: #1d2327;
}
@property --social-palette-2 {
	syntax: "<color>";
	inherits: true;
	initial-value: #ffffff;
}
@property --social-palette-4 {
	syntax: "<color>";
	inherits: true;
	initial-value: #020586;
}

.social-links {
	--social-palette-1: var(--wp--preset--color--wpbf-palette-color-1);
	--social-palette-2: var(--wp--preset--color--wpbf-palette-color-2);
	--social-palette-4: var(--wp--preset--color--wpbf-palette-color-4);

	--social-size: 3rem;
	--social-bg: var(--social-palette-4);
	--social-icon: var(--social-palette-2);

	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-links li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Size */
.social-links.size-small {
	--social-size: 2.25rem;
}
.social-links.size-large {
	--social-size: 3.75rem;
}

/* Colour */
.social-links.colour-dark {
	--social-bg: var(--social-palette-1);
	--social-icon: var(--social-palette-2);
}
.social-links.colour-light {
	--social-bg: var(--social-palette-2);
	--social-icon: var(--social-palette-1);
}
.social-links.colour-brand .social-icon {
	--social-bg: var(--social-brand);
	--social-icon: #fff;
}

/* Alignment */
.social-links.align-center {
	justify-content: center;
}
.social-links.align-right {
	justify-content: flex-end;
}

/* Icon */
.social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--social-size);
	height: var(--social-size);
	border-radius: 50%;
	background-color: var(--social-bg);
	color: var(--social-icon);
	text-decoration: none;
	transition: transform 0.2s ease, filter 0.2s ease;
}

.social-icon svg {
	display: block;
	width: 50%;
	height: 50%;
}

.social-links.shape-square .social-icon {
	border-radius: 25%;
}

/* Icon Only - the chosen colour goes on the icon itself */
.social-links.shape-plain .social-icon {
	width: auto;
	height: auto;
	background: none;
	color: var(--social-bg);
}
.social-links.shape-plain .social-icon svg {
	width: calc(var(--social-size) * 0.6);
	height: calc(var(--social-size) * 0.6);
}

/* Hover / keyboard focus */
.social-icon:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
}

.social-icon:focus-visible {
	outline: 2px solid var(--social-palette-1);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.social-icon {
		transition: none;
	}
	.social-icon:hover {
		transform: none;
	}
}

/* Mobile - centred unless a mobile alignment is set */
@media (max-width: 768px) {
	.social-links {
		justify-content: center;
	}
	.social-links.align-r-left {
		justify-content: flex-start;
	}
	.social-links.align-r-right {
		justify-content: flex-end;
	}
}