/**
 * Per-block Appearance: light/dark mode + color overrides.
 * Colors resolve from the branding theme.json tokens so modes re-theme with the
 * site's color scheme. Overrides arrive as inline styles / custom properties.
 */

/* Type-system tokens — defined on :root so EVERY Fil-Nation section can resolve
 * them, including the separately-registered content/utility blocks (events,
 * age-divisions, content, form, signup) that don't carry the .fnkit-block class.
 * These are the single source of truth for the kit's heading + display type;
 * each block's own rule references them instead of re-declaring the look.
 *
 * Case is a token: set --fnkit-heading-case / --fnkit-display-case to `none`
 * (site-wide, or per section) to render titles as-typed instead of uppercase.
 *
 * Tiers, deliberately distinct:
 *  - heading : the bold "sports" H2 that titles a section band (one shared size).
 *  - display : the oversized page / hero / feature titles. Shared face only —
 *              each block keeps its own font-size (sizes differ per level) and
 *              the big page/hero sizes scale with the client's --fns-display-scale.
 *  - item titles / names (card, plan, roster, event…) are a third tier: they
 *    render AS-TYPED, so the house convention there is Title Case (typed, not CSS). */
:root {
	--fnkit-heading-weight: 900;
	--fnkit-heading-case: uppercase;
	--fnkit-heading-tracking: -0.01em;
	--fnkit-heading-size: clamp(1.8rem, 1rem + 3vw, 3rem);

	--fnkit-display-weight: 800;
	--fnkit-display-case: uppercase;
	--fnkit-display-tracking: -0.01em; /* content-image overrides tighter, on purpose */

	/* Space below a section heading/title before its subtitle/body. One knob for
	 * the whole kit; the rule near the alignment block applies it at a specificity
	 * that overrides each block's own `margin: 0 0 …` shorthand bottom. */
	--fnkit-heading-gap: 2rem;
}

.fnkit-block {
	/* CTA follows the ground-aware --fnkit-cta-bg / --fnkit-cta-label (secondary on
	 * light, main on dark), set on :root / .fnkit-mode-*. A per-block CTA override
	 * still wins by setting --fnkit-cta (+ its label) inline. --fnkit-cta-label is
	 * intentionally left to the ground rules — do NOT re-default it to accent-contrast
	 * here, or a light-ground button would get the wrong (main) label colour. */
	--fnkit-cta: var(--fnkit-cta-bg, var(--wp--preset--color--accent, #c8102e));
	/* --fnkit-eyebrow is intentionally NOT defaulted here: leaving it unset lets the
	 * eyebrow rules fall back to accent (light) or accent-on-dark (dark mode), while
	 * a per-block override still sets it inline. */
	--fnkit-content: 1240px; /* inner content max-width */
	/* Base text follows the active colour scheme so it stays legible on dark
	 * schemes (e.g. "night") — otherwise text falls back to the theme default
	 * (dark) and reads dark-on-dark. Mode-light / mode-dark override this below. */
	color: var(--wp--preset--color--text, #14181f);
}

/* Eyebrow / kicker (the small uppercase label above a headline). Colour comes
 * from --fnkit-eyebrow (accent by default; per-block override in Style). The
 * .fnkit-block prefix keeps this ahead of each block's own accent rule
 * regardless of stylesheet load order. */
.fnkit-block .fnkit-hero__tagline,
.fnkit-block .fnkit-ci__tagline,
.fnkit-block .fnkit-pageheader__eyebrow,
.fnkit-block .fnkit-statement__eyebrow,
.fnkit-block .fnkit-splitcta__eyebrow,
.fnkit-block .fnkit-sports__eyebrow,
.fnkit-block .fnkit-regions__eyebrow,
.fnkit-block .fnkit-sectionhead__eyebrow,
.fnkit-block .fnkit-globalreach__eyebrow {
	display: inline-flex;
	gap: 0.55em;
	align-items: center;
	color: var(--fnkit-eyebrow, var(--wp--preset--color--accent, #c8102e));
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.26em;
}
/* On a dark ground (Dark-mode block or global Dark base) the raw accent can
 * collide with the ground (navy-on-navy). Use the derived accent-on-dark token,
 * which is nudged to stay legible on the ink ground dark sections paint. Only
 * when the eyebrow isn't already overridden per-block (--fnkit-eyebrow unset). */
.fnkit-mode-dark .fnkit-hero__tagline,
.fnkit-mode-dark .fnkit-ci__tagline,
.fnkit-mode-dark .fnkit-pageheader__eyebrow,
.fnkit-mode-dark .fnkit-statement__eyebrow,
.fnkit-mode-dark .fnkit-splitcta__eyebrow,
.fnkit-mode-dark .fnkit-sports__eyebrow,
.fnkit-mode-dark .fnkit-regions__eyebrow,
.fnkit-mode-dark .fnkit-sectionhead__eyebrow,
.fnkit-mode-dark .fnkit-globalreach__eyebrow {
	color: var(--fnkit-eyebrow, var(--wp--preset--color--accent-on-dark, var(--wp--preset--color--accent, #c8102e)));
}
/* Signature bracketed eyebrow: [ LABEL ] — the sports-club kicker. */
.fnkit-block .fnkit-hero__tagline::before,
.fnkit-block .fnkit-ci__tagline::before,
.fnkit-block .fnkit-pageheader__eyebrow::before,
.fnkit-block .fnkit-statement__eyebrow::before,
.fnkit-block .fnkit-splitcta__eyebrow::before,
.fnkit-block .fnkit-sports__eyebrow::before,
.fnkit-block .fnkit-regions__eyebrow::before,
.fnkit-block .fnkit-sectionhead__eyebrow::before,
.fnkit-block .fnkit-globalreach__eyebrow::before { content: "["; opacity: 0.9; }
.fnkit-block .fnkit-hero__tagline::after,
.fnkit-block .fnkit-ci__tagline::after,
.fnkit-block .fnkit-pageheader__eyebrow::after,
.fnkit-block .fnkit-statement__eyebrow::after,
.fnkit-block .fnkit-splitcta__eyebrow::after,
.fnkit-block .fnkit-sports__eyebrow::after,
.fnkit-block .fnkit-regions__eyebrow::after,
.fnkit-block .fnkit-sectionhead__eyebrow::after,
.fnkit-block .fnkit-globalreach__eyebrow::after { content: "]"; opacity: 0.9; }

/* The full-bleed sections below break out with `calc(50% - 50vw)`. `50vw`
 * counts the vertical scrollbar's width but the scroll area doesn't, so each
 * section renders ~scrollbar-width wider than the client area — a tiny
 * horizontal scrollbar on any page with a vertical one. Clip that surplus at the
 * page root. `overflow-x: clip` (not `hidden`) doesn't create a scroll container,
 * so `position: sticky` headers keep working. */
html { overflow-x: clip; }

/* Full-bleed sections like the main site: every Fil-Nation block spans the full
 * viewport width (breaking out of the theme's centered content column), while
 * its inner content is centered to --fnkit-content (default 1240px; set it per
 * block/site to 1024px, 1400px, etc.). */
.fnkit-block,
.fnkit-events,
.fnkit-products,
.fnkit-countdown,
.fnkit-divisions,
.fnkit-signup,
.fnkit-cb,
.fnkit-form {
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	padding-inline: max( 1.5rem, calc( ( 100vw - var(--fnkit-content, 1240px) ) / 2 ) );
	/* Built-in vertical rhythm every section gets by default: 60px top/bottom on
	 * mobile, 100px from tablet up. The native Dimensions control emits inline
	 * padding-top/bottom, which overrides this per block; the Style → Vertical
	 * spacing is a per-block override of this. */
	padding-block: 60px;
}
@media (min-width: 768px) {
	.fnkit-block,
	.fnkit-events,
	.fnkit-products,
	.fnkit-countdown,
	.fnkit-divisions,
	.fnkit-signup,
	.fnkit-cb,
	.fnkit-form {
		padding-block: 100px;
	}
}

/* Thin "band" sections (scrolling ticker, logo strip, announcement bar) are
 * slim by design — the tall section default above must not apply to them. Every
 * section also carries .fnkit-block (added by fnkit_appearance()), so these
 * compound selectors outrank the .fnkit-block padding regardless of load order.
 * Announcement sets its own 0.6rem !important, so it's already covered. */
.fnkit-marq.fnkit-block,
.fnkit-logostrip.fnkit-block {
	padding-block: var( --wp--preset--spacing--30, 0.9rem );
}

/* The form is a full-bleed band, but its fields stay narrow + centered. */
.fnkit-form { --fnkit-content: 640px; }

/* In the block editor, DON'T break out of the canvas. The 50vw breakout is a
 * front-end trick; inside the editor 50vw is the whole window (incl. sidebar),
 * which pushes content off-center and leaves the selection outline around the
 * block's real (content-width) node. Neutralizing it here keeps the selection
 * aligned with the block; the front end still renders full-bleed. */
.editor-styles-wrapper .fnkit-block,
.editor-styles-wrapper .fnkit-events,
.editor-styles-wrapper .fnkit-products,
.editor-styles-wrapper .fnkit-countdown,
.editor-styles-wrapper .fnkit-divisions,
.editor-styles-wrapper .fnkit-signup,
.editor-styles-wrapper .fnkit-cb,
.editor-styles-wrapper .fnkit-form {
	margin-left: 0;
	margin-right: 0;
	padding-inline: var( --wp--preset--spacing--40, 1.25rem );
}


/* Background slideshow — shared by hero (cover) + page-header. One layer per
 * image, cross-faded by slideshow.js toggling .is-active. Sits behind the
 * overlay + content (both given a higher z-index in their own stylesheets). */
.fnkit-slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fnkit-slide {
	position: absolute; inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0;
	transition: opacity 1.2s ease;
	transform: scale(1.03);
}
.fnkit-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fnkit-slide { transition: none; } }

/* ============================================================
 * Universal section background (Style → Background: image / slideshow / video).
 * Injected by fnkit_inject_background() as the first child of any section that
 * has one. Sits behind the section's content; legibility comes from the block's
 * own Color mode (set Dark for light-on-dark). Overlay darkens for contrast.
 * ============================================================ */
/* The section becomes the positioning + stacking context; the background layer
 * sits at z-index:-1 so ALL of the section's normal content paints above it
 * without us having to touch (and accidentally clobber, e.g. an absolutely
 * positioned watermark) each child's positioning. isolation:isolate keeps the
 * negative layer inside this section, above its own background-color. */
.fnkit-has-bg { position: relative; isolation: isolate; }
.fnkit-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.fnkit-bg .fnkit-slideshow { position: absolute; inset: 0; }
.fnkit-bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fnkit-bg__overlay { position: absolute; inset: 0; }

/* Texture overlay (Style → Background → Texture). The SVG is used as an alpha
 * MASK and painted in --fnkit-texture-tint, so it recolours to brand and blends
 * over whatever sits behind it (section colour, image, slideshow). Opacity +
 * mix-blend-mode come inline from the block's settings. Tiles by default; the
 * --cover modifier stretches a single non-repeating image to fill. */
.fnkit-bg__texture {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-color: var(--fnkit-texture-tint, currentColor);
	-webkit-mask-image: var(--fnkit-texture-src);
	mask-image: var(--fnkit-texture-src);
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	-webkit-mask-size: 320px auto;
	mask-size: 320px auto;
	-webkit-mask-position: center;
	mask-position: center;
}
.fnkit-bg__texture--cover {
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: cover;
	mask-size: cover;
}
.fnkit-bg__overlay--subtle {
	background: linear-gradient(180deg, rgba(8,10,14,0.2) 0%, rgba(8,10,14,0.08) 45%, rgba(8,10,14,0.5) 100%);
}
.fnkit-bg__overlay--medium {
	background:
		linear-gradient(180deg, rgba(6,8,12,0.42) 0%, rgba(6,8,12,0.2) 45%, rgba(6,8,12,0.72) 100%),
		linear-gradient(90deg, rgba(6,8,12,0.5) 0%, rgba(6,8,12,0.12) 60%, transparent 100%);
}
.fnkit-bg__overlay--dramatic {
	background:
		linear-gradient(180deg, rgba(4,6,10,0.55) 0%, rgba(4,6,10,0.18) 32%, rgba(4,6,10,0.92) 100%),
		linear-gradient(90deg, rgba(4,6,10,0.86) 0%, rgba(4,6,10,0.38) 54%, rgba(4,6,10,0.05) 100%),
		radial-gradient(130% 115% at 50% 128%, color-mix(in srgb, var(--wp--preset--color--accent, #c8102e) 32%, transparent), transparent 58%);
	box-shadow: inset 0 0 220px 44px rgba(0,0,0,0.6);
}

/* Rich-text (WYSIWYG) body fields render as HTML wrapped in <p>. Normalize the
 * paragraph margins so a single paragraph sits flush and multiple paragraphs get
 * even rhythm — matching the old single-line look while allowing bold/links/lists. */
:is(.fnkit-ci__desc, .fnkit-cta__text, .fnkit-callout__text, .fnkit-twopath__text, .fnkit-faq__a, .fnkit-hero__subtitle, .fnkit-pageheader__subtitle, .fnkit-fg__intro) > :first-child { margin-top: 0; }
:is(.fnkit-ci__desc, .fnkit-cta__text, .fnkit-callout__text, .fnkit-twopath__text, .fnkit-faq__a, .fnkit-hero__subtitle, .fnkit-pageheader__subtitle, .fnkit-fg__intro) > :last-child { margin-bottom: 0; }

/* Per-viewport visibility (Style → Advanced): hide a section at the matching
 * breakpoint. Desktop ≥1025px, tablet 768–1024px, mobile ≤767px. */
@media (min-width: 1025px) { .fnkit-hide-d { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .fnkit-hide-t { display: none !important; } }
@media (max-width: 767px) { .fnkit-hide-m { display: none !important; } }
/* In the block editor, keep hidden sections visible so they stay editable
 * (overrides the breakpoint rules regardless of canvas width). */
.editor-styles-wrapper .fnkit-hide-d,
.editor-styles-wrapper .fnkit-hide-t,
.editor-styles-wrapper .fnkit-hide-m { display: revert !important; }

/* -------------------------------------------------------------------------
 * Ground-aware role tokens. Colours swap by the section's GROUND, not per block:
 *   LIGHT ground  → heading + CTA use the scheme's SECONDARY (e.g. flagship navy)
 *   DARK ground   → heading = white, CTA = the scheme's MAIN (e.g. red)
 * and small accent TEXT uses accent-on-dark on dark grounds so it stays legible.
 *
 * Defaults follow the active SCHEME (a dark scheme like "night" is dark by
 * default even with no mode class); an explicit Light/Dark block mode always
 * forces its own ground. Buttons/headings read these tokens, so the light/dark
 * logic lives in ONE place and renders the same in the editor and on the page.
 * ---------------------------------------------------------------------- */
:root,
body:not(.fns-scheme-dark) {
	--fnkit-heading: var(--wp--preset--color--accent-2-ink, #1d4486);
	--fnkit-cta-bg: var(--wp--preset--color--accent-2, #1d4486);
	--fnkit-cta-label: var(--wp--preset--color--accent-2-contrast, #ffffff);
	--fnkit-accent-text: var(--wp--preset--color--accent, #c8102e);
}
/* A DARK SCHEME (e.g. "night") is dark by default with NO mode class, and there
 * the readable ink is --text (white), the ground is --bg. (This is the opposite
 * of a .fnkit-mode-dark section on a LIGHT scheme, whose ground is --text and
 * ink is --bg — see the mode-dark block below.) */
body.fns-scheme-dark {
	--fnkit-heading: var(--wp--preset--color--text, #ffffff);
	--fnkit-cta-bg: var(--wp--preset--color--accent, #c8102e);
	--fnkit-cta-label: var(--wp--preset--color--accent-contrast, #ffffff);
	--fnkit-accent-text: var(--wp--preset--color--accent-on-dark, var(--wp--preset--color--accent, #c8102e));
}
.fnkit-mode-light {
	--fnkit-heading: var(--wp--preset--color--accent-2-ink, #1d4486);
	--fnkit-cta-bg: var(--wp--preset--color--accent-2, #1d4486);
	--fnkit-cta-label: var(--wp--preset--color--accent-2-contrast, #ffffff);
	--fnkit-accent-text: var(--wp--preset--color--accent, #c8102e);
}
.fnkit-mode-dark {
	--fnkit-heading: var(--wp--preset--color--bg, #ffffff);
	--fnkit-cta-bg: var(--wp--preset--color--accent, #c8102e);
	--fnkit-cta-label: var(--wp--preset--color--accent-contrast, #ffffff);
	--fnkit-accent-text: var(--wp--preset--color--accent-on-dark, var(--wp--preset--color--accent, #c8102e));
}

/* Light mode. */
.fnkit-mode-light {
	background: var(--wp--preset--color--surface, #f3f3f4);
	color: var(--wp--preset--color--text, #14181f);
}

/* Dark mode: dark background, light text; secondary text lightened. */
.fnkit-mode-dark {
	background: var(--wp--preset--color--text, #14181f);
	color: var(--wp--preset--color--bg, #ffffff);
}
/* Section headings/figures take the ground-aware heading colour (navy on light,
 * white on dark) — one rule over every block's heading class. */
:is(.fnkit-avstat__value, .fnkit-cb__heading, .fnkit-chapters__heading, .fnkit-ci__title,
	.fnkit-cmp__heading, .fnkit-contact__heading, .fnkit-countdown__heading, .fnkit-cta__title,
	.fnkit-divisions__heading, .fnkit-event__title, .fnkit-events__heading, .fnkit-faq__heading,
	.fnkit-fg__heading, .fnkit-fg__title, .fnkit-form__heading, .fnkit-fx__heading,
	.fnkit-gallery__heading, .fnkit-hero__title, .fnkit-logostrip__heading, .fnkit-map__heading,
	.fnkit-pageheader__title, .fnkit-pick__title, .fnkit-pricing__heading, .fnkit-product__title,
	.fnkit-products__heading, .fnkit-prog__heading, .fnkit-prog__value, .fnkit-resources__heading,
	.fnkit-roster__heading, .fnkit-schedule__heading, .fnkit-signup__heading, .fnkit-social__heading,
	.fnkit-splitcta__title, .fnkit-stand__heading, .fnkit-stat__value, .fnkit-stats__heading,
	.fnkit-steps__heading, .fnkit-tabs__heading, .fnkit-tl__heading, .fnkit-tl__title,
	.fnkit-trust__title, .fnkit-twopath__heading, .fnkit-twopath__title, .fnkit-video__heading,
	.fnkit-vspot__title, .fnkit-zz__heading, .fnkit-zz__title) {
	color: var(--fnkit-heading, inherit);
}
/* Generic headings inside a dark section (no __heading class) still go light. */
.fnkit-mode-dark :is(h1, h2, h3, h4) {
	color: var(--fnkit-heading, var(--wp--preset--color--bg, #ffffff));
}
/* Muted secondary text = the section's own ink at reduced opacity, so it adapts
 * to whatever ground mode-dark resolves to (translucent white on a light scheme,
 * translucent dark when mode-dark lands on a dark scheme) instead of assuming
 * white-on-dark. */
.fnkit-mode-dark :is(.fnkit-hero__subtitle, .fnkit-ci__desc, .fnkit-cta__text,
	.fnkit-stat__label, .fnkit-steps__text, .fnkit-ci__benefit) {
	color: color-mix(in srgb, currentColor 72%, transparent);
}
/* The tagline stays accent — reads fine on light or dark. */

/* Buttons: bold, uppercase, sharp — sports-club CTA. Honors the per-block CTA
 * color override (falls back to accent). */
[class*="fnkit-"] .wp-element-button,
.fnkit-events .fnkit-events__more,
.fnkit-products .fnkit-products__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background-color: var(--fnkit-cta, var(--fnkit-cta-bg, var(--wp--preset--color--accent, #c8102e)));
	border: 2px solid var(--fnkit-cta, var(--fnkit-cta-bg, var(--wp--preset--color--accent, #c8102e)));
	color: var(--fnkit-cta-label, var(--wp--preset--color--accent-contrast, #ffffff));
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 2px;
	padding: 0.85em 1.7em;
	line-height: 1.1;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
}
[class*="fnkit-"] .wp-element-button:hover,
.fnkit-events .fnkit-events__more:hover,
.fnkit-events .fnkit-events__more:focus,
.fnkit-products .fnkit-products__more:hover,
.fnkit-products .fnkit-products__more:focus {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: 0 12px 26px -12px var(--fnkit-cta, var(--fnkit-cta-bg, var(--wp--preset--color--accent, #c8102e)));
	color: var(--fnkit-cta-label, var(--wp--preset--color--accent-contrast, #ffffff));
}
/* Secondary (outline) button stays legible on either mode. */
[class*="fnkit-"] .wp-element-button.is-style-outline {
	background: transparent;
	border: 2px solid currentColor;
	color: currentColor;
	box-shadow: none;
}
[class*="fnkit-"] .wp-element-button.is-style-outline:hover {
	background: color-mix(in srgb, currentColor 14%, transparent);
	filter: none;
	box-shadow: none;
}
.fnkit-mode-dark .wp-element-button.is-style-outline {
	color: #ffffff;
	border-color: #ffffff;
}

/* -------------------------------------------------------------------------
 * Adaptive card surface
 * A "panel" fill that stays visible on ANY section background — default, a
 * custom colour, an image, or dark mode — because it's a wash of the section's
 * own text colour (which contrasts the background by definition) rather than a
 * fixed grey that can happen to match the section. Card-based blocks use these
 * instead of --wp--preset--color--surface. currentColor resolves on the card,
 * so ~6% of near-black text over a light section ≈ the old #f3f3f4 grey, while
 * a dark or coloured section gets a matching relative wash.
 *
 * (The former "auto section rhythm" every-other-section tint was removed: it
 * only applied on the front end — that DOM doesn't exist in the editor — so the
 * editor never matched live. Sections are now transparent unless you set a
 * background, which is predictable and identical in editor and on the page.)
 * ---------------------------------------------------------------------- */
:root {
	--fnkit-card: color-mix( in srgb, currentColor 6%, transparent );
	--fnkit-card-border: color-mix( in srgb, currentColor 14%, transparent );
}

/* Uploaded block icons (SVG/PNG/JPG) — fit inside the icon container, same
 * footprint as an emoji. Emoji stays inline text. */
.fnkit-icon-img { width: 1.6em; height: 1.6em; object-fit: contain; display: inline-block; vertical-align: middle; }
.fnkit-icon-emoji { line-height: 1; }

/* Image orientation: crop any upload to the chosen shape via aspect-ratio +
 * object-fit. Applied to the <img> (or a bg wrapper). 'auto' = no class = native. */
.fnkit-ratio-square,
.fnkit-ratio-landscape,
.fnkit-ratio-portrait { width: 100%; height: auto; object-fit: cover !important; display: block; }
.fnkit-ratio-square { aspect-ratio: 1 / 1 !important; }
.fnkit-ratio-landscape { aspect-ratio: 16 / 9 !important; }
.fnkit-ratio-portrait { aspect-ratio: 3 / 4 !important; }

/* -------------------------------------------------------------------------
 * Text alignment (Style → Text alignment). Aligns a section's heading and its
 * intro text (eyebrow/tagline, subtitle, description, lead) for every block,
 * and re-justifies the buttons row to match. Applies via the fnkit-align-*
 * class fnkit_appearance() adds to the block's outer element.
 * ---------------------------------------------------------------------- */
.fnkit-align-left  [class*="__title"],
.fnkit-align-left  [class*="__heading"],
.fnkit-align-left  [class*="__tagline"],
.fnkit-align-left  [class*="__eyebrow"],
.fnkit-align-left  [class*="__subtitle"],
.fnkit-align-left  [class*="__desc"],
.fnkit-align-left  [class*="__intro"],
.fnkit-align-left  [class*="__lead"]   { text-align: left; }
.fnkit-align-center [class*="__title"],
.fnkit-align-center [class*="__heading"],
.fnkit-align-center [class*="__tagline"],
.fnkit-align-center [class*="__eyebrow"],
.fnkit-align-center [class*="__subtitle"],
.fnkit-align-center [class*="__desc"],
.fnkit-align-center [class*="__intro"],
.fnkit-align-center [class*="__lead"]  { text-align: center; }
.fnkit-align-right [class*="__title"],
.fnkit-align-right [class*="__heading"],
.fnkit-align-right [class*="__tagline"],
.fnkit-align-right [class*="__eyebrow"],
.fnkit-align-right [class*="__subtitle"],
.fnkit-align-right [class*="__desc"],
.fnkit-align-right [class*="__intro"],
.fnkit-align-right [class*="__lead"]   { text-align: right; }

/* Center/right also need the subtitle's own max-width to stop hugging the left,
 * and the buttons row to follow the alignment. */
.fnkit-align-center [class*="__subtitle"],
.fnkit-align-center [class*="__desc"]  { margin-left: auto; margin-right: auto; }
.fnkit-align-right  [class*="__subtitle"],
.fnkit-align-right  [class*="__desc"]  { margin-left: auto; }
.fnkit-align-center [class*="__buttons"],
.fnkit-align-center .fnkit-buttons     { justify-content: center; }
.fnkit-align-right  [class*="__buttons"],
.fnkit-align-right  .fnkit-buttons     { justify-content: flex-end; }

/* The section text-alignment control aligns the section HEADING (and block intro)
 * only — it must NOT drag the repeating feed cards with it. The generic
 * [class*="__title"] rules above otherwise catch .fnkit-event__title /
 * .fnkit-product__title inside the grid, so re-assert the cards' own left
 * alignment here at higher specificity (grid descendant = 3 classes). */
.fnkit-events .fnkit-events__grid [class*="__"],
.fnkit-products .fnkit-products__grid [class*="__"] { text-align: left; }

/* -------------------------------------------------------------------------
 * Heading rhythm — a little more breathing room below every section heading /
 * title before its subtitle or body. The `.fnkit-block` prefix (2 classes)
 * outranks each block's own single-class `margin: 0 0 …` shorthand, so this
 * sets only the bottom margin and leaves the rest intact. Covers every heading
 * element (h1–h6) plus the __title/__heading classes, so ALL headings match.
 * Tune with the --fnkit-heading-gap token above.
 * ---------------------------------------------------------------------- */
:is(.fnkit-block, .fnkit-events, .fnkit-products, .fnkit-countdown,
	.fnkit-divisions, .fnkit-signup, .fnkit-cb, .fnkit-form,
	.fnkit-logostrip, .fnkit-marquee)
	:is(h1, h2, h3, h4, h5, h6, [class*="__title"], [class*="__heading"]) {
	margin-bottom: var(--fnkit-heading-gap);
}

/* One-pager anchor navigation: offset anchored sections from a (possibly sticky) header. */
html { scroll-behavior: smooth; }
[id="top"], [id="about"], [id="program"], [id="events"], [id="apply"],
.fnkit-block[id], .fnkit-events[id], .fnkit-products[id], .fnkit-form[id] { scroll-margin-top: 100px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ----------------------------------------------------------------------
 * Global keyboard focus indicator — WCAG 2.4.7. One branded, consistent
 * :focus-visible ring for every interactive element the kit ships, so
 * keyboard users always get a visible focus (the core `wp-element-button`
 * only swaps its background on :focus via theme.json, which is invisible
 * on the accent fill). Uses :focus-visible so mouse clicks stay clean.
 * ---------------------------------------------------------------------- */
:is(a, button, [role="switch"], summary, .wp-element-button, .fnkit-tabs__tab, [class*="fnkit-"][tabindex]):focus-visible {
	outline: 2px solid var(--fnkit-accent-text, var(--wp--preset--color--accent, #c8102e));
	outline-offset: 2px;
	border-radius: 2px;
}

/* Neutralize hover/UI transitions and animations for reduced-motion users.
 * Entrance/reveal motion is already gated in motion.css; this catches the
 * per-block hover transitions (transform/border) that motion.css does not. */
@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;
	}
}