/* ==========================================================================
   Teacher cards — Facebook / Instagram buttons (inc/teacher-social.php).
   Loaded on the program pages and the Yoga Teacher Training category page.
   Hover: each button fills with its official brand colour — Facebook blue
   #1877f2, Instagram's gradient — lifts, and glows in that colour.
   ========================================================================== */
.teacher-social {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}
.teacher-social-link {
	--brand: var(--color-primary);
	--brand-edge: var(--color-primary);
	--brand-glow: rgba(47, 93, 80, 0.3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	color: var(--color-primary);
	transition: background var(--transition), color var(--transition), border-color var(--transition), transform 300ms ease, box-shadow 300ms ease;
}
.teacher-social-link svg { width: 18px; height: 18px; }
.teacher-social-link--facebook {
	--brand: #1877f2;
	--brand-edge: #1877f2;
	--brand-glow: rgba(24, 119, 242, 0.35);
}
.teacher-social-link--instagram {
	--brand: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
	--brand-edge: #d6249f;
	--brand-glow: rgba(214, 36, 159, 0.35);
}
.teacher-social-link:hover,
.teacher-social-link:focus-visible {
	background: var(--brand);
	border-color: var(--brand-edge);
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 10px 20px var(--brand-glow);
}
.teacher-social-link:focus-visible { outline: 2px solid var(--brand-edge); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.teacher-social-link { transition: none; }
	.teacher-social-link:hover,
	.teacher-social-link:focus-visible { transform: none; }
}