/* Scoped under .mfl-landing-page so these never leak into the theme's own styles. */

.mfl-landing-page {
	font-family: 'Inter', sans-serif;
}

/* ink, accent, surface-1, and line are registered as real Tailwind colors
   (see the tailwind.config inline script in class-mfl-shortcode.php), so
   every utility variant of them (bg-, text-, border-, hover:, /opacity, etc.)
   is generated automatically — no manual overrides needed here. */

.mfl-landing-page .hero-bg {
	background-image: url('https://www.massflagleague.com/wp-content/uploads/2026/08/Fall-clinic-hero-image-scaled.jpg');
	background-size: cover;
	background-position: center;
}

.mfl-landing-page .hero-bg-home {
	background-image: url('https://www.massflagleague.com/wp-content/uploads/2026/08/MA-Flag-Football-League-Home-Hero-Image.jpg');
	background-size: cover;
	background-position: center;
}

.mfl-landing-page .hero-bg-girls-flag {
	background-image: url('https://www.massflagleague.com/wp-content/uploads/2026/08/Girls-Flag-Game.jpg');
	background-size: cover;
	background-position: top center;
}

.mfl-landing-page .mfl-balance-text {
	text-wrap: balance;
}

.mfl-landing-page #mfl-footer-brand {
	display: flex;
	gap: 10px;
	font-family: Inter, sans-serif;
	flex-direction: column;
}

@media (min-width: 640px) {
	.mfl-landing-page #mfl-footer-brand {
		flex-direction: row;
		align-items: center;
	}
}

.mfl-landing-page .mfl-field-error {
	border-color: #DC2626 !important;
}