/* Social Media Icons Module Styles */
/* Reset list */
.social-links {
	list-style: none;
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}

/* Base circle button */
.social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 3rem;
	height: 3rem;

	border-radius: 50%;
	background-color: var(
		--wp--preset--color--wpbf-palette-color-4
	); /* orange fill */
	border: 3px solid var(--wp--preset--color--wpbf-palette-color-3); /* brown outline */

	text-decoration: none;
}

/* Icon graphic via pseudo-element */
.social-icon::before {
	content: "";
	display: block;
	width: 55%;
	height: 55%;

	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Individual network icons */
.social-icon--facebook::before {
	background-image: url("/wp-content/themes/mitchell-digital-theme/assets/icons/facebook.svg");
}

.social-icon--x::before {
	background-image: url("/wp-content/themes/mitchell-digital-theme/assets/icons/x.svg");
}

.social-icon--linkedin::before {
	background-image: url("/wp-content/themes/mitchell-digital-theme/assets/icons/linkedin.svg");
}

.social-icon--instagram::before {
	background-image: url("/wp-content/themes/mitchell-digital-theme/assets/icons/instagram.svg");
}

/* Hover / focus states */
.social-icon:hover {
	filter: brightness(1.1);
}

.social-icon:focus-visible {
	outline: 2px solid #000;
	outline-offset: 3px;
}

@media (max-width: 768px) {
	.social-links {
		gap: 2rem;
		justify-content: center;
	}
}