/*
 * Kisasa FC frontend styles.
 *
 * Most visual tokens live in theme.json (palette, font sizes, spacing).
 * This file owns what theme.json cannot express:
 *   1. Motion tokens (ease + duration custom properties)
 *   2. Typography micro-tuning (OpenType, text-wrap, tabular nums)
 *   3. Reveal system ([data-reveal], [data-enter])
 *   4. Image fade-in on load
 *   5. Header scroll state
 *   6. Pullquote treatment (no side-stripe)
 *   7. Skip-to-content link
 *   8. Reduced-motion fallback
 *
 * Never put colour or font-size values here. Those belong in theme.json.
 */

/* ----------------------------------------------------------------------
 * 1. Motion + type tokens
 * ---------------------------------------------------------------------- */

:root {
	/* Durations (100 / 300 / 500 rule) */
	--dur-instant: 100ms;     /* button press, toggle */
	--dur-fast: 240ms;        /* hover, focus, state change */
	--dur-medium: 400ms;      /* layout change, image fade */
	--dur-slow: 640ms;        /* scroll reveal entrance */
	--dur-deliberate: 900ms;  /* hero page-load choreography */

	/* Easing. Exponential curves only. No bounce, no elastic, no back. */
	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
	--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

	/* Stagger cadence */
	--stagger-step: 90ms;
}

/* ----------------------------------------------------------------------
 * 2. Document base
 * ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
	text-rendering: optimizeLegibility;
}

/* Inverted selection as an editorial flourish. */
::selection {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ----------------------------------------------------------------------
 * 3. Typography refinements
 * ---------------------------------------------------------------------- */

h1, h2, h3 {
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

/* Cap reading measure for prose. 68ch at the body size keeps line length in the 65 to 75ch range. */
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > blockquote {
	max-width: 68ch;
}

/* Tabular numerals for anything time or score related. Opt-in utility. */
time,
.tabular,
[data-tabular] {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1, "kern" 1;
}

/* Editorial link style inside article body. */
.wp-block-post-content a,
.entry-content a {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness var(--dur-fast) var(--ease-out-quart);
}

.wp-block-post-content a:hover,
.entry-content a:hover {
	text-decoration-thickness: 2px;
}

/* ----------------------------------------------------------------------
 * 4. Focus + a11y
 * ---------------------------------------------------------------------- */

:where(a, button, input, textarea, select):focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Skip-to-content link (visible on focus only). */
.skip-link {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 4px;
	transform: translateY(-150%);
	transition: transform var(--dur-fast) var(--ease-out-quart);
	z-index: 100;
}

.skip-link:focus {
	transform: translateY(0);
}

/* Scroll-margin so in-page anchor targets are not jammed against the header. */
:where(h1, h2, h3, h4) {
	scroll-margin-top: 5rem;
}

/* ----------------------------------------------------------------------
 * 5. Image fade-in on load (motion.js adds .is-loaded)
 * ---------------------------------------------------------------------- */

img:not(.no-fade) {
	opacity: 0;
	transition: opacity var(--dur-medium) var(--ease-out-quart);
}

img.is-loaded,
img:not(.no-fade).is-loaded {
	opacity: 1;
}

/* ----------------------------------------------------------------------
 * 6. Reveal system
 *    Elements with [data-reveal] start faded + shifted, and animate in
 *    when motion.js sees them intersect the viewport.
 * ---------------------------------------------------------------------- */

[data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity var(--dur-slow) var(--ease-out-quart),
		transform var(--dur-slow) var(--ease-out-quart);
	will-change: transform, opacity;
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* When a parent has data-reveal-stagger, motion.js staggers direct children. */
[data-reveal-stagger] > * {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--dur-slow) var(--ease-out-quart),
		transform var(--dur-slow) var(--ease-out-quart);
}

[data-reveal-stagger] > *.is-visible {
	opacity: 1;
	transform: none;
}

/* Page-load choreography. Elements with [data-enter] begin faded + shifted,
   and motion.js adds .is-entered with staggered transition-delay on first paint. */

[data-enter] {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--dur-deliberate) var(--ease-out-quart),
		transform var(--dur-deliberate) var(--ease-out-quart);
}

[data-enter].is-entered {
	opacity: 1;
	transform: none;
}

/* ----------------------------------------------------------------------
 * 7. Header scroll state
 * ---------------------------------------------------------------------- */

header.wp-block-group {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(0);
	transition:
		backdrop-filter var(--dur-fast) var(--ease-out-quart),
		background-color var(--dur-fast) var(--ease-out-quart),
		border-bottom-color var(--dur-fast) var(--ease-out-quart);
	border-bottom: 1px solid transparent;
}

header.wp-block-group.is-scrolled {
	background-color: color-mix(in oklch, var(--wp--preset--color--base) 82%, transparent);
	backdrop-filter: blur(8px);
	border-bottom-color: var(--wp--preset--color--border);
}

/* Site title tracking kept steady regardless of scroll state. */
.wp-block-site-title a {
	text-decoration: none;
	letter-spacing: 0.12em;
}

/* Site logo: never underline the wrapping link, gentle dim on hover. */
.wp-block-site-logo a,
.wp-block-site-logo a:hover {
	text-decoration: none;
}

.wp-block-site-logo img {
	transition: opacity var(--dur-fast) var(--ease-out-quart);
}

.wp-block-site-logo a:hover img {
	opacity: 0.85;
}

/* ----------------------------------------------------------------------
 * 8. Buttons
 * ---------------------------------------------------------------------- */

.wp-block-button__link {
	text-decoration: none;
	transition:
		transform var(--dur-fast) var(--ease-out-quart),
		box-shadow var(--dur-fast) var(--ease-out-quart);
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px color-mix(in oklch, var(--wp--preset--color--base) 70%, transparent);
}

.wp-block-button__link:active {
	transform: translateY(0);
	transition-duration: var(--dur-instant);
}

/* ----------------------------------------------------------------------
 * 9. Post card (query-loop grid)
 *    Hover brightens the image; title dims on link hover. No lift, no shadow.
 * ---------------------------------------------------------------------- */

.wp-block-post-template.is-layout-grid .wp-block-post {
	transition: none;
}

.wp-block-post-featured-image img {
	transition: filter var(--dur-medium) var(--ease-out-quart);
}

.wp-block-post-template.is-layout-grid .wp-block-post:hover .wp-block-post-featured-image img {
	filter: brightness(1.06);
}

.wp-block-post-title a {
	text-decoration: none;
	transition: opacity var(--dur-fast) var(--ease-out-quart);
}

.wp-block-post-title a:hover {
	opacity: 0.7;
}

/* ----------------------------------------------------------------------
 * 10. Pullquote — editorial treatment
 *
 *   ┌──── ─── ──── ─── ──── ─── ──── ─── ──── ─── ──── ─── ──── ─── ────┐
 *                                  "
 *
 *                  Italic display quote text in cream
 *                  centered, given vertical space
 *
 *                            — short gold rule —
 *   └──── ─── ──── ─── ──── ─── ──── ─── ──── ─── ──── ─── ──── ─── ────┘
 *
 * Decorative big-quote glyph in accent gold sits above the text, then a
 * short gold rule beneath punctuates the moment without competing.
 * No left stripe, no background fill, no aggressive container.
 * ---------------------------------------------------------------------- */

.wp-block-pullquote {
	border: 0 !important;
	padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--50) 0 !important;
	margin: var(--wp--preset--spacing--70) 0 var(--wp--preset--spacing--70) 0 !important;
	background: none !important;
	position: relative;
	text-align: center;
}

.wp-block-pullquote::before {
	content: "\201C";
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(4rem, 8vw, 6rem);
	line-height: 0.6;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	opacity: 0.55;
	margin-bottom: var(--wp--preset--spacing--20);
	pointer-events: none;
	user-select: none;
}

.wp-block-pullquote blockquote {
	border: 0;
	padding: 0;
	margin: 0 auto;
	max-width: 56ch;
	position: relative;
}

.wp-block-pullquote blockquote::before {
	content: none;
}

.wp-block-pullquote blockquote > p {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--contrast);
	margin: 0;
	text-wrap: balance;
}

/* Short gold rule below the quote text. */
.wp-block-pullquote blockquote::after {
	content: '';
	display: block;
	width: 56px;
	height: 2px;
	background-color: var(--wp--preset--color--accent);
	margin: var(--wp--preset--spacing--40) auto 0;
	opacity: 0.85;
}

.wp-block-pullquote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
}

/* ----------------------------------------------------------------------
 * 11. Figcaption
 * ---------------------------------------------------------------------- */

.wp-block-image figcaption,
.wp-element-caption {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--subtle);
	letter-spacing: 0.02em;
	margin-top: 0.75rem;
	line-height: 1.5;
	text-align: left;
}

/* ----------------------------------------------------------------------
 * 12. Separator + pagination
 * ---------------------------------------------------------------------- */

.wp-block-separator {
	opacity: 0.6;
}

.wp-block-query-pagination {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--40);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers.current {
	text-decoration: none;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	transition: opacity var(--dur-fast) var(--ease-out-quart);
}

.wp-block-query-pagination a:hover {
	opacity: 0.7;
}

/* ----------------------------------------------------------------------
 * 12.5 Sticky footer — page wraps to viewport, footer pinned to bottom
 *      on short pages. Uses flexbox on body so the main element grows
 *      to fill remaining height while footer stays anchored.
 * ---------------------------------------------------------------------- */

html, body {
	min-height: 100vh;
}

body {
	display: flex;
	flex-direction: column;
}

body > .wp-site-blocks {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 100vh;
}

body > .wp-site-blocks > main,
body main#main {
	flex: 1 0 auto;
}

body > .wp-site-blocks > footer,
body > .wp-site-blocks footer.wp-block-group {
	flex-shrink: 0;
	margin-top: auto;
}

/* ----------------------------------------------------------------------
 * 12.6 Color variation — soften the all-black palette without losing
 *      the editorial register. Warmer surface for bands, green/gold
 *      accents for life, gradient hints for depth.
 * ---------------------------------------------------------------------- */

/* Warmer near-black base (instead of pure #000) — adds subtle depth. */
body {
	background-color: #0a0807;
}

/* Hero gets a gold-tinted radial glow to break up the dark wall. */
.kit-hero {
	background:
		radial-gradient(ellipse at 75% 30%, rgba(183, 136, 62, 0.10) 0%, transparent 55%),
		radial-gradient(ellipse at 15% 80%, rgba(20, 111, 49, 0.07) 0%, transparent 50%);
}

/* Identity strip uses a warm surface with a hint of gold tint. */
.kit-identity {
	background:
		linear-gradient(180deg, rgba(183, 136, 62, 0.04) 0%, transparent 100%),
		var(--wp--preset--color--surface) !important;
}

/* Single-post separators get a green-to-gold tint instead of flat border. */
.wp-block-separator.has-border-color.has-border-background-color {
	border-image: linear-gradient(90deg, transparent 0%, var(--wp--preset--color--accent) 50%, transparent 100%) 1;
	border-color: transparent !important;
	background: transparent !important;
	height: 1px;
	opacity: 0.5;
}

/* (Pullquote styling moved up to section 10 — single source of truth.) */

/* Body anchor links inside paragraphs only — gold underline.
   Scoped to <p> so heading/list link decorations stay clean. */
.wp-block-post-content p > a:not(.wp-block-button__link),
.wp-block-page-content p > a:not(.wp-block-button__link),
main p > a:not(.wp-block-button__link):not([class*="wp-block"]) {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--dur-fast) var(--ease-out-quart);
}

main p > a:not(.wp-block-button__link):not([class*="wp-block"]):hover {
	color: var(--wp--preset--color--accent);
}

/* Footer: subtle gold gradient at the top to mark the page boundary. */
footer.wp-block-group {
	background:
		linear-gradient(180deg, rgba(183, 136, 62, 0.06) 0%, transparent 80px),
		var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--border);
}

/* Footer headings already gold (.kit-eyebrow style). Reach Us email
   gets a warm hover treatment. */
footer.wp-block-group a {
	transition: color var(--dur-fast) var(--ease-out-quart);
}
footer.wp-block-group a:hover {
	color: var(--wp--preset--color--accent) !important;
}

/* Stories category posts: tag pill goes green to differentiate from News. */
.wp-block-post-terms a[href*="/stories"] {
	color: var(--wp--preset--color--highlight) !important;
}

/* Win/Draw/Loss live indicators on fixtures already use brand colors via
   .is-won/.is-drew/.is-lost classes. Reinforce: results get a thicker
   colored left rule for legibility. */
.kit-fixture.is-won { border-left: 2px solid var(--wp--preset--color--highlight); padding-left: 1rem; }
.kit-fixture.is-drew { border-left: 2px solid var(--wp--preset--color--accent); padding-left: 1rem; }
.kit-fixture.is-lost,
.kit-fixture.is-lost-pens { border-left: 2px solid var(--wp--preset--color--alert); padding-left: 1rem; }

/* ----------------------------------------------------------------------
 * 13. Navigation
 *
 * Top-level menu (.kit-nav): Montserrat display font at SM size, mixed-case
 * (no uppercase shouty caps), tight letter-spacing for an editorial feel.
 * Hover lifts the item slightly with a gold underline rather than fading.
 * ---------------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item a {
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out-quart),
				opacity var(--dur-fast) var(--ease-out-quart);
}

.kit-nav .wp-block-navigation-item a {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast);
	position: relative;
	padding-bottom: 2px;
}

.kit-nav .wp-block-navigation-item a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--dur-fast) var(--ease-out-quart);
}

.kit-nav .wp-block-navigation-item a:hover,
.kit-nav .wp-block-navigation-item.current-menu-item a {
	color: var(--wp--preset--color--accent);
	opacity: 1;
}

.kit-nav .wp-block-navigation-item a:hover::after,
.kit-nav .wp-block-navigation-item.current-menu-item a::after {
	transform: scaleX(1);
}

/* Fallback hover for any other navigation menus on the site. */
.wp-block-navigation:not(.kit-nav) .wp-block-navigation-item a:hover {
	opacity: 0.7;
}

/* ----------------------------------------------------------------------
 * Sticky header — release when footer enters view.
 *
 * motion.js sets `body.is-footer-in-view` while the footer is intersecting
 * the viewport. We drop the wrapper out of position:sticky so it scrolls
 * naturally with the page and does not float above the footer. The blur +
 * border-bottom that go with the scrolled state are also reverted so the
 * end-of-page transition is clean.
 * ---------------------------------------------------------------------- */

body.is-footer-in-view header.wp-block-template-part {
	position: relative;
	background-color: var(--wp--preset--color--base);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom: 0;
}

/* Mobile overlay menu: ensure full-screen takeover with readable links.
   WordPress's default open state covers the viewport, but the dark-on-dark
   palette here can leave items invisible without explicit treatment. */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	z-index: 99999 !important;
	width: 100vw !important;
	height: 100vh !important;
	background-color: var(--wp--preset--color--base) !important;
	padding: 6rem var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) !important;
	overflow-y: auto !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	padding: 0.4rem 0;
	display: block;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item a {
	color: var(--wp--preset--color--accent) !important;
	opacity: 1;
}

/* Open + close toggles: gold-tinted, comfortable tap targets. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast) !important;
	padding: 0.5rem;
}

.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--accent) !important;
}

/* ----------------------------------------------------------------------
 * 14. Kitenge motifs
 *     Geometric pattern hints abstracted from the logo's beadwork band.
 *     Subtle, never literal. Use sparingly to add cultural texture.
 *
 *     - .kit-bg-pattern : applies the tile as a low-opacity mask overlay
 *                        on a section's background.
 *     - .kit-motif      : a horizontal motif strip used as a section
 *                        divider between blocks.
 * ---------------------------------------------------------------------- */

.kit-bg-pattern {
	position: relative;
	isolation: isolate;
}

.kit-bg-pattern::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask-image: url('../images/kitenge-tile.svg');
	mask-image: url('../images/kitenge-tile.svg');
	-webkit-mask-size: 200px 200px;
	mask-size: 200px 200px;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	opacity: 0.08;
	pointer-events: none;
	z-index: -1;
}

.kit-bg-pattern::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Soft warm tint at the upper-right focal point + a strong base-colour
	   vignette so the pattern fades to plain background near the reading
	   column. Keeps a hint of warmth without competing with text. */
	background:
		radial-gradient(
			ellipse 50% 60% at 80% 25%,
			color-mix(in oklch, var(--wp--preset--color--accent) 10%, transparent) 0%,
			transparent 70%
		),
		radial-gradient(
			ellipse 70% 80% at 30% 50%,
			transparent 0%,
			var(--wp--preset--color--base) 90%
		);
	pointer-events: none;
	z-index: -1;
}

/* Editorial variant: long-form article pages keep the pattern at the
   page edges only, with a strong central vignette behind the reading
   column so paragraphs always sit on a clean background. */
.kit-bg-pattern--editorial::before {
	opacity: 0.05;
}

.kit-bg-pattern--editorial::after {
	background:
		radial-gradient(
			ellipse 35% 100% at 50% 50%,
			var(--wp--preset--color--base) 0%,
			var(--wp--preset--color--base) 50%,
			transparent 100%
		);
}

/* Global atmospheric tint: a faint gold radial behind the body's top
   region, so even pages without .kit-bg-pattern carry a hint of warmth.
   Sits on a fixed pseudo so it stays put while content scrolls. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background:
		radial-gradient(
			ellipse 70% 40% at 85% 5%,
			color-mix(in oklch, var(--wp--preset--color--accent) 5%, transparent) 0%,
			transparent 60%
		);
	pointer-events: none;
	z-index: 0;
}

/* Make sure body content sits above the tint layer. */
body > * {
	position: relative;
	z-index: 1;
}

/* Hero-specific: tighter constraint to display H1 since the column carries it */
.kit-hero .kit-display {
	margin-block: 0;
}

.kit-hero .kit-display em {
	display: inline-block;
}

/* Scoreboard: editorial fixture card. Used in the home hero and as a
   building block for the fixtures page. Tabular figures, gold accent, hairline
   surface that lifts away from the kitenge background. */
.kit-scoreboard {
	background-color: color-mix(in oklch, var(--wp--preset--color--base) 75%, var(--wp--preset--color--surface) 25%);
	backdrop-filter: blur(2px);
	position: relative;
	isolation: isolate;
}

.kit-scoreboard::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask-image: url('../images/kitenge-tile.svg');
	mask-image: url('../images/kitenge-tile.svg');
	-webkit-mask-size: 100px 100px;
	mask-size: 100px 100px;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	opacity: 0.06;
	pointer-events: none;
	z-index: -1;
}

.kit-scoreboard__date,
.kit-scoreboard__date * {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Fixtures list. Editorial table without table markup — flexbox rows with
   hairline rules. Played fixtures earn an outcome accent; upcoming ones
   stay quiet. Mobile collapses to stacked groups. */
.kit-fixtures {
	display: flex;
	flex-direction: column;
}

/* WordPress's `is-layout-constrained` clamps direct children to contentSize.
   The fixtures pattern is a constrained group, but each row should span
   the full wideSize. Override the default rule. */
.kit-fixtures > .kit-fixture {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.kit-fixture {
	display: grid;
	grid-template-columns:
		minmax(72px, 10%)
		minmax(44px, 6%)
		minmax(0, 1fr)
		minmax(110px, 16%)
		minmax(110px, 14%);
	column-gap: clamp(0.5rem, 1.4vw, 1rem);
	align-items: center;
	padding: 0.85rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
	font-variant-numeric: tabular-nums;
}

.kit-fixture:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.kit-fixture__date {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.6rem;
	align-items: baseline;
	line-height: 1;
}

.kit-fixture__day {
	grid-row: 1 / 3;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--contrast);
}

.kit-fixture__month {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.kit-fixture__weekday {
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--subtle);
	margin-top: 0.2rem;
}

.kit-fixture__matchday {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
}

.kit-fixture__md-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
}

.kit-fixture__md-num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}

.kit-fixture__teams {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.kit-fixture__opponent {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.2;
}

.kit-fixture__opponent strong {
	font-weight: 700;
}

.kit-fixture__vs {
	font-style: normal;
	color: var(--wp--preset--color--subtle);
	font-weight: 400;
	margin: 0 0.25em;
}

.kit-fixture__note,
.kit-fixture__action-pending {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--subtle);
	letter-spacing: 0.04em;
}

.kit-fixture__bye {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--subtle);
	font-style: italic;
}

.kit-fixture__result {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	align-items: flex-end;
	text-align: right;
}

.kit-fixture__score {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.kit-fixture__dash {
	display: inline-block;
	margin: 0 0.4ch;
	color: var(--wp--preset--color--subtle);
	font-weight: 500;
}

.kit-fixture__pens {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--subtle);
	letter-spacing: 0.04em;
	font-style: italic;
}

.kit-fixture__pending {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--subtle);
}

.kit-fixture__action {
	text-align: right;
}

.kit-fixture__report-link {
	display: inline-block;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	transition: opacity var(--dur-fast) var(--ease-out-quart);
}

.kit-fixture__report-link:hover {
	opacity: 0.7;
}

.kit-fixture__venue-link {
	display: inline-block;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--subtle);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out-quart);
}

.kit-fixture__venue-link:hover {
	color: var(--wp--preset--color--accent);
}

/* Outcome treatments: a left-edge mark, never a side-stripe border on the row. */
.kit-fixture.is-won .kit-fixture__day,
.kit-fixture.is-won-pens .kit-fixture__day {
	color: var(--wp--preset--color--highlight);
}
.kit-fixture.is-lost .kit-fixture__day,
.kit-fixture.is-lost-pens .kit-fixture__day {
	color: var(--wp--preset--color--alert);
}
.kit-fixture.is-drew .kit-fixture__day {
	color: var(--wp--preset--color--accent);
}

.kit-fixture.is-bye {
	opacity: 0.65;
}

@media (max-width: 720px) {
	.kit-fixture {
		grid-template-columns: minmax(72px, auto) 1fr;
		grid-template-areas:
			"date matchday"
			"date teams"
			"date result"
			"date action";
		row-gap: 0.5rem;
		column-gap: 1rem;
	}
	.kit-fixture__date     { grid-area: date; }
	.kit-fixture__matchday { grid-area: matchday; border-left: 0; padding-left: 0; flex-direction: row; align-items: baseline; gap: 0.4rem; }
	.kit-fixture__teams    { grid-area: teams; }
	.kit-fixture__result   { grid-area: result; align-items: flex-start; text-align: left; }
	.kit-fixture__action   { grid-area: action; text-align: left; }
}

/* Contact form. Editorial input treatment — full-width hairline-bottom inputs,
   gold focus accent, server-side error messaging surfaced inline. */
.kit-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	max-width: 100%;
}

.kit-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 600px) {
	.kit-form-row { grid-template-columns: 1fr; }
}

.kit-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.kit-form-label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
}

.kit-contact-form input[type="text"],
.kit-contact-form input[type="email"],
.kit-contact-form select,
.kit-contact-form textarea {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	padding: 0.65rem 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
	transition:
		border-color var(--dur-fast) var(--ease-out-quart),
		color var(--dur-fast) var(--ease-out-quart);
	width: 100%;
}

.kit-contact-form select {
	-webkit-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--accent) 50%),
	                  linear-gradient(135deg, var(--wp--preset--color--accent) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2rem;
	cursor: pointer;
}

.kit-contact-form select option {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.kit-contact-form textarea {
	resize: vertical;
	min-height: 8rem;
}

.kit-contact-form input:focus,
.kit-contact-form select:focus,
.kit-contact-form textarea:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--accent);
	border-bottom-width: 2px;
	padding-bottom: calc(0.65rem - 1px);
}

.kit-form-error {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--alert);
	letter-spacing: 0.04em;
	min-height: 1em;
}
.kit-form-error:empty { display: none; }

.kit-form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kit-form-foot {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
	margin-top: var(--wp--preset--spacing--30);
}

.kit-form-submit {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 999px;
	padding: 1rem 1.75rem;
	cursor: pointer;
	transition:
		background-color var(--dur-fast) var(--ease-out-quart),
		color var(--dur-fast) var(--ease-out-quart),
		transform var(--dur-fast) var(--ease-out-quart);
}

.kit-form-submit:hover {
	background: var(--wp--preset--color--highlight);
	color: var(--wp--preset--color--contrast);
	transform: translateY(-1px);
}

.kit-form-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.kit-form-status {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.02em;
	margin: 0;
}

.kit-form-status[data-state="loading"] { color: var(--wp--preset--color--subtle); }
.kit-form-status[data-state="success"] { color: var(--wp--preset--color--highlight); font-weight: 600; }
.kit-form-status[data-state="error"]   { color: var(--wp--preset--color--alert);     font-weight: 600; }

.kit-form-meta {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--subtle);
	letter-spacing: 0.02em;
	line-height: 1.55;
	margin-top: var(--wp--preset--spacing--30);
}

/* League standings table. Editorial table treatment, Kisasa row highlighted. */
.kit-table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.kit-table thead th {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
	text-align: right;
	padding: 0.85rem 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.kit-table thead th:first-child,
.kit-table thead th.is-team {
	text-align: left;
	padding-left: 0;
}

.kit-table tbody td {
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.9rem 0.5rem;
	text-align: right;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
}

.kit-table tbody td:first-child {
	text-align: left;
	padding-left: 0;
	color: var(--wp--preset--color--subtle);
	font-weight: 600;
	width: 2.5rem;
}

.kit-table tbody td.is-team {
	text-align: left;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--md);
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--contrast);
}

.kit-table tbody td.is-pts {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--contrast);
}

.kit-table tr.is-kisasa td {
	background: color-mix(in oklch, var(--wp--preset--color--accent) 8%, transparent);
}

.kit-table tr.is-kisasa td.is-team {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

.kit-table tr.is-kisasa td.is-pos {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 600px) {
	.kit-table thead th.kit-hide-sm,
	.kit-table tbody td.kit-hide-sm { display: none; }
}

/* Outline button: pairs with the primary, less visual weight, gold border on hover. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	transition:
		background-color var(--dur-fast) var(--ease-out-quart),
		border-color var(--dur-fast) var(--ease-out-quart),
		transform var(--dur-fast) var(--ease-out-quart);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: transparent;
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	transform: translateY(-1px);
}

/* Horizontal motif divider. Replaces flat hairlines on key section breaks.
   Use as a child element in a group, or apply directly to a separator
   element wrapped in a group with .kit-motif-wrap. */
.kit-motif,
hr.kit-motif {
	display: block;
	width: 100%;
	height: 16px;
	border: 0;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask-image: url('../images/motif-strip.svg');
	mask-image: url('../images/motif-strip.svg');
	-webkit-mask-size: 80px 16px;
	mask-size: 80px 16px;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-position: center;
	mask-position: center;
	opacity: 0.55;
	margin: var(--wp--preset--spacing--40) 0;
}

/* Eyebrow geometric mark: a small gold diamond before the label text.
   Apply by wrapping the eyebrow paragraph in .kit-eyebrow class. */
.kit-eyebrow::before {
	content: '';
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	background-color: var(--wp--preset--color--accent);
	transform: rotate(45deg);
	margin-right: 0.7em;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

/* ----------------------------------------------------------------------
 * 15. Mobile responsiveness
 *     Tighten the spacing scale and key layouts on small viewports so
 *     content uses the screen instead of getting eaten by 2.5rem+ padding.
 *     The biggest lever: shrink the spacing presets on body so every
 *     style="padding:var(--wp--preset--spacing--50)" inline style scales
 *     down without hunting through templates.
 * ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	body {
		--wp--preset--spacing--40: 1rem;
		--wp--preset--spacing--50: 1.25rem;
		--wp--preset--spacing--60: 2rem;
		--wp--preset--spacing--70: 3rem;
		--wp--preset--spacing--80: 4rem;
	}

	/* Hero: drop the 82vh min-height, let content size naturally. */
	.kit-hero {
		min-height: auto !important;
	}

	/* Match Centre / scoreboard / fixtures should not get squished by
	   leftover 2.5rem padding when the viewport is < 400px. */
	.kit-scoreboard {
		padding: 1.25rem !important;
	}

	/* Identity strip 3-col stacks naturally; tighten the inter-row gap. */
	.kit-identity .wp-block-columns {
		row-gap: var(--wp--preset--spacing--40);
	}

	/* Page hero H1s use clamp() with min ~3.5rem — already mobile-friendly,
	   but tighten letter-spacing for very small widths so words don't break. */
	.kit-display,
	.wp-block-heading {
		letter-spacing: -0.02em;
	}

	/* Footer: stacked columns get a bit too much vertical air on mobile. */
	footer.wp-block-group .wp-block-columns {
		row-gap: var(--wp--preset--spacing--50);
	}
	footer.wp-block-group .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (max-width: 480px) {
	/* Very small viewports: cut padding even further on key bands. */
	body {
		--wp--preset--spacing--50: 1rem;
		--wp--preset--spacing--70: 2.25rem;
	}

	/* Hero text: drop the giant clamp on smallest screens to avoid
	   awkward 2-character lines. */
	.kit-display {
		font-size: clamp(2.5rem, 14vw, 4rem) !important;
		line-height: 1 !important;
	}
}

/* ----------------------------------------------------------------------
 * 16. Reduced motion
 *     Essential indicators (focus, loading) keep working without movement.
 *     Everything else collapses to near-instant transitions.
 * ---------------------------------------------------------------------- */

@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;
	}

	[data-reveal],
	[data-reveal-stagger] > *,
	[data-enter] {
		opacity: 1 !important;
		transform: none !important;
	}

	img:not(.no-fade) {
		opacity: 1 !important;
	}
}

/* ----------------------------------------------------------------------
 * Light mode override
 *
 * Activated by [data-theme="light"] on <html>. The runtime toggle button
 * (assets/js/theme-toggle.js) flips this attribute and persists the choice
 * in localStorage. A pre-paint inline script in <head> applies the saved
 * mode before first render to avoid a flash.
 *
 * Strategy: re-declare the WP preset CSS variables on body so they win
 * specificity over WP's own body declaration. Only colour tokens flip; all
 * spacing, type, and motion remain identical between modes.
 * ---------------------------------------------------------------------- */

html[data-theme="light"] body {
	--wp--preset--color--base:      #F2EDE7;
	--wp--preset--color--surface:   #FFFFFF;
	--wp--preset--color--border:    #D6CCBE;
	--wp--preset--color--contrast:  #15140F;
	--wp--preset--color--subtle:    #6B6256;
	--wp--preset--color--accent:    #9C722E;
	--wp--preset--color--highlight: #146F31;
	--wp--preset--color--alert:     #A30E16;
	/* WordPress global styles output body { background-color: <resolved hex> }
	   from theme.json at compile time, so the variable above isn't enough.
	   Re-declare the background and text color directly to override. */
	background-color: #F2EDE7;
	color: #15140F;
}

/* Block patterns hardcoded surface colors (e.g. .has-base-background-color)
   produced by the editor. Flip them to the light equivalents in light mode. */
html[data-theme="light"] body .has-base-background-color {
	background-color: #F2EDE7 !important;
}
html[data-theme="light"] body .has-surface-background-color {
	background-color: #FFFFFF !important;
}
html[data-theme="light"] body .has-contrast-color {
	color: #15140F !important;
}
html[data-theme="light"] body .has-subtle-color {
	color: #6B6256 !important;
}
html[data-theme="light"] body .has-accent-color {
	color: #9C722E !important;
}

/* Belt-and-braces: paint background-color on the document root in light
   mode so the area outside the body (over-scroll on iOS, etc.) matches. */
html[data-theme="light"] {
	background-color: #F2EDE7;
	color-scheme: light;
}

html:not([data-theme="light"]) {
	color-scheme: dark;
}

/* ----------------------------------------------------------------------
 * Theme toggle button
 *
 * Lives in the header next to navigation. Renders both icons; CSS shows
 * the one that represents the *current* mode (sun = light is active).
 * ---------------------------------------------------------------------- */

.kit-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out),
				color var(--dur-fast) var(--ease-out),
				background-color var(--dur-fast) var(--ease-out);
}

.kit-theme-toggle:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.kit-theme-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.kit-theme-toggle svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Default (dark mode): show the moon (clicking switches to light). */
.kit-theme-toggle .kit-theme-toggle__sun {
	display: none;
}
.kit-theme-toggle .kit-theme-toggle__moon {
	display: block;
}

/* Light mode active: show the sun (clicking switches back to dark). */
html[data-theme="light"] .kit-theme-toggle .kit-theme-toggle__sun {
	display: block;
}
html[data-theme="light"] .kit-theme-toggle .kit-theme-toggle__moon {
	display: none;
}

/* ----------------------------------------------------------------------
 * Sticky header
 *
 * The site header (parts/header.html) sticks to the top of the viewport
 * with a translucent backdrop blur once the page scrolls. The "scrolled"
 * state is added by motion.js (or by a tiny IntersectionObserver pinned
 * to the top of <body>); when absent, the header sits flush with no
 * backdrop. This keeps the hero pristine on initial load.
 *
 * The pre-existing tag selector for the header is `header.alignfull`
 * (output of the wp:group {tagName:"header"} block in parts/header.html).
 * ---------------------------------------------------------------------- */

/* WordPress wraps the header template part in its own <header
   class="wp-block-template-part"> wrapper. For sticky to work relative to
   the page, the WRAPPER must be the sticky element (the inner block is
   constrained by the wrapper's height otherwise). */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--wp--preset--color--base);
	transition: background-color var(--dur-fast) var(--ease-out),
				border-color var(--dur-fast) var(--ease-out),
				box-shadow var(--dur-fast) var(--ease-out),
				backdrop-filter var(--dur-fast) var(--ease-out);
}

/* Light-mode override for the sticky header bg (same compile-time-hex
   reason as the body rule above). */
html[data-theme="light"] header.wp-block-template-part {
	background-color: #F2EDE7;
}

/* Once scrolled past the threshold, motion.js adds .is-scrolled to the
   inner block. Mirror that to the wrapper for the translucent + blur effect. */
header.wp-block-template-part:has(> header.is-scrolled) {
	background-color: color-mix(in oklch, var(--wp--preset--color--base) 82%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* `.is-scrolled` is added to the <header> by motion.js (initHeaderScroll).
   The existing rule earlier in this file already styles the scrolled state
   visually (background color-mix + box-shadow). All we add here is the
   bottom border so the sticky header has a subtle separator from content. */
header.wp-block-group.is-scrolled {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Reduce-motion: skip transitions but keep stickiness. */
@media (prefers-reduced-motion: reduce) {
	header.wp-block-group.alignfull {
		transition: none;
	}
}