/*
Theme Name:   FLG Lacrosse
Theme URI:    https://flglacrosse.com
Description:  Block theme for FLG Lacrosse — Long Island girls lacrosse club and training company. Renders the content model provided by the flg-core must-use plugin.
Author:       FLG Lacrosse
Version:      1.2.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.2
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  flg-lacrosse
Tags:         block-theme, full-site-editing, sports
*/

/* ─── Typefaces ──────────────────────────────────────────────────────────
   Archivo (variable, 400–700) for body and UI; Archivo Narrow 700 for
   display. Both SIL Open Font License 1.1, self-hosted rather than loaded
   from Google: one less third-party origin in the CSP, no request leaving
   the visitor's browser to a third party, and no render-blocking round trip
   to fonts.googleapis.com before text can paint.

   font-display: swap so text is readable immediately in the fallback and
   reflows once, rather than being invisible while the font loads. */

@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-variable.woff2") format("woff2-variations");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Archivo Narrow";
	src: url("assets/fonts/archivo-narrow-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/*
 * Design tokens live in theme.json, not here. This file carries the theme
 * header (which is how WordPress identifies a theme at all) plus the handful
 * of rules the block system cannot express.
 *
 * Palette source: extracted from the logo files shipped with the previous
 * theme — see docs/brand-palette.md. Navy #1A2B59 and Carolina #729FCF are
 * the real brand values, not the plan's placeholders. PROVISIONAL until
 * signed off against a logo vector.
 */

/* ─── Skip link ──────────────────────────────────────────────────────── */
.flg-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-weight: 600;
}

.flg-skip-link:focus {
	left: 0;
}

/* ─── Focus visibility ───────────────────────────────────────────────── */
/* Keyboard users must always see where they are. Never remove this. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	/* Two rings, not one. A single Carolina ring is only 2.35:1 against white,
	   below the 3:1 WCAG 2.2 asks of a focus indicator, and a single navy ring
	   would vanish on the navy header. White inside, navy outside: one of the
	   two always contrasts, whatever it sits on. */
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--white);
}

/* ─── Motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ─── Wide content must scroll itself, never the page ────────────────── */
.flg-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ─── Screen-reader-only text ────────────────────────────────────────── */
.flg-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ─── Long words must wrap, not widen the page ───────────────────────── */
/* Deliberately no `overflow-x: hidden` here: it hides real layout bugs and
   breaks position:sticky for descendants such as the sticky CTA band. */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, figcaption {
	overflow-wrap: break-word;
}

/* ─── Data-forward surface ───────────────────────────────────────────────
   The old design was a single column of stacked text sections on white.
   These are the shared devices the new templates are built from. */

/* An eyebrow label: small, wide-tracked, sits above a number or a heading. */
/* A bordered chip rather than a bare line of small caps. Square corners, a
   hairline box, wide tracking — the label reads as a tab clipped to the top of
   the section, which is what gives BTB's pages their edge. */
.flg-eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--link);
	margin-block-end: 1rem;
	padding: 0.45rem 0.7rem;
	border: 1px solid currentColor;
	border-radius: 0;
	line-height: 1;
}

.flg-band--dark .flg-eyebrow {
	color: var(--wp--preset--color--carolina);
}

/* Full-width colour bands. The old site was white top to bottom; alternating
   ground is what gives a long page rhythm without needing photography. */
.flg-band {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.flg-band--dark {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.flg-band--mist {
	background: var(--wp--preset--color--mist);
}

.flg-band--dark :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--white);
}

/* A rule that reads as a deliberate mark rather than a border. */
.flg-rule {
	inline-size: 4rem;
	block-size: 4px;
	border: 0;
	margin: 0 0 1.5rem;
	background: var(--wp--preset--color--carolina);
}

/* Numbers, set large enough to be the thing you notice first. */
.flg-figure {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--stat);
	font-weight: 700;
	line-height: 0.85;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	display: block;
}

/* Tabular figures everywhere a number is compared against another number. */
.flg-commit-wall__count,
.flg-stat-strip__value,
.flg-team-grid__meta {
	font-variant-numeric: tabular-nums;
}

/* ─── Bands butt together ────────────────────────────────────────────── */
/* WordPress puts the root block gap between top-level template parts and
   between a flow layout's children. For full-width colour bands that shows up
   as a white stripe between the navy header and the navy hero, and between
   every band. Bands carry their own padding; they need no gap. */
.wp-site-blocks > * + *,
#flg-main > * + * {
	margin-block-start: 0;
}

/* ─── Hero ───────────────────────────────────────────────────────────── */
/* The navy header sits directly above, so the two read as one block.
   Contents sit in .flg-hero__inner: the constrained layout centres any child
   narrower than the content size with margin:auto !important, which is what
   indented the headline. One wrapper takes the constraint; its children then
   left-align and max-inline-size only limits their width. */
.flg-hero {
	padding-block: clamp(3.5rem, 9vw, 8rem) clamp(3rem, 7vw, 6rem);
}

.flg-hero h1 {
	max-inline-size: 16ch;
	margin-block: 0 1.5rem;
}

.flg-hero__lede {
	max-inline-size: 42ch;
	color: var(--wp--preset--color--mist);
}

/* ─── Cinematic hero ─────────────────────────────────────────────────── */
/* Structure follows bethebestli.com's opening: a full-bleed photograph, a
   directional veil so the headline stays legible over whatever the photo is
   doing, oversized type, actions, and a strip of figures along the bottom.
   The colours are FLG's own — navy and carolina, not their paper-and-red —
   because the palette is confirmed, sits in theme.json and ten OG cards, and
   borrowing a direct competitor's exact colours would make FLG read as their
   second brand.

   The photograph comes from the front page's featured image, so it is changed
   in the admin rather than in this file. With no featured image set, the cover
   falls back to flat navy and the hero still reads — the type carries it. */
.flg-hero--cinematic {
	min-block-size: min(100svh, 46rem);
	display: flex;
	align-items: stretch;
	overflow: clip;
}

/* The overlay span cover paints. Two gradients: one across, so the left third
   where the text sits is nearly solid; one up from the base, so the figures
   along the bottom hold their contrast. */
.flg-hero--cinematic .wp-block-cover__background {
	opacity: 1;
	background:
		linear-gradient(90deg, rgba(18, 34, 76, 0.97), rgba(18, 34, 76, 0.86) 44%, rgba(18, 34, 76, 0.46)),
		linear-gradient(0deg, rgba(13, 24, 54, 0.92), transparent 58%);
}

/* Bias the crop low and right: team photographs put faces above centre, and
   the text occupies the left. */
.flg-hero--cinematic .wp-block-cover__image-background {
	object-position: 60% 35%;
	transform: scale(1.06);
	transform-origin: 65% 80%;
}

.flg-hero--cinematic .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(1.5rem, 4vh, 3rem);
	inline-size: 100%;
	padding-block: clamp(2rem, 6vh, 4rem);
}

.flg-hero--cinematic .flg-eyebrow {
	color: var(--wp--preset--color--carolina);
}

/* 6.2vw between a 3rem floor and a 5.7rem ceiling, leading just over 1, and a
   measure short enough that the line breaks land where they should. */
.flg-hero--cinematic h1 {
	font-size: clamp(2.6rem, 6.2vw, 5.7rem);
	line-height: 1.02;
	letter-spacing: -0.015em;
	max-inline-size: 19ch;
	margin-block: 0;
	text-shadow: 0 2px 20px rgba(13, 24, 54, 0.55);
}

.flg-hero--cinematic .flg-hero__lede {
	max-inline-size: 46ch;
	margin-block: 0;
}

/* The figures strip. Pulled to the foot of the hero and separated by a rule,
   so it reads as evidence under the claim rather than a second headline. */
.flg-hero__strip {
	/* The inner container is a flex column and the constrained layout gives
	   children auto side margins, which shrink a flex item to its content.
	   Without this the figures collapse into a 136px column. */
	align-self: stretch;
	inline-size: 100%;
	margin-block-start: auto;
	padding-block-start: clamp(1.25rem, 3vh, 2rem);
	border-block-start: 1px solid rgba(123, 175, 212, 0.35);
}

/* The strip's own styles are built for a light band: navy figures on white.
   Inside the hero it sits on navy, so the colours invert here rather than the
   block growing a variant attribute — the hero is the only dark context it is
   used in, and context is exactly what a descendant selector is for.
   White on navy is 15.45:1; carolina rules on navy, 6.57:1. */
.flg-hero__strip .flg-stat-strip__item {
	border-block-start-color: var(--wp--preset--color--carolina);
	padding-block-start: 1rem;
}

.flg-hero__strip .flg-stat-strip__value {
	color: var(--wp--preset--color--white);
	font-size: clamp(1.75rem, 26cqi, 3.25rem);
}

.flg-hero__strip .flg-stat-strip__label {
	color: var(--wp--preset--color--mist);
	margin-block-start: 0.4rem;
}

/* ─── Page heads ─────────────────────────────────────────────────────── */
/* Every inner page opens the way the homepage does, at a smaller scale: dark
   ground, a chipped eyebrow, and type large enough to be the only thing on the
   screen. This is most of what makes a set of pages feel like one site. */
.flg-title-band {
	padding-block: clamp(3.5rem, 9vw, 7rem);
}

.flg-title-band h1 {
	font-size: clamp(2.4rem, 5.4vw, 4.6rem);
	line-height: 1.03;
	letter-spacing: -0.015em;
	max-inline-size: 18ch;
	margin: 0;
}

/* One accent word inside a heading, their strongest typographic device.
   Carolina only ever appears on navy, where it passes at 6.57:1. */
.flg-band--dark h1 .flg-accent,
.flg-band--dark h2 .flg-accent {
	color: var(--wp--preset--color--carolina);
}

/* ─── Cards ──────────────────────────────────────────────────────────── */
/* Square, hairline, and reactive to the pointer. Gated on hover-capable
   devices so a touch screen never gets stuck in a hover state, and on motion
   preference so the lift is not forced on anyone. */
.flg-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: var(--wp--preset--color--white);
	padding: clamp(1.25rem, 3vw, 2rem);
	transition:
		border-color 250ms ease,
		box-shadow 250ms ease,
		transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.flg-band--dark .flg-card {
	background: var(--wp--preset--color--navy-deep);
	border-color: rgba(123, 175, 212, 0.3);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.flg-card:hover {
		border-color: var(--wp--preset--color--link);
		box-shadow: 0 16px 40px rgba(13, 24, 54, 0.18);
		transform: translateY(-3px);
	}

	.flg-band--dark .flg-card:hover {
		border-color: var(--wp--preset--color--carolina);
	}
}

/* ─── The pathway, as a stepped sequence ─────────────────────────────── */
/* BTB's most distinctive section after the hero: the introduction pins to the
   side while the steps scroll past it, each one lighting up as it reaches the
   middle of the screen, with a numbered meter tracking progress.
   FLG's ladder already holds the four age bands, so it carries the same shape
   without inventing anything. */
.flg-ladder--stepped {
	display: grid;
	gap: clamp(2rem, 5vw, 5rem);
}

@media (min-width: 62em) {
	.flg-ladder--stepped {
		grid-template-columns: 0.9fr 1fr;
		align-items: start;
	}

	.flg-ladder__intro {
		position: sticky;
		top: 5rem;
	}
}

.flg-ladder__rungs {
	display: block;
}

.flg-ladder__rung {
	border: 1px solid var(--wp--preset--color--line);
	border-inline-start: 3px solid var(--wp--preset--color--line);
	border-radius: 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	margin-block-end: 1rem;
	background: var(--wp--preset--color--white);
	transition:
		border-color 500ms ease,
		opacity 400ms ease,
		transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* The block's original stylesheet draws a carolina rule across the top of
   each rung. On this white band that is carolina on white, 2.35:1 — the one
   pairing the palette forbids — and it fought the borders above. The stepped
   variant takes the neutral line instead; the scoped selector outranks the
   block stylesheet regardless of which loads last. */
.flg-ladder--stepped .flg-ladder__rung {
	border-block-start: 1px solid var(--wp--preset--color--line);
	padding: clamp(1.25rem, 3vw, 2rem);
}

/* The dimmed resting state only exists where the steps can actually light up.
   Without JavaScript, or with reduced motion, every rung is simply legible. */
.flg-js:not(.flg-reduce) .flg-ladder__rung {
	opacity: 0.62;
	transform: scale(0.985);
	transform-origin: left center;
}

.flg-js:not(.flg-reduce) .flg-ladder__rung[data-flg-active] {
	opacity: 1;
	transform: none;
}

.flg-ladder__rung[data-flg-active] {
	border-color: var(--wp--preset--color--line);
	border-inline-start-color: var(--wp--preset--color--link);
}

/* The meter. Decorative and duplicated by the steps themselves, so it is
   hidden from assistive technology rather than read out twice. */
.flg-ladder__meter {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	margin-block-start: 2rem;
}

.flg-ladder__meter span {
	position: relative;
	padding-block-start: 0.75rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

.flg-ladder__meter span::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 2px;
	background: var(--wp--preset--color--line);
}

.flg-ladder__meter span[data-flg-active] {
	color: var(--wp--preset--color--navy);
}

.flg-ladder__meter span[data-flg-active]::before {
	background: var(--wp--preset--color--link);
}

@media (prefers-reduced-motion: reduce) {
	.flg-ladder__intro {
		position: static;
	}

	.flg-ladder__rung,
	.flg-card {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ─── Tap targets ────────────────────────────────────────────────────── */
/* Measured at a true 360px: the menu button was 24x24, the site title 19px
   tall and the "see every..." links 16px. 24px is the WCAG 2.2 floor; 44px is
   what a thumb needs, and on a phone the menu button is how parents get
   around. The visible glyphs stay the same size — only the hit area grows. */
.flg-header .wp-block-navigation__responsive-container-open,
.flg-header .wp-block-navigation__responsive-container-close {
	min-inline-size: 44px;
	min-block-size: 44px;
	justify-content: center;
	align-items: center;
}

/* Header and footer both carry the site title as a home link. */
.wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

.flg-more-link a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

.flg-schedule__what a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

/* An eyebrow chip that is also a link (the age band on team pages): the link,
   not the chip, carries the padding, so the whole chip is the target. */
.flg-eyebrow:has(> a) {
	padding: 0;
}

.flg-eyebrow > a {
	display: inline-block;
	padding: 0.55rem 0.7rem;
}

/* The step meter only earns its place beside the pinned introduction, which
   happens at 62em and up. Below that the column is too narrow for four labels
   and they broke mid-word ("YOUTH 3- / 6"), so it is hidden; the rungs carry
   the same information directly underneath. */
@media (max-width: 61.99em) {
	.flg-ladder__meter {
		display: none;
	}
}

/* ─── Interactive pieces: shared ─────────────────────────────────────── */
.flg-button {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 48px;
	text-decoration: none;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s;
	will-change: transform;
}

.flg-button::after {
	content: "→";
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.flg-button:hover {
	box-shadow: 0 12px 28px rgba(13, 24, 54, 0.28);
}

.flg-button:hover::after {
	transform: translateX(4px);
}

/* Toggle buttons for filters. Light by default; the boards override. */
.flg-pill {
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.flg-pill:hover {
	border-color: var(--wp--preset--color--link);
}

.flg-pill[aria-pressed="true"] {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.flg-board .flg-pill {
	background: transparent;
	border-color: #1E3470;
	color: var(--wp--preset--color--white);
}

.flg-board .flg-pill:hover {
	border-color: var(--wp--preset--color--carolina);
}

.flg-board .flg-pill[aria-pressed="true"] {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy-deep);
}

/* Split-flap digits, for the countdown. */
.flg-flaps {
	display: flex;
	gap: 0.3rem;
}

.flg-flap {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(2.3rem, 7vw, 3.5rem);
	height: clamp(3.1rem, 9vw, 4.7rem);
	background: linear-gradient(#16264F 0 49.5%, #0B1633 50.5% 100%);
	border: 1px solid #22386F;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
	color: var(--wp--preset--color--white);
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: clamp(1.8rem, 5.4vw, 2.9rem);
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.flg-flap::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: 1px;
	background: rgba(0, 0, 0, 0.55);
}

.flg-flap.is-flipping {
	animation: flg-flap 0.32s ease-in-out;
}

@keyframes flg-flap {
	50% { transform: rotateX(-88deg); filter: brightness(0.6); }
}

.flg-nextup .flg-button {
	background: var(--wp--preset--color--carolina);
	color: var(--wp--preset--color--navy-deep);
}

/* Club numbers roll once when they come into view. The true figure stays in
   the text; the rolling digits are painted over it and the figure hidden
   underneath only while they run. */
.flg-stat-strip__value.is-rolling {
	position: relative;
	color: transparent;
}

.flg-stat-strip__value.is-rolling::after {
	content: attr(data-roll);
	position: absolute;
	inset: 0;
	color: var(--flg-roll-color, currentColor);
}

/* ─── The play diagram in the hero ───────────────────────────────────── */
/* Between the veil and the headline: above the darkening so the play reads,
   below the text so it never covers it. */
.flg-hero--cinematic .flg-play {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.flg-hero--cinematic .wp-block-cover__inner-container {
	z-index: 2;
}

/* ─── Flip cards ─────────────────────────────────────────────────────── */
/* Without the script the back simply follows the front, as a plain list. */
.has-flip .flg-team-grid__list {
	perspective: 1400px;
}

.flg-flip.flg-team-grid__item {
	padding: 0;
	border: 0;
}

.flg-flip__face {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
}

.flg-flip__year {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 0.85;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--navy);
}

.flg-flip__meta {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

.flg-flip__toggle {
	display: none;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	margin-top: 0.75rem;
	padding: 0 1rem;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
}

.flg-flip__back-title {
	margin: 0 0 0.5rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.flg-flip__events {
	margin: 0;
	padding: 0;
	list-style: none;
}

.flg-flip__events li {
	display: grid;
	border-top: 1px solid rgba(18, 34, 76, 0.2);
}

.flg-flip__events li:first-child {
	border-top: 0;
}

.flg-flip__events a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.1;
	color: inherit;
}

.flg-flip__events span {
	margin-bottom: 0.4rem;
	font-size: 0.8rem;
}

.flg-flip__none {
	margin: 0;
}

.flg-js .flg-flip__toggle {
	display: inline-flex;
}

.flg-js .flg-flip__inner {
	display: grid;
	height: 100%;
	transform-style: preserve-3d;
	transform: rotateX(var(--flg-rx, 0deg)) rotateY(calc(var(--flg-ry, 0deg) + var(--flg-turn, 0deg)));
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.flg-js .flg-flip.is-flipped .flg-flip__inner {
	--flg-turn: 180deg;
}

.flg-js .flg-flip__face {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.flg-js .flg-flip__front .flg-flip__toggle,
.flg-js .flg-flip__back .flg-flip__toggle {
	align-self: flex-start;
	margin-top: auto;
}

.flg-js .flg-flip__front .flg-flip__meta {
	margin-bottom: 0.75rem;
}

.flg-js .flg-flip__back {
	transform: rotateY(180deg);
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.flg-js .flg-flip__back .flg-flip__back-title {
	color: var(--wp--preset--color--carolina);
}

.flg-js .flg-flip__back .flg-flip__events li {
	border-top-color: rgba(123, 175, 212, 0.3);
}

.flg-js .flg-flip:hover .flg-flip__front {
	border-color: var(--wp--preset--color--link);
}

/* ─── Moving commit wall ─────────────────────────────────────────────── */
.flg-marquee {
	display: grid;
	gap: 1rem;
}

.flg-marquee__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.flg-marquee__rows {
	display: grid;
	gap: 0.7rem;
}

.flg-marquee__track {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.flg-marquee__chip {
	flex: none;
	display: inline-flex;
	align-items: baseline;
	gap: 0.3rem;
	padding: 0.7rem 1.1rem;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 2.4vw, 1.5rem);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.flg-marquee__chip:hover {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.flg-marquee__times {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--link);
}

.flg-marquee__chip:hover .flg-marquee__times {
	color: var(--wp--preset--color--carolina);
}

.flg-marquee__total {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--link);
}

.flg-marquee.is-moving .flg-marquee__track-wrap {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.flg-marquee.is-moving .flg-marquee__track {
	flex-wrap: nowrap;
	width: max-content;
	animation: flg-slide var(--flg-dur, 60s) linear infinite;
}

.flg-marquee.is-moving .flg-marquee__track.is-reverse {
	animation-direction: reverse;
}

.flg-marquee.is-moving .flg-marquee__rows:hover .flg-marquee__track,
.flg-marquee.is-moving .flg-marquee__rows:focus-within .flg-marquee__track {
	animation-play-state: paused;
}

@keyframes flg-slide {
	to { transform: translateX(-50%); }
}

/* ─── Team pages: the schedule as a departures board ─────────────────── */
.wp-block-flg-team-schedule {
	padding: clamp(1rem, 3vw, 1.5rem);
	background:
		radial-gradient(circle at 1px 1px, rgba(123, 175, 212, 0.08) 1px, transparent 1.4px) 0 0 / 7px 7px,
		#0A1330;
	border: 2px solid #1E3470;
	color: var(--wp--preset--color--white);
}

.wp-block-flg-team-schedule .flg-schedule__heading {
	margin: 0;
	color: var(--wp--preset--color--white);
	text-transform: uppercase;
}

.wp-block-flg-team-schedule .flg-schedule__item,
.wp-block-flg-team-schedule .flg-schedule__item:first-child {
	border-block-start-color: #1E3470;
}

.wp-block-flg-team-schedule .flg-schedule__when {
	color: var(--wp--preset--color--carolina);
	font-weight: 700;
	font-size: 0.9rem;
}

.wp-block-flg-team-schedule .flg-schedule__what a {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	text-transform: uppercase;
	text-decoration: none;
}

.wp-block-flg-team-schedule .flg-schedule__what a:hover,
.wp-block-flg-team-schedule .flg-schedule__what a:focus-visible {
	text-decoration: underline;
}

.wp-block-flg-team-schedule .flg-schedule__where {
	color: #9DB4CF;
}

/* ─── Reduced motion, for all of the above ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.flg-button,
	.flg-button::after,
	.flg-js .flg-flip__inner {
		transition: none;
	}

	.flg-flap.is-flipping {
		animation: none;
	}

	.flg-marquee.is-moving .flg-marquee__track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
	}

	.flg-marquee.is-moving .flg-marquee__track-wrap {
		mask-image: none;
		-webkit-mask-image: none;
	}

	.flg-marquee__chip.is-copy {
		display: none;
	}
}

/* ─── Scroll motion ──────────────────────────────────────────────────── */
/* Progressive enhancement. Without JavaScript, or with reduced motion asked
   for, every one of these elements is simply visible: the .flg-js gate means
   the hidden state is never applied unless something can un-apply it. */
.flg-reveal {
	opacity: 1;
}

.flg-js:not(.flg-reduce) .flg-reveal[data-flg-ready]:not([data-flg-seen]) {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
}

.flg-js:not(.flg-reduce) .flg-reveal[data-flg-ready] {
	transition:
		opacity 600ms ease,
		transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--flg-delay, 0ms);
}

/* Focus must never land on something invisible. */
.flg-reveal:focus-within {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* Reading progress. Fixed, 3px, and out of the accessibility tree — it is
   decoration that duplicates the scrollbar. */
.flg-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 100;
	block-size: 3px;
	inline-size: 100%;
	transform: scaleX(var(--flg-progress, 0));
	transform-origin: 0 50%;
	/* No single colour works: the bar crosses navy bands and white ones.
	   Carolina reads on navy (6.57:1) and vanishes on white (2.35:1); the link
	   blue does the reverse (2.26:1 on navy). So, as with the focus ring, two
	   tones — carolina, edged in navy — and one always shows. */
	background: var(--wp--preset--color--carolina);
	box-shadow: 0 1px 0 var(--wp--preset--color--navy);
	pointer-events: none;
}

/* The registration link, kept within reach once the hero's copy has gone by.
   Hidden from the tab order while off-screen so it cannot be focused blind. */
.flg-sticky-cta {
	position: fixed;
	inset-block-end: 1rem;
	inset-inline: 1rem;
	z-index: 90;
	display: flex;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 1rem, 0);
	transition: opacity 250ms ease, transform 250ms ease, visibility 250ms;
}

/* WCAG 2.2 AA 2.4.11, Focus Not Obscured. A fixed bar at the foot of the
   screen can sit on top of whichever link a keyboard user has just tabbed to,
   and on a phone it spans the full width. scroll-padding makes the browser
   stop short of it when it scrolls focus into view, and the body padding
   keeps the last lines of the footer from ending up underneath it.
   Both are set once, when the bar is created, rather than toggled with it —
   toggling body padding as the bar appears would shift the page. */
html.flg-has-sticky-cta {
	scroll-padding-block-end: 5.5rem;
}

html.flg-has-sticky-cta body {
	padding-block-end: 5rem;
}

.flg-sticky-cta[data-flg-shown] {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.flg-sticky-cta a {
	display: inline-block;
	padding: 0.85rem 1.5rem;
	min-block-size: 44px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--white);
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 8px 30px rgba(13, 24, 54, 0.35);
}

.flg-sticky-cta a:hover,
.flg-sticky-cta a:focus-visible {
	background: var(--wp--preset--color--link);
}

@media (min-width: 48em) {
	.flg-sticky-cta {
		inset-inline: auto 1.5rem;
	}
}

/* Everything above is motion for its own sake as far as a reader who has asked
   for less is concerned. Honour that, and leave the layout exactly as it is. */
@media (prefers-reduced-motion: reduce) {
	.flg-reveal,
	.flg-hero--cinematic .wp-block-cover__image-background {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.flg-progress {
		display: none;
	}
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
.flg-footer__heading {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--carolina);
	margin-block-end: 1rem;
}

.flg-footer__links {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.flg-footer__links a,
.flg-footer__legal a {
	display: inline-block;
	min-height: 24px;
}

.flg-footer__legal {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid rgb(255 255 255 / 0.15);
}

/* ─── Interior title band ────────────────────────────────────────────── */
/* Every interior page opens on navy, like the homepage hero, so moving
   between pages feels like one site rather than a homepage and a set of
   documents. The inner wrapper does the same job as .flg-hero__inner. */
.flg-title-band {
	padding-block: clamp(2.75rem, 7vw, 5.5rem);
}

.flg-title-band h1 {
	max-inline-size: 20ch;
	margin: 0;
}

.flg-title-band .flg-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.flg-content-band {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

/* A short list of destinations, used on the 404 page. */
.flg-link-list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.flg-link-list a {
	display: inline-block;
	min-height: 24px;
}

/* ─── Header navigation ─────────────────────────────────────────────── */
/* Six explicit destinations. With no menu assigned, the navigation block
   fell back to listing every page on the site, which is why it had been
   forced into a hamburger even on desktop. */
.flg-nav .wp-block-navigation-item__content {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	min-height: 24px;
	display: inline-flex;
	align-items: center;
}

.flg-nav .wp-block-navigation__container {
	gap: clamp(1rem, 2.2vw, 2rem);
}

/* ─── Media Day photographs ──────────────────────────────────────────── */
/* Four group shots from Media Day 2025, youngest to oldest, so the row reads
   as the pathway the ladder below describes. Studio shots on black, so they
   sit on navy rather than white. Two across on phones, four from tablet up. */
.flg-media-day h2 {
	margin-block: 0 clamp(1.5rem, 3vw, 2.25rem);
}

.flg-media-day__strip {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.5rem, 1.2vw, 1rem);
}

@media (min-width: 48em) {
	.flg-media-day__strip {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.flg-media-day__item {
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--navy-deep);
}

.flg-media-day__item img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 0.5s ease;
}

@media (hover: hover) {
	.flg-media-day__item:hover img {
		transform: scale(1.04);
	}
}

/* A photograph behind an interior title band. The navy wash is heavy on the
   left where the heading sits, so white type keeps well over 4.5:1. */
.flg-title-band--photo {
	background-color: var(--wp--preset--color--navy);
	background-image:
		linear-gradient(90deg, rgba(18, 34, 76, 0.96), rgba(18, 34, 76, 0.84) 50%, rgba(18, 34, 76, 0.55)),
		var(--flg-title-photo);
	background-size: cover;
	background-position: center, 70% 62%;
}

.flg-title-band--teams {
	--flg-title-photo: url("assets/images/flg-teams-media-day.jpg");
}

@media (prefers-reduced-motion: reduce) {
	.flg-media-day__item img {
		transition: none;
	}
}

/* ─── Coaching page ──────────────────────────────────────────────────── */
/* The coaching hub is built from its own content: a photo hero, three doors,
   then the interactive method blocks on alternating grounds. */

/* The hero photo is a coach mid-conversation; keep his face in frame on the
   right, clear of the headline. */
.flg-hero--coaching .wp-block-cover__image-background {
	object-position: 72% 40%;
}

.flg-hero--coaching h1 {
	max-inline-size: 16ch;
}

.flg-hero__actions {
	gap: 0.75rem;
}

/* Buttons on dark grounds: a solid Carolina one and an outlined one. Carolina
   on navy is 6.57:1; navy-deep text on Carolina is 7.2:1. */
.flg-button--light .wp-block-button__link {
	background: var(--wp--preset--color--carolina);
	color: var(--wp--preset--color--navy-deep);
	min-height: 48px;
}

.flg-button--ghost .wp-block-button__link,
.flg-button--ghost.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.7);
	color: var(--wp--preset--color--white);
	min-height: 48px;
}

.flg-button--light .wp-block-button__link:hover,
.flg-button--ghost .wp-block-button__link:hover {
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.flg-button--light .wp-block-button__link:focus-visible,
.flg-button--ghost .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

.flg-band--deep {
	background: var(--wp--preset--color--navy-deep);
}

/* Three doors. Each whole card is one link: the "more" link stretches over
   it, so the target is the card and there is still only one link to read. */
.flg-doors {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	margin-block-start: clamp(1rem, 3vw, 2rem);
}

.flg-door {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0 0 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}

.flg-door > :not(.flg-door__photo) {
	margin-inline: 1.25rem;
}

.flg-door h3 {
	margin-block: 0.4rem 0.5rem;
}

.flg-door p {
	margin-block: 0 0.75rem;
}

.flg-door__photo {
	margin: 0 0 1rem;
	overflow: hidden;
}

.flg-door__photo img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: 50% 30%;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.flg-door__tag {
	display: inline-block;
	margin-block-start: 1.25rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--link);
}

.flg-door__photo + .flg-door__tag {
	margin-block-start: 0;
}

.flg-door__link {
	margin-block-start: auto;
}

.flg-door__link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.flg-door:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(13, 24, 54, 0.14);
}

.flg-door:hover .flg-door__photo img {
	transform: scale(1.04);
}

.flg-door:focus-within {
	outline: 3px solid var(--wp--preset--color--link);
	outline-offset: 2px;
}

/* The sign-in door has no photo; it is the dark one, for staff. */
.flg-door--signin {
	justify-content: flex-start;
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	background-image:
		radial-gradient(circle at 85% 20%, rgba(123, 175, 212, 0.28), transparent 45%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 28px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 28px);
}

.flg-door--signin h3 {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--xx-large);
	margin-block-start: auto;
}

.flg-door--signin .flg-door__tag,
.flg-door--signin .flg-door__link a {
	color: var(--wp--preset--color--carolina);
}

/* Closing band: copy on the left, two game photos on the right. */
.flg-family-close {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

@media (min-width: 56em) {
	.flg-family-close {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* The band's constrained layout would centre each child at a fixed width;
   inside the grid they should just fill their cells. */
.flg-family-close > .wp-block-group {
	max-inline-size: none;
	margin-inline: 0 !important;
}

.flg-family-close__text h2 {
	margin-block: 0 0.75rem;
}

.flg-family-close__photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.flg-family-close__photos figure {
	margin: 0;
}

.flg-family-close__photos img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.flg-family-close__photos figure:nth-child(2) {
	transform: translateY(1.5rem);
}

@media (prefers-reduced-motion: reduce) {
	.flg-door,
	.flg-door__photo img {
		transition: none;
	}

	.flg-door:hover,
	.flg-door:hover .flg-door__photo img {
		transform: none;
	}
}

/* Page head photographs, one per page. The variable is set per page here so
   the templates stay generic; a page with no photograph named below simply
   keeps the flat navy band, because an unresolved variable drops the whole
   background-image declaration. */
.flg-title-band--coaches {
	--flg-title-photo: url("assets/images/flg-head-coaches.jpg");
}

.flg-title-band--events {
	--flg-title-photo: url("assets/images/flg-head-events.jpg");
}

.flg-title-band--commits {
	--flg-title-photo: url("assets/images/flg-head-commits.jpg");
}

.flg-page-why-flg .flg-title-band--page {
	--flg-title-photo: url("assets/images/flg-head-why.jpg");
}

.flg-page-recruiting .flg-title-band--page {
	--flg-title-photo: url("assets/images/flg-head-recruiting.jpg");
}

.flg-page-goalies .flg-title-band--page {
	--flg-title-photo: url("assets/images/flg-head-goalies.jpg");
}

.flg-page-tryouts .flg-title-band--page,
.flg-page-flg-summer-camp .flg-title-band--page {
	--flg-title-photo: url("assets/images/flg-head-tryouts.jpg");
}

.flg-page-about .flg-title-band--page,
.flg-page-be-your-best .flg-title-band--page {
	--flg-title-photo: url("assets/images/flg-head-about.jpg");
}

.flg-page-contact .flg-title-band--page,
.flg-page-subscribe .flg-title-band--page {
	--flg-title-photo: url("assets/images/flg-head-contact.jpg");
}

/* ─── Card grids ─────────────────────────────────────────────────────── */
/* Used by why-FLG, recruiting and the goalie page for short parallel points.
   Editable core groups rather than another block, because the content is
   prose and the owner should be able to change it in the editor. */
.flg-cards {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	margin-block-start: clamp(1rem, 3vw, 1.75rem);
}

.flg-card {
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}

.flg-card h3 {
	margin-block: 0 0.5rem;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
}

.flg-card p {
	margin-block: 0;
}

@media (hover: hover) {
	.flg-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 14px 30px rgba(13, 24, 54, 0.12);
	}
}

/* On a dark band the cards invert: a hairline Carolina edge on navy-deep. */
.flg-cards--dark .flg-card,
.flg-band--dark .flg-card {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(123, 175, 212, 0.35);
	color: var(--wp--preset--color--white);
}

.flg-cards--dark .flg-card h3,
.flg-band--dark .flg-card h3 {
	color: var(--wp--preset--color--white);
}

@media (prefers-reduced-motion: reduce) {
	.flg-card {
		transition: none;
	}

	.flg-card:hover {
		transform: none;
	}
}

/* ─── Sticky header ──────────────────────────────────────────────────── */
/* The menu is how a parent gets around, so it stays reachable. It condenses
   once the page has scrolled, which gives the phone drawer a fixed anchor
   and keeps the bar out of the way of the content. */
.flg-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	transition: padding 0.25s ease, box-shadow 0.25s ease;
}

.flg-header.is-stuck {
	padding-block: 0.4rem !important;
	box-shadow: 0 10px 30px rgba(13, 24, 54, 0.35);
}

.flg-header__bar {
	gap: 1rem;
}

/* The drawer covers the page below the bar; nothing behind it should scroll
   under the fingers. */
body.flg-nav-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.flg-header {
		transition: none;
	}
}

/* ─── Numbered steps ─────────────────────────────────────────────────── */
/* A real sequence — apply, talk, certify, start — so the numbers carry
   meaning rather than decoration. */
.flg-steps {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin-block-start: clamp(1rem, 3vw, 1.75rem);
	counter-reset: flg-step;
}

.flg-step {
	position: relative;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border: 1px solid var(--wp--preset--color--line);
	border-block-start: 3px solid var(--wp--preset--color--navy);
	background: var(--wp--preset--color--white);
}

.flg-step__n {
	display: block;
	margin-block-end: 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--carolina);
	font-variant-numeric: tabular-nums;
}

.flg-step h3 {
	margin-block: 0 0.4rem;
	font-size: var(--wp--preset--font-size--large);
}

.flg-step p {
	margin-block: 0;
}

.flg-band--dark .flg-step {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(123, 175, 212, 0.35);
	border-block-start-color: var(--wp--preset--color--carolina);
	color: var(--wp--preset--color--white);
}

.flg-band--dark .flg-step h3 {
	color: var(--wp--preset--color--white);
}

/* ─── Team grid filter ───────────────────────────────────────────────── */
.flg-team-grid__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: clamp(1rem, 3vw, 1.5rem);
}

/* The grid rule would override the hidden attribute. */
.flg-team-grid__item[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.flg-team-grid__item.is-entering {
		animation: flg-grid-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: calc(var(--flg-i, 0) * 40ms);
	}
}

@keyframes flg-grid-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* ─── Roster filter ──────────────────────────────────────────────────── */
.flg-roster__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: 0.75rem 1rem;
}

.flg-roster__table tr[hidden] {
	display: none;
}

/* The team page's own summary, in the head band. */
.flg-title-band__lede p,
.flg-title-band__lede {
	max-inline-size: 46ch;
	margin-block: 0.9rem 0;
	color: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--large);
}

/* ─── The "what brings you here" chooser ─────────────────────────────── */
/* Three reasons families arrive, each with the pages that answer it. Real
   tabs, driven by the same script the dials and the age scale use; without
   it all three panels show, which is the whole content either way. */
.flg-choose {
	display: grid;
	gap: 1rem;
	margin-block-start: clamp(1rem, 3vw, 1.75rem);
}

.flg-choose__tabs {
	display: none;
}

.flg-js .flg-choose__tabs {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.flg-choose__tab {
	min-block-size: 56px;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font: inherit;
	font-weight: 700;
	text-align: start;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.flg-choose__tab:hover {
	border-color: var(--wp--preset--color--link);
}

.flg-choose__tab:focus-visible {
	outline: 3px solid var(--wp--preset--color--link);
	outline-offset: 2px;
}

.flg-choose__tab[aria-selected="true"] {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.flg-choose__panel {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--wp--preset--color--line);
	border-inline-start: 4px solid var(--wp--preset--color--carolina);
	background: var(--wp--preset--color--white);
}

.flg-choose__panel[hidden] {
	display: none;
}

.flg-choose__panel h3 {
	margin-block: 0 0.6rem;
}

.flg-choose__panel p {
	margin-block: 0 0.75rem;
	max-inline-size: 60ch;
}

.flg-choose__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-block-end: 0;
}

.flg-choose__links a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-weight: 700;
}

.flg-js .flg-choose__panel {
	animation: flg-choose-in 0.35s ease both;
}

@keyframes flg-choose-in {
	from { opacity: 0; translate: 0 6px; }
}

/* The why-FLG hero photo is a wide game shot; keep the action visible behind
   the headline rather than centring on empty grass. */
.flg-hero--why .wp-block-cover__image-background {
	object-position: 60% 42%;
}

@media (prefers-reduced-motion: reduce) {
	.flg-js .flg-choose__panel {
		animation: none;
	}

	.flg-choose__tab {
		transition: none;
	}
}

/* ─── Coaches portal ─────────────────────────────────────────────────── */
/* A working screen rather than a marketing page: one column, real labels,
   generous targets. Styles live here rather than in the block because the
   block deliberately has no build step — it is PHP and this stylesheet. */
.flg-portal {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	max-inline-size: 48rem;
}

.flg-portal__notice {
	margin: 0;
	padding: 0.85rem 1rem;
	border-inline-start: 4px solid var(--wp--preset--color--link);
	background: var(--wp--preset--color--mist);
	font-weight: 600;
}

.flg-portal__notice--warn {
	border-inline-start-color: #b4541f;
}

.flg-portal__notice-list {
	margin: 0;
	padding-inline-start: 1.2rem;
	font-size: var(--wp--preset--font-size--small);
}

.flg-portal__signin h2,
.flg-portal__head h2 {
	margin-block: 0 0.5rem;
}

.flg-portal__help,
.flg-portal__hint {
	margin: 0.35rem 0 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
	max-inline-size: 52ch;
}

.flg-portal__form {
	display: grid;
}

.flg-portal__form label {
	margin-block-start: 1rem;
	font-weight: 700;
}

.flg-portal__form input[type="email"],
.flg-portal__form input[type="text"],
.flg-portal__form input[type="password"],
.flg-portal__form input[type="tel"],
.flg-portal__form input[type="date"],
.flg-portal__form input[type="file"],
.flg-portal__form textarea {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 48px;
	margin-block-start: 0.4rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
	font: inherit;
	color: var(--wp--preset--color--ink);
}

.flg-portal__form textarea {
	min-block-size: 8rem;
	line-height: 1.5;
}

.flg-portal__form input:focus-visible,
.flg-portal__form textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--link);
	outline-offset: 1px;
}

.flg-portal__button {
	justify-self: start;
	min-block-size: 48px;
	margin-block-start: 1.25rem;
	padding: 0.7rem 1.4rem;
	border: 0;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.flg-portal__button:hover {
	background: var(--wp--preset--color--link);
}

.flg-portal__button:focus-visible {
	outline: 3px solid var(--wp--preset--color--link);
	outline-offset: 2px;
}

.flg-portal__head {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding-block-end: 1.25rem;
	border-block-end: 2px solid var(--wp--preset--color--navy);
}

.flg-portal__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
}

.flg-portal__links a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-weight: 700;
}

.flg-portal__face img {
	display: block;
	inline-size: 4.5rem;
	block-size: 4.5rem;
	object-fit: cover;
}

.flg-portal__checklist {
	padding: clamp(1rem, 3vw, 1.5rem);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--mist);
}

.flg-portal__checklist h3 {
	margin-block: 0 0.75rem;
}

.flg-portal__checklist ul,
.flg-portal__teams ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

.flg-portal__checklist li {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
}

.flg-portal__checklist li.is-done {
	color: var(--wp--preset--color--ink-soft);
}

.flg-portal__checklist li.is-missing {
	font-weight: 700;
}

.flg-portal__tick {
	flex: 0 0 auto;
	inline-size: 1.2rem;
	font-weight: 700;
	color: var(--wp--preset--color--link);
}

.is-missing .flg-portal__tick {
	color: #b4541f;
}

.flg-portal__teams li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: baseline;
	padding-block: 0.5rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.flg-portal__teams a {
	font-weight: 700;
}

.flg-portal__teams li span {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

/* The director's view of the club-wide gaps. */
.flg-portal__club {
	padding: clamp(1rem, 3vw, 1.5rem);
	border: 1px solid var(--wp--preset--color--line);
	border-inline-start: 4px solid #b4541f;
}

.flg-portal__club h3 {
	margin-block: 0 0.5rem;
}

.flg-portal__club ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.3rem;
}

.flg-portal__club li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	align-items: baseline;
	padding-block: 0.45rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.flg-portal__club a {
	font-weight: 700;
	min-block-size: 24px;
}

.flg-portal__club li span {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

.flg-portal__tools h3 {
	margin-block: 0 0.5rem;
}

.flg-portal__tools p {
	margin-block: 0 0.75rem;
}

.flg-portal__tools a.flg-portal__button {
	display: inline-flex;
	align-items: center;
	margin-block-start: 0;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* Registration, and the directors' approval queue. */
.flg-portal__register {
	padding-block-start: clamp(1.25rem, 3vw, 2rem);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.flg-portal__register h2 {
	margin-block: 0 0.5rem;
}

/* A field only a bot fills in. Off screen rather than display:none, which
   some bots detect and skip. */
.flg-portal__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.flg-portal__review {
	padding: clamp(1rem, 3vw, 1.5rem);
	border: 1px solid var(--wp--preset--color--line);
	border-inline-start: 4px solid var(--wp--preset--color--carolina);
	background: var(--wp--preset--color--white);
}

.flg-portal__review h3 {
	margin-block: 0 0.75rem;
}

.flg-portal__review ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.flg-portal__review li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.75rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.flg-portal__review li span {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

.flg-portal__review form {
	display: flex;
	gap: 0.5rem;
}

.flg-portal__button--small {
	margin-block-start: 0;
	padding: 0.5rem 0.9rem;
	min-block-size: 44px;
}

.flg-portal__button--quiet {
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--navy);
}

.flg-portal__button--quiet:hover {
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--navy);
}

/* ─── Staff sign-in and the control screen ───────────────────────────── */
/* Both reuse the portal's furniture — same form fields, same buttons — so a
   coach and a director are looking at one system in one voice. */
.flg-login .flg-login__remember {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: 1rem;
	font-weight: 400;
}

.flg-login .flg-login__remember input {
	inline-size: 24px;
	block-size: 24px;
	min-block-size: 24px;
	margin: 0;
}

.flg-control {
	max-inline-size: 60rem;
}

.flg-control section + section {
	padding-block-start: clamp(1.25rem, 3vw, 2rem);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.flg-control h3 {
	margin-block: 0 0.75rem;
}

.flg-control__counts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}

.flg-control__counts a {
	display: block;
	padding: 0.9rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-block-start: 3px solid var(--wp--preset--color--navy);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.flg-control__counts a:hover {
	border-color: var(--wp--preset--color--link);
}

.flg-control__n {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.flg-control__label {
	display: block;
	margin-block-start: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

.flg-control__drafts {
	display: block;
	margin-block-start: 0.2rem;
	font-size: var(--wp--preset--font-size--small);
	color: #b4541f;
}

.flg-portal__review-list,
.flg-control__gaps,
.flg-control__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.3rem;
}

.flg-portal__review-list li,
.flg-control__gaps li,
.flg-control__links li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.6rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
}

.flg-portal__review-list span,
.flg-control__gaps span,
.flg-control__links span {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

.flg-portal__review-list strong,
.flg-control__gaps a,
.flg-control__links a {
	font-weight: 700;
}

.flg-control__actions {
	display: flex;
	gap: 0.5rem;
}

.flg-control__downloads {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.flg-control a.flg-portal__button,
.flg-portal a.flg-portal__button {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--wp--preset--color--white);
}

.flg-control a.flg-portal__button--quiet,
.flg-portal a.flg-portal__button--quiet {
	color: var(--wp--preset--color--navy);
}

.flg-control__mode {
	margin-block-start: 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
}

.flg-control__mode legend {
	font-weight: 700;
	padding-inline: 0.4rem;
}

.flg-control__mode label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: 0.4rem;
	font-weight: 400;
}

.flg-control__mode input {
	inline-size: 24px;
	block-size: 24px;
	min-block-size: 24px;
	margin: 0;
}

.flg-portal__form select {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 48px;
	margin-block-start: 0.4rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
	font: inherit;
}

/* Summer camp dates and price, from Site Options. */
.flg-camp {
	display: grid;
	gap: 1.25rem;
	justify-items: start;
}

.flg-camp__facts {
	display: grid;
	gap: 1rem 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	margin: 0;
}

.flg-camp__facts dt {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--carolina);
}

.flg-camp__facts dd {
	margin: 0.35rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.05;
	color: var(--wp--preset--color--white);
}

.flg-camp__cta {
	margin: 0;
}

.flg-control__when {
	display: block;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}