/* ==========================================================================
   KCOHL 2026 — brand layer
   --------------------------------------------------------------------------
   HOW COLOUR WORKS ON THIS SITE

   Every colour comes from the GeneratePress global colour palette
   (Customizer > Colours > Global Colours). The Awen01 Dark Light Transcendent
   plugin republishes that palette once per mode, so the same variable resolves
   to a different hex in Home (light) and Away (dark):

       --wp--preset--color--accent     GenerateBlocks blocks use this form
       --accent                        GeneratePress Customizer uses this form

   Both point at the same value. Nothing in this file hard-codes a brand hex,
   so changing a colour in the Customizer changes it everywhere, in both modes.

   The palette slugs, and the brand role each one carries:

       contrast       headings and primary text
       contrast-2     body copy
       contrast-3     muted text, captions, timestamps
       base           page background
       base-2         dividers, hairlines, subtle fills
       base-3         card and panel surface
       accent         KCOHL electric blue, the identity colour
       accent-2       links and eyebrows (lighter in Away, deeper in Home)
       accent-hover   pressed / hovered blue
       highlight      supporting navy tint
       line-300       stronger borders, disabled states
       ink            fixed near-black, never swaps (overlays, scrims)
       paper          fixed bone white, never swaps (text on blue)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Token bridge
   Brand-named shortcuts so the rest of this file reads in brand language
   rather than in GeneratePress slugs.
   -------------------------------------------------------------------------- */

:root {
	--kc-display: 'League Gothic', 'Arial Narrow', Impact, sans-serif;
	--kc-body: 'Work Sans', system-ui, -apple-system, sans-serif;

	--kc-ease: cubic-bezier(.22, 1, .36, 1);
	--kc-speed: .24s;

	--kc-radius-sm: 4px;
	--kc-radius-md: 8px;
	--kc-radius-lg: 14px;
	--kc-radius-pill: 999px;

	--kc-wide: 1180px;
	--kc-content: 1080px;
	--kc-narrow: 720px;

	--kc-shadow-sm: 0 1px 2px rgba(10, 14, 20, .35);
	--kc-shadow-md: 0 6px 20px rgba(10, 14, 20, .45);
	--kc-shadow-lg: 0 18px 48px rgba(10, 14, 20, .55);

	/* Jersey stripe. White / blue / white in Away, ink / blue / ink in Home.
	   The outer bands are --contrast, which is the text colour in both modes,
	   so the stripe inverts with the mode without needing a second rule. */
	--kc-stripe: linear-gradient(
		180deg,
		var(--contrast) 0 28%,
		var(--accent) 28% 72%,
		var(--contrast) 72% 100%
	);
	--kc-stripe-height: 25px;

	/* Scrim colour for gradients that are written on BLOCKS (hero scrim, photo
	   band overlay). Blocks cannot hold two mode-dependent values, so the block
	   stores the gradient and this token supplies the colour. Editable gradient,
	   mode-aware colour. */
	--kc-scrim-rgb: 7, 10, 16;

	/* Label colour for anything sitting on brand blue. Pure white clears
	   5.5:1 on --accent in both modes; --paper only managed 4.57:1. */
	--kc-on-accent: #ffffff;

	/* Ice plate texture. Overridden per mode below. */
	--kc-texture: url('../img/black-ice.webp');
	--kc-texture-scrim: linear-gradient(180deg, rgba(7, 10, 16, .72) 0%, rgba(7, 10, 16, .88) 100%);
}

/* Home mode swaps the ice plate from black ice to white ice. This is the one
   image that cannot be a block background setting, because a single block
   background can only hold one image and this one has to follow the mode.
   Photographs are never handled this way — those are real image blocks. */
html[data-theme="light"] {
	--kc-scrim-rgb: 244, 246, 248;
	--kc-texture: url('../img/white-ice.webp');
	--kc-texture-scrim: linear-gradient(180deg, rgba(244, 246, 248, .05) 0%, rgba(244, 246, 248, .34) 100%);
}


/* --------------------------------------------------------------------------
   2. Typography

   WHO OWNS WHAT

   Customizer > Typography owns font size (desktop / tablet / mobile), weight,
   line height, letter spacing and text transform. Change type there, not here.

   This file owns only the font stacks, because the Customizer cannot express a
   fallback chain, and the 300 weight floor.
   -------------------------------------------------------------------------- */

body {
	font-family: var(--kc-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.kc-display {
	font-family: var(--kc-display);
	color: var(--contrast);
}

/* Work Sans below 300 is not a brand weight. The font binary is instanced to a
   300 floor, so a stray font-weight:200 anywhere on the site still renders at
   300 and cannot go lighter. Nothing to enforce in CSS. */

strong, b, .kc-strong { font-weight: 500; }

/* Eyebrow — the small tracked label that sits above every major heading. */
.kc-eyebrow {
	font-family: var(--kc-body);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent-2);
	line-height: 1.4;
	margin: 0 0 .5rem;
}

.kc-lead {
	font-size: 1.1875rem;
	line-height: 1.7;
	font-weight: 300;
}

.kc-measure { max-width: 68ch; }


/* --------------------------------------------------------------------------
   3. Jersey stripe
   The signature brand device. Applied as a utility class on an empty
   GenerateBlocks element, or as a top/bottom edge on a section.
   -------------------------------------------------------------------------- */

.kc-stripe {
	height: var(--kc-stripe-height);
	background: var(--kc-stripe);
}

.kc-stripe-sm {
	height: 10px;
	background: var(--kc-stripe);
}

/* Short stripe used as a rule under a heading. */
.kc-rule {
	width: 88px;
	height: 11px;
	background: var(--kc-stripe);
	border-radius: 1px;
	margin: 1rem 0 1.25rem;
}

.kc-rule-center {
	margin-left: auto;
	margin-right: auto;
}

/* Stripe edges on a section, drawn inside its padding so they never collide
   with text. Add kc-edge-top, kc-edge-bottom, or both.

   PSEUDO-ELEMENT BUDGET — read before changing this.

   An element only has ::before and ::after, and an image-backed section can
   need three things at once: a texture or scrim, a top stripe and a bottom
   stripe. So the two are split by job and never mixed:

       ::before  texture (.kc-iced) or darkening overlay (.kc-band)
       ::after   the stripes, drawn as one or two background LAYERS

   Drawing both stripes as layers on a single pseudo-element is what frees
   ::before. Putting a stripe back on ::before would knock out the ice texture
   on .kc-iced and the overlay on .kc-band — which is exactly the bug that left
   the photo bands with no bottom stripe. */
.kc-edge-top,
.kc-edge-bottom {
	position: relative;
}

.kc-edge-top::after,
.kc-edge-bottom::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}

.kc-edge-top::after {
	background: var(--kc-stripe) left top / 100% var(--kc-stripe-height) no-repeat;
}

.kc-edge-bottom::after {
	background: var(--kc-stripe) left bottom / 100% var(--kc-stripe-height) no-repeat;
}

/* Both edges on one element: two layers, one pseudo-element. */
.kc-edge-top.kc-edge-bottom::after {
	background:
		var(--kc-stripe) left top / 100% var(--kc-stripe-height) no-repeat,
		var(--kc-stripe) left bottom / 100% var(--kc-stripe-height) no-repeat;
}


/* --------------------------------------------------------------------------
   4. Ice plate
   A textured background for dark sections. The texture follows the colour
   mode; the scrim above it keeps text at contrast.
   -------------------------------------------------------------------------- */

.kc-iced {
	position: relative;
	isolation: isolate;
}

.kc-iced::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--kc-texture-scrim), var(--kc-texture) center / cover no-repeat;
}


/* --------------------------------------------------------------------------
   4b. Mode-specific blocks

   Some photographs exist as a jersey pair: a blue-jersey frame for Away and a
   white-jersey frame for Home. Both are placed as ordinary image blocks, so
   both are visible and swappable in the editor, and only the one matching the
   current mode is shown on the site.

   Put kc-only-away on the blue-jersey block and kc-only-home on the white one.
   -------------------------------------------------------------------------- */

.kc-only-home { display: none; }
.kc-only-away { display: block; }

html[data-theme="light"] .kc-only-home { display: block; }
html[data-theme="light"] .kc-only-away { display: none; }

/* Editor-canvas handling for these pairs lives in editor.css, which is the
   single owner of anything the block editor needs. */


/* --------------------------------------------------------------------------
   5. Header and navigation

   This site uses GeneratePress' Navigation Branding module, so there is no
   .site-header element: the logo lives inside .main-navigation, which is the
   header bar. Target that, not .site-header.
   -------------------------------------------------------------------------- */

.main-navigation.has-branding {
	position: sticky;
	top: 0;
	z-index: 100;
	overflow: visible;
	background: var(--base);
}

/* The jersey stripe runs along the bottom of the bar and doubles as the top
   edge of whatever section follows. */
.main-navigation.has-branding::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--kc-stripe-height);
	background: var(--kc-stripe);
	pointer-events: none;
	z-index: 55;
}

.main-navigation .inside-navigation {
	overflow: visible;
}

/* The crest breaks out of the bar and hangs over the stripe, as in the brand
   layout. It sits above the stripe on z-index and is allowed to overflow. */
.main-navigation .site-logo {
	position: relative;
	z-index: 60;
	display: block;
	align-self: center;
}

.main-navigation .site-logo img {
	height: clamp(104px, 15vw, 184px);
	width: auto;
	max-width: none;
	margin-bottom: calc(-1 * clamp(1.75rem, 4.5vw, 3.5rem));
	filter:
		drop-shadow(0 14px 28px rgba(3, 104, 199, .35))
		drop-shadow(0 8px 18px rgba(0, 0, 0, .55));
	transition: transform var(--kc-speed) var(--kc-ease);
}

.main-navigation .site-logo:hover img {
	transform: scale(1.04) rotate(-1deg);
}

/* In Home mode the blue glow reads as a halo on a light bar, so it is dropped
   back to a plain shadow. */
html[data-theme="light"] .main-navigation .site-logo img {
	filter: drop-shadow(0 10px 22px rgba(10, 14, 20, .28));
}

/* Navigation uses the display face, like the brand layout. Size, weight,
   transform and tracking are set in Customizer > Typography; only the stack
   with its fallbacks lives here. */
.main-navigation .main-nav ul li a,
.main-navigation .menu-bar-item > a,
.main-navigation .menu-toggle {
	font-family: var(--kc-display);
}

/* The off-canvas ("More") toggle and the Home/Away switch sit at the end of the
   bar, switch last. */
.main-navigation .menu-bar-items {
	display: flex;
	align-items: center;
	gap: .25rem;
}

.kcohl-mode-toggle-item {
	order: 10;
	display: flex;
	align-items: center;
	padding-left: .5rem;
}


/* --------------------------------------------------------------------------
   5b. Full-bleed page canvas

   The brand layout is edge-to-edge: every section paints its own background
   across the full viewport and holds its own max-width wrapper inside. That
   needs GeneratePress' article container out of the way, so on pages flagged
   full-bleed the site container cap, the article padding and the article's
   card treatment are all released.

   Scoped to .kcohl-fullbleed (set in functions.php) so every other page keeps the
   standard GeneratePress layout until it is redesigned.
   -------------------------------------------------------------------------- */

.kcohl-fullbleed .site.grid-container {
	max-width: none;
}

.kcohl-fullbleed .site-content,
.kcohl-fullbleed .content-area,
.kcohl-fullbleed .site-main,
.kcohl-fullbleed .inside-article,
.kcohl-fullbleed .entry-content {
	padding: 0;
	margin: 0;
	max-width: none;
}

/* The article is a plain canvas here, not a card. */
.kcohl-fullbleed .inside-article {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* The scroll-motion wrapper sits between .entry-content and each section, so it
   must not introduce a width of its own. */
.kcohl-fullbleed .sm-animate,
.kcohl-fullbleed .sm-block-content {
	width: 100%;
	max-width: none;
}

.kcohl-fullbleed .entry-content > *,
.kcohl-fullbleed .sm-block-content > * {
	margin-block: 0;
}

/* WordPress' alignfull works by pulling an element out of a padded container
   with negative margins measured against 100vw. Two things break that here: the
   canvas above already has no padding, and the scroll-motion wrapper sits
   between .entry-content and the section, so the negative margin is measured
   against the wrong box and leaves the section inset by ~30px.

   With an edge-to-edge canvas the negative margin is not needed at all, so it
   is removed and the section simply fills its parent. Using 100% rather than
   100vw also keeps the scrollbar from causing horizontal overflow. */
.kcohl-fullbleed .alignfull,
.kcohl-fullbleed .sm-block-content > .alignfull,
.kcohl-fullbleed .entry-content > .alignfull {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	left: auto;
	right: auto;
}


/* --------------------------------------------------------------------------
   6. Buttons
   One primary per view. Everything else is a ghost.
   -------------------------------------------------------------------------- */

.kc-btn,
.wp-block-button__link,
.gb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--kc-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	padding: .9rem 1.6rem;
	min-height: 44px;
	border-radius: 6px;
	text-decoration: none;
	border: 2px solid transparent;
	transition:
		background var(--kc-speed) var(--kc-ease),
		border-color var(--kc-speed) var(--kc-ease),
		color var(--kc-speed) var(--kc-ease),
		transform var(--kc-speed) var(--kc-ease);
}

/* The `a.` prefix matters. These buttons are anchors, and the theme's link
   colour rule would otherwise paint the label accent blue on a blue button —
   about 1.9:1, nowhere near legible. Anchor + class outranks it. */
/* Specificity note: GeneratePress ships container link rules such as
   `.sidebar .widget a` (0,2,1). brand.css loads after GP's inline CSS, so
   matching that weight is enough to win — no !important required. */
.kc-btn-primary,
a.kc-btn-primary,
a.kc-btn.kc-btn-primary,
.sidebar .widget a.kc-btn-primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--kc-on-accent);
}

.kc-btn-primary:hover,
.kc-btn-primary:focus-visible,
a.kc-btn-primary:hover,
a.kc-btn-primary:focus-visible,
a.kc-btn.kc-btn-primary:hover,
.sidebar .widget a.kc-btn-primary:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--kc-on-accent);
}

.kc-btn-ghost,
a.kc-btn-ghost,
a.kc-btn.kc-btn-ghost,
.sidebar .widget a.kc-btn-ghost {
	background: transparent;
	color: var(--contrast);
	border-color: color-mix(in srgb, var(--contrast) 45%, transparent);
}

.kc-btn-ghost:hover,
.kc-btn-ghost:focus-visible,
a.kc-btn-ghost:hover,
a.kc-btn-ghost:focus-visible {
	border-color: var(--contrast);
	color: var(--contrast);
}


/* --------------------------------------------------------------------------
   7. Cards
   Shared shell for the league beats, the spec rows, news posts and the
   quick-access tiles.
   -------------------------------------------------------------------------- */

.kc-card {
	display: flex;
	flex-direction: column;
	background: var(--base-3);
	border: 1px solid var(--base-2);
	border-radius: var(--kc-radius-lg);
	overflow: hidden;
}

/* Pins a card's trailing link to the bottom edge so ragged card heights
   still line their links up. */
.kc-card .kc-card-link { margin-top: auto; }

.kc-card-hover {
	transition:
		border-color var(--kc-speed) var(--kc-ease),
		transform var(--kc-speed) var(--kc-ease);
}

.kc-card-hover:hover {
	border-color: var(--accent);
	transform: translateY(-3px);
}

/* Card links (the Player Quick Access tiles).

   These are anchors, so GeneratePress' link rules outrank the block's own
   colour — including `.inside-article a:hover` at (0,2,1), which repainted the
   label the deep blue on hover, about 2.5:1 on the dark card. Anchor + class
   selectors below win in every state without !important. */
a.kc-card,
a.kc-card:visited,
a.kc-card:hover,
a.kc-card:focus,
a.kc-card:focus-visible,
a.kc-card:active,
.inside-article a.kc-card,
.inside-article a.kc-card:hover,
.inside-article a.kc-card:focus {
	color: var(--contrast);
	text-decoration: none;
}

/* The small tracked label keeps the accent; it clears contrast on both the
   card surface and the hover surface. */
a.kc-card .kc-card-label,
a.kc-card:hover .kc-card-label,
.inside-article a.kc-card:hover .kc-card-label {
	color: var(--accent-2);
}

/* Hover gives the tile a surface change as well as the border, so the state is
   legible without relying on colour alone. */
a.kc-card-hover:hover,
a.kc-card-hover:focus-visible,
.inside-article a.kc-card-hover:hover {
	background-color: var(--base-2);
	border-color: var(--accent);
}

/* Small tracked label inside a card. */
.kc-card-label {
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent-2);
	margin-bottom: .5rem;
}

.kc-timestamp {
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--contrast-3);
}


/* --------------------------------------------------------------------------
   8. Photographic band
   A full-bleed photo with a display-type caption across it.
   -------------------------------------------------------------------------- */

.kc-band {
	position: relative;
	overflow: hidden;
}

/* Darkens the photo so the caption clears 4.5:1 regardless of the frame.
   This lives on ::before, not ::after — ::after belongs to the stripes (see the
   pseudo-element budget note in section 3). */
.kc-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(7, 10, 16, .72) 0%, rgba(7, 10, 16, .78) 50%, rgba(7, 10, 16, .72) 100%);
}

/* A band with no caption has nothing to keep legible, so the photo is shown
   clean. Bands that do carry a caption keep the scrim automatically. */
.kc-band:not(:has(.kc-band-caption))::before {
	display: none;
}

/* Only the caption is lifted above the darkening overlay. This must not be a
   blanket `.kc-band > *` rule: the photo wrappers are absolutely positioned by
   their own block settings, and a child rule here would outrank that and drop
   them back into flow. */
.kc-band .kc-band-caption {
	position: relative;
	z-index: 4;
}

/* The band photo has to cover its frame. GeneratePress ships a plain `img`
   rule that leaves width on auto, which would size the photo from its own
   aspect ratio and leave a gap beside it; a class-based selector here outranks
   it without needing !important. */
.kc-band img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kc-band-caption {
	font-family: var(--kc-display);
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: clamp(1.9rem, 5vw, 3.75rem);
	line-height: 1.05;
	color: #E8EAED;
	text-align: center;
	max-width: 20ch;
	margin: 0 auto;
	text-wrap: balance;
	text-shadow: 0 2px 10px rgba(7, 10, 16, .95), 0 2px 30px rgba(7, 10, 16, .8);
}


/* --------------------------------------------------------------------------
   8b. Hero

   Four layers:

     layer 0  the section's own background photo (a block setting)
     layer 1  the scrim  — a background LAYER on the section itself, added the
              way the editor adds one (a gradient prepended to backgroundImage
              alongside var(--inline-bg-image)). It is edited in the Backgrounds
              panel; only its colour comes from here, via --kc-scrim-rgb, so it
              follows the mode.
     layer 2  the stage  — one 1200px centred column holding BOTH the cut-out
              player and the copy, so the two are aligned to the same measure
     layer 3  the copy

   Because the stage carries z-index 2 and the scrim 1, everything in the stage
   — the player included — paints above the gradient at every breakpoint.

   Only scaffolding lives here. The photo, the gradient, the widths and the copy
   are all block settings.
   -------------------------------------------------------------------------- */

.kc-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* Full hero height so the player can sit on the hero's bottom edge while the
   copy stays vertically centred.

   position/z-index are restated here as well as on the block, because the
   player is positioned against this element. If the stage ever loses
   `position: relative`, the player stops being absolute and falls into the flex
   row first — which puts it on the wrong side. */
.kc-hero-stage {
	position: relative;
	z-index: 2;
	align-self: stretch;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}


/* The player is anchored to the hero's bottom edge. That works because the
   section carries no bottom padding — the copy column holds it instead — so the
   stage reaches the block's true bottom. If you put bottom padding back on the
   section, the player will float above the edge again. */
.kc-hero-figure {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	height: clamp(360px, 96%, 780px);
	width: auto;
	max-width: 58%;
	pointer-events: none;
	margin: 0;
}

.kc-hero-figure img {
	height: 100%;
	width: auto;
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55));
}

.kc-hero-inner {
	position: relative;
	z-index: 3;
	width: 100%;
}

@media (max-width: 1024px) {
	/* Keep the copy clear of the player on a narrower screen. */
	.kc-hero-inner {
		max-width: 58%;
	}

	.kc-hero-figure {
		max-width: 46%;
		height: clamp(320px, 92%, 620px);
	}
}

@media (max-width: 767px) {
	/* On a phone the hero stacks: copy first, then the player at full strength
	   underneath it, still above the gradient. */
	.kc-hero-stage {
		flex-direction: column;
		align-items: stretch;
	}

	.kc-hero-inner {
		order: 1;
		max-width: 100%;
	}

	.kc-hero-figure {
		order: 2;
		position: relative;
		z-index: 2;
		right: auto;
		bottom: auto;
		height: auto;
		width: min(320px, 80%);
		max-width: 80%;
		margin: 2.5rem auto 0;
		opacity: 1;
	}

	.kc-hero-figure img {
		width: 100%;
		height: auto;
	}
}


/* --------------------------------------------------------------------------
   8c. Page hero

   The interior-page version of the hero: a full-bleed photograph, a scrim that
   follows the colour mode, and the page title on top. Shorter than the home
   hero and centred rather than split, because there is no cut-out figure.

   The photograph is a block background setting, so it stays editable and shows
   in the editor. Only the scrim and the stacking live here.
   -------------------------------------------------------------------------- */

.kc-pagehero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

html[data-theme="light"] .kc-pagehero-inner {
	position: relative;
	z-index: 2;
}


/* --------------------------------------------------------------------------
   8d. GenerateBlocks Pro tabs (Schedule & Scores)

   The tabs on that page were built against the old palette with hard-coded
   #ffffff / #000000, which strands the labels in Away mode. Remapped to tokens
   here; the block markup itself is untouched so the tabs stay editable.
   -------------------------------------------------------------------------- */

.kcohl-fullbleed .gb-tabs__menu-item,
.kcohl-fullbleed .gb-tabs__menu-item:is(:hover, :focus) {
	background-color: var(--base-3);
	color: var(--contrast);
	border-bottom: 2px solid transparent;
}

.kcohl-fullbleed .gb-tabs__menu-item:is(:hover, :focus) {
	background-color: var(--base-2);
	color: var(--contrast);
}

.kcohl-fullbleed .gb-tabs__menu-item:is(.gb-block-is-current, .gb-block-is-current:hover, .gb-block-is-current:focus) {
	background-color: var(--base-2);
	color: var(--contrast);
	border-bottom-color: var(--accent);
}

.kcohl-fullbleed .gb-tabs__items,
.kcohl-fullbleed .gb-tabs__item {
	color: var(--contrast-2);
}


/* --------------------------------------------------------------------------
   9. Tick list
   -------------------------------------------------------------------------- */

.kc-ticks {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.kc-ticks li {
	display: flex;
	gap: .85rem;
	align-items: flex-start;
	padding-left: 0;
}

.kc-ticks li::before {
	content: "";
	flex: 0 0 22px;
	height: 22px;
	margin-top: .15rem;
	background-color: var(--accent-2);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.site-footer .footer-widgets,
.site-footer .site-info {
	background: var(--base-3);
	color: var(--contrast-2);
}

.footer-bar .widget_nav_menu .current-menu-item a,
.footer-bar .widget_nav_menu .current_page_item a {
	color: var(--accent-2);
}

/* GeneratePress' own footer-bar rules outrank a bare `.site-footer a`, and the
   colour they land on (brand blue on the dark footer) only clears 3.1:1. These
   selectors are specific enough to win in both modes. */
.site-footer a,
.site-footer .footer-bar a,
.site-info a,
.footer-widgets a {
	color: var(--accent-2);
}

.site-footer a:hover,
.site-footer a:focus-visible,
.site-footer .footer-bar a:hover,
.site-info a:hover,
.footer-widgets a:hover {
	color: var(--contrast);
}


/* --------------------------------------------------------------------------
   11. Form controls
   Applies site-wide, including the spares app, Gravity Forms registration and
   the golf registration tables. Presentation only — no app markup, template
   or script is touched anywhere in this theme.
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea {
	font-family: var(--kc-body);
	font-weight: 300;
	font-size: 1rem;
	color: var(--contrast);
	background: var(--base-3);
	border: 1px solid var(--line-300);
	border-radius: var(--kc-radius-md);
	padding: .8rem 1rem;
	transition:
		border-color var(--kc-speed) var(--kc-ease),
		box-shadow var(--kc-speed) var(--kc-ease);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
	outline: none;
}

::placeholder {
	color: var(--contrast-3);
	opacity: 1;
}

label,
.gform_wrapper .gfield_label {
	font-family: var(--kc-body);
	font-weight: 500;
	color: var(--contrast);
}

button,
input[type="submit"],
input[type="button"],
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
	font-family: var(--kc-body);
	font-weight: 600;
	border-radius: 6px;
	min-height: 44px;
	padding: .9rem 1.6rem;
	border: 2px solid var(--accent);
	background: var(--accent);
	color: var(--paper);
	cursor: pointer;
	transition:
		background var(--kc-speed) var(--kc-ease),
		border-color var(--kc-speed) var(--kc-ease);
}

button:hover,
input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}

/* --- Spares app and other Tailwind-styled application screens ---

   The spares app ships its own Tailwind layout. Its neutral utility classes are
   remapped onto the brand palette here so the whole app follows Home / Away
   like the rest of the site. Semantic colours (red / green / amber for errors,
   success and warnings) are deliberately left alone.

   This is presentation only. No app markup, template, script or setting is
   touched anywhere in this theme — only the meaning of its colour classes.

   Only the login screen could be inspected directly, so the map covers the
   wider Tailwind neutral scale rather than just the classes seen there. */

/* Surfaces */
.kcohl-app-page .bg-white,
.kcohl-app-page .bg-gray-50,
.kcohl-app-page .bg-gray-100,
.kcohl-app-page .bg-slate-50,
.kcohl-app-page .bg-slate-100 {
	background-color: var(--base-3) !important;
}

.kcohl-app-page .bg-gray-200,
.kcohl-app-page .bg-slate-200 {
	background-color: var(--base-2) !important;
}

.kcohl-app-page .bg-gray-800,
.kcohl-app-page .bg-gray-900,
.kcohl-app-page .bg-slate-800,
.kcohl-app-page .bg-slate-900,
.kcohl-app-page .bg-black {
	background-color: var(--base) !important;
}

/* Text */
.kcohl-app-page .text-black,
.kcohl-app-page .text-gray-900,
.kcohl-app-page .text-gray-800,
.kcohl-app-page .text-gray-700,
.kcohl-app-page .text-slate-900,
.kcohl-app-page .text-slate-800,
.kcohl-app-page .text-slate-700 {
	color: var(--contrast) !important;
}

.kcohl-app-page .text-gray-600,
.kcohl-app-page .text-gray-500,
.kcohl-app-page .text-slate-600,
.kcohl-app-page .text-slate-500 {
	color: var(--contrast-2) !important;
}

.kcohl-app-page .text-gray-400,
.kcohl-app-page .text-gray-300,
.kcohl-app-page .text-slate-400 {
	color: var(--contrast-3) !important;
}

/* Borders and dividers */
.kcohl-app-page .border,
.kcohl-app-page .border-gray-200,
.kcohl-app-page .border-gray-300,
.kcohl-app-page .border-slate-200,
.kcohl-app-page .border-slate-300 {
	border-color: var(--line-300) !important;
}

.kcohl-app-page .divide-gray-200 > * + *,
.kcohl-app-page .divide-gray-300 > * + * {
	border-color: var(--line-300) !important;
}

/* Brand blue for the app's primary actions and links */
.kcohl-app-page .bg-blue-500,
.kcohl-app-page .bg-blue-600,
.kcohl-app-page .bg-blue-700 {
	background-color: var(--accent) !important;
}

.kcohl-app-page .hover\:bg-blue-600:hover,
.kcohl-app-page .hover\:bg-blue-700:hover {
	background-color: var(--accent-hover) !important;
}

.kcohl-app-page .hover\:bg-gray-50:hover,
.kcohl-app-page .hover\:bg-gray-100:hover {
	background-color: var(--base-2) !important;
}

.kcohl-app-page .text-blue-500,
.kcohl-app-page .text-blue-600,
.kcohl-app-page .text-blue-700 {
	color: var(--accent-2) !important;
}

.kcohl-app-page .hover\:text-blue-500:hover,
.kcohl-app-page .hover\:text-blue-700:hover {
	color: var(--accent) !important;
}

/* .text-white sits on the app's blue buttons. It stays white: on --accent that
   is 5.5:1, where the off-white --paper was only 4.57:1 — passing, but thin,
   and visibly grey against the blue in Home mode. */
.kcohl-app-page .text-white {
	color: var(--kc-on-accent) !important;
}

/* Belt and braces for the app screens that are only reachable behind a login.
   Any control the app paints brand blue gets the white label, whether or not
   its own markup happens to carry .text-white. */
.kcohl-app-page .bg-blue-500,
.kcohl-app-page .bg-blue-600,
.kcohl-app-page .bg-blue-700,
.kcohl-app-page .bg-indigo-500,
.kcohl-app-page .bg-indigo-600,
.kcohl-app-page .bg-indigo-700 {
	color: var(--kc-on-accent) !important;
}

.kcohl-app-page .bg-indigo-500,
.kcohl-app-page .bg-indigo-600,
.kcohl-app-page .bg-indigo-700 {
	background-color: var(--accent) !important;
}

/* Form controls inside the app follow the page background, not the card, so a
   field reads as an input in both modes. */
.kcohl-app-page input[type="text"],
.kcohl-app-page input[type="email"],
.kcohl-app-page input[type="password"],
.kcohl-app-page input[type="tel"],
.kcohl-app-page input[type="number"],
.kcohl-app-page input[type="date"],
.kcohl-app-page input[type="search"],
.kcohl-app-page select,
.kcohl-app-page textarea {
	background-color: var(--base) !important;
	color: var(--contrast) !important;
	border-color: var(--line-300) !important;
}

.kcohl-app-page ::placeholder {
	color: var(--contrast-3) !important;
	opacity: 1;
}

.kcohl-app-page label {
	color: var(--contrast) !important;
}

/* Tailwind's shadows are tuned for a white page; on the dark surface they read
   as grubby haloes, so they are deepened to the brand elevation instead. */
.kcohl-app-page .shadow-sm { box-shadow: var(--kc-shadow-sm) !important; }
.kcohl-app-page .shadow,
.kcohl-app-page .shadow-md { box-shadow: var(--kc-shadow-md) !important; }
.kcohl-app-page .shadow-lg,
.kcohl-app-page .shadow-xl { box-shadow: var(--kc-shadow-lg) !important; }

/* Tables — the golf registration list and any league data tables. */
.entry-content table,
.gform_wrapper table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--base-2);
	padding: .75rem .9rem;
	text-align: left;
}

.entry-content thead th {
	background: var(--base-2);
	color: var(--contrast);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .8125rem;
}

.entry-content tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--base-2) 40%, transparent);
}

/* The golf table ships inline background colours from the shortcode. Those are
   deliberately left alone so the duplicate-row highlight keeps working. */


/* --------------------------------------------------------------------------
   11a. Gravity Forms

   Gravity Forms ships its own colour system (the gform-theme custom
   properties). Its greys are tuned for a white page, so on the Away background
   the field sub-labels came out at 2.9:1. Mapped to brand tokens here; the
   forms themselves are untouched.
   -------------------------------------------------------------------------- */

.gform_wrapper .gform-field-label,
.gform_wrapper .gfield_label {
	color: var(--contrast);
}

/* Sub-labels ("First" / "Last" under a name field) and field descriptions. */
.gform_wrapper .gform-field-label--type-sub,
.gform_wrapper .gfield_description,
.gform_wrapper .ginput_complex label,
.gform_wrapper .gform_fileupload_rules,
.gform_wrapper .gfield_required {
	color: var(--contrast-2);
}

.gform_wrapper .gform_description,
.gform_wrapper .gsection_description {
	color: var(--contrast-2);
}

.gform_wrapper .gsection {
	border-bottom-color: var(--base-2);
}

/* Validation messages keep their semantic colour but need to clear the dark
   background, so the brand error tone is used rather than Gravity's default. */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	color: var(--contrast);
	background: color-mix(in srgb, #B04035 22%, transparent);
	border-color: #B04035;
}

.gform_wrapper .gform_validation_errors {
	background: color-mix(in srgb, #B04035 18%, transparent);
	border-color: #B04035;
	color: var(--contrast);
}

.gform_wrapper .gform_confirmation_message {
	color: var(--contrast);
}


/* --------------------------------------------------------------------------
   11b. MailPoet signup form

   MailPoet stores colours inside the form's own settings and writes some of
   them as inline styles on the markup. Those colours predate this brand and
   fail contrast in one or both modes (the privacy-policy link came out at
   1.2:1 on the dark card). These rules put the form back on the palette.

   !important appears only where MailPoet writes an inline style; without it
   the stored colour wins regardless of specificity. Changing the colours in
   MailPoet's form editor instead would work too, but it would not follow the
   Home / Away switch.
   -------------------------------------------------------------------------- */

.mailpoet_form {
	background: var(--base-3) !important;
	color: var(--contrast-2);
	border-radius: var(--kc-radius-lg);
}

.mailpoet_form p,
.mailpoet_form .mailpoet_form_paragraph,
.mailpoet_form .mailpoet_paragraph,
.mailpoet_form span {
	color: var(--contrast-2) !important;
}

.mailpoet_form h1,
.mailpoet_form h2,
.mailpoet_form h3,
.mailpoet_form h4 {
	color: var(--contrast) !important;
}

.mailpoet_form a {
	color: var(--accent-2) !important;
	text-decoration: underline;
	text-underline-offset: .15em;
}

.mailpoet_form a:hover,
.mailpoet_form a:focus-visible {
	color: var(--accent) !important;
}

.mailpoet_form input[type="text"],
.mailpoet_form input[type="email"],
.mailpoet_form textarea,
.mailpoet_form select {
	background: var(--base) !important;
	color: var(--contrast) !important;
	border: 1px solid var(--line-300) !important;
	border-radius: var(--kc-radius-md);
}

.mailpoet_form input::placeholder,
.mailpoet_form textarea::placeholder {
	color: var(--contrast-3) !important;
	opacity: 1;
}

.mailpoet_form input[type="submit"],
.mailpoet_form .mailpoet_submit {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
	color: var(--paper) !important;
	font-family: var(--kc-body);
	font-weight: 600;
	border-radius: 6px;
	min-height: 44px;
}

.mailpoet_form input[type="submit"]:hover,
.mailpoet_form .mailpoet_submit:hover {
	background: var(--accent-hover) !important;
	border-color: var(--accent-hover) !important;
}

.mailpoet_form .mailpoet_validate_success { color: var(--success, #3D7A4A) !important; }
.mailpoet_form .mailpoet_validate_error { color: var(--contrast) !important; }


/* --------------------------------------------------------------------------
   12. News — date card, feature, grid and carousel

   Used by the News page and the homepage news carousel. The cards themselves
   are a GenerateBlocks Query Loop, so a human edits ONE loop item template in
   the block editor and every card follows. Nothing here invents content.
   -------------------------------------------------------------------------- */

/* --- Calendar day card ---
   Big day number, month under it, year small under that, with a blue cap so
   it reads as a torn-off calendar page. Used in place of a featured image,
   since almost no post on this site has one. */

.kc-datecard {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 5.25rem;
	padding: .75rem .5rem .7rem;
	background: var(--base-2);
	border: 1px solid var(--line-300);
	border-top: 4px solid var(--accent);
	border-radius: var(--kc-radius-md);
	text-align: center;
	line-height: 1;
}

.kc-datecard-day {
	font-family: var(--kc-display);
	font-weight: 400;
	font-size: 2.5rem;
	letter-spacing: .01em;
	color: var(--contrast);
}

.kc-datecard-month {
	font-family: var(--kc-body);
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent-2);
	margin-top: .4rem;
}

/* --contrast-2, not --contrast-3: at this size --contrast-3 lands at 3.6:1 on
   the card surface in Away, under the 4.5:1 floor. */
.kc-datecard-year {
	font-family: var(--kc-body);
	font-weight: 400;
	font-size: .6875rem;
	letter-spacing: .14em;
	color: var(--contrast-2);
	margin-top: .35rem;
}

/* The feature card carries a larger calendar page. */
.kc-news-feature .kc-datecard {
	width: 7rem;
	padding: 1rem .6rem .9rem;
}

.kc-news-feature .kc-datecard-day { font-size: 3.6rem; }
.kc-news-feature .kc-datecard-month { font-size: .9375rem; }


/* --- News card --- */

/* No height:100% here. As a flex item in the carousel track that percentage
   resolves against an auto height and wins over the stretch, which left the
   cards at ragged heights. Stretch on the track and the grid does the job. */
.kc-news-card {
	padding: 1.5rem;
	gap: 1rem;
}

.kc-news-head {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
}

.kc-news-title {
	font-family: var(--kc-display);
	font-weight: 400;
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: 0;
}

/* Post titles are anchors, so GeneratePress' link colour would otherwise
   repaint them accent blue. Anchor + class wins without !important. */
.kc-news-title a,
.kc-news-title a:visited,
.inside-article .kc-news-title a {
	color: var(--contrast);
	text-decoration: none;
}

.kc-news-title a:hover,
.kc-news-title a:focus-visible,
.inside-article .kc-news-title a:hover {
	color: var(--accent-2);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.kc-news-excerpt {
	color: var(--contrast-2);
	margin: 0;
}

/* The excerpt carries WordPress' own "Read more" link. Inside a card the card
   already has its own Read story button, so the duplicate is hidden there and
   the styling below covers the excerpt anywhere else. */
.kc-news-card .kc-news-excerpt .more-link {
	display: none;
}

.kc-news-excerpt .more-link {
	display: inline-block;
	margin-top: .4rem;
	font-weight: 600;
	color: var(--accent-2);
	text-decoration: none;
}

.kc-news-excerpt .more-link:hover {
	text-decoration: underline;
	text-underline-offset: .18em;
}


/* Most posts on this site have no featured image, and GenerateBlocks omits the
   media block entirely when the dynamic source is empty — so this only ever
   applies to the few posts that do carry one. */
.kc-news-media {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: var(--kc-radius-md);
	background: var(--base-2);
}

.kc-newsgrid > .kc-news-card:first-child .kc-news-media {
	height: clamp(180px, 26vw, 280px);
}


/* --- News page grid ---
   The first item in the loop is the newest post, so it gets the full width and
   the larger type. On later pagination pages that emphasis falls on the newest
   post of THAT page, which still reads correctly as the page lead. */

/* auto-fill, not a fixed column count: the blog archive renders inside a 70%
   content column next to the sidebar, so a hard 3-up would crush the cards
   there while the same grid is used full width elsewhere. */
.kc-newsgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1.5rem;
	align-items: stretch;
}

.kc-newsgrid > .kc-news-card:first-child {
	grid-column: 1 / -1;
	padding: clamp(1.75rem, 3.5vw, 2.5rem);
	background: var(--base-2);
	border-color: var(--accent);
	gap: 1.25rem;
}

.kc-newsgrid > .kc-news-card:first-child .kc-news-title {
	font-size: clamp(1.9rem, 4.4vw, 3rem);
}

.kc-newsgrid > .kc-news-card:first-child .kc-news-excerpt {
	font-size: 1.0625rem;
	max-width: 62ch;
}

@media (max-width: 767px) {
	.kc-newsgrid { grid-template-columns: 1fr; }
	.kc-news-head { gap: .9rem; }
	.kc-datecard { width: 4.5rem; }
	.kc-datecard-day { font-size: 2.1rem; }
}


/* --- Pagination ---
   The Previous / Next / number links are GenerateBlocks blocks whose own
   colours are set in the block. These rules only cover the states blocks
   cannot express. */

.kc-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin-top: 3rem;
}

.kc-pagination .page-numbers,
.kc-pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .9rem;
	border: 1px solid var(--line-300);
	border-radius: var(--kc-radius-md);
	font-weight: 500;
	color: var(--contrast);
	text-decoration: none;
}

.kc-pagination .page-numbers:hover,
.kc-pagination .page-numbers:focus-visible {
	border-color: var(--accent);
	background: var(--base-2);
}

.kc-pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--kc-on-accent);
}

.kc-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: auto;
	padding: 0 .3rem;
}


/* --- Homepage carousel ---
   A scroll-snap track. It works with no JavaScript at all: the track is a
   normal horizontal scroller, so touch, trackpad and keyboard all move it. The
   arrows in assets/js/carousel.js are an enhancement on top, and the file adds
   nothing to the page if the track is missing. */

/* The rules at the outer edges frame the track so it reads as a window the
   cards travel through. No side padding: the cards run flush to those rules,
   and each arrow is centred ON its rule, half in and half out. */
.kc-carousel {
	position: relative;
	padding-block: .5rem;
	border-left: 1px solid var(--line-300);
	border-right: 1px solid var(--line-300);
}

.kc-carousel-track {
	display: flex;
	align-items: stretch;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Vertical room only, for the card's focus ring and lift. Nothing
	   horizontal, so the first and last card meet the border rules. */
	padding: 4px 0 1rem;
	margin: -4px 0 0;
	scrollbar-width: thin;
	scrollbar-color: var(--line-300) transparent;
}

.kc-carousel-track > * {
	flex: 0 0 clamp(17rem, 30%, 22rem);
	scroll-snap-align: start;
}

/* Every card in the track is as tall as the longest one, which on a phone —
   where a single card fills the view — left a lot of empty card below the short
   posts. Capping the teaser keeps the whole track to a sensible height. The
   News page grid is untouched and still shows the full excerpt. */
.kc-carousel-track .kc-news-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kc-carousel-track::-webkit-scrollbar { height: 8px; }
.kc-carousel-track::-webkit-scrollbar-track { background: transparent; }
.kc-carousel-track::-webkit-scrollbar-thumb {
	background: var(--line-300);
	border-radius: var(--kc-radius-pill);
}

/* One arrow per border rule, straddling it. Each sits above the cards, so it
   carries a shadow to lift it off whatever card is passing underneath. */
.kc-carousel-btn {
	position: absolute;
	top: 50%;
	z-index: 2;
	box-shadow: var(--kc-shadow-md);
	width: 44px;
	height: 44px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--accent);
	border-radius: var(--kc-radius-pill);
	background: var(--accent);
	color: var(--kc-on-accent);
	cursor: pointer;
	transition:
		background var(--kc-speed) var(--kc-ease),
		border-color var(--kc-speed) var(--kc-ease),
		opacity var(--kc-speed) var(--kc-ease);
}

.kc-carousel-btn:hover:not([disabled]),
.kc-carousel-btn:focus-visible {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}

.kc-carousel-btn[disabled] {
	opacity: .35;
	cursor: default;
}

.kc-carousel-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	pointer-events: none;
}

.kc-carousel-btn--prev {
	left: 0;
	transform: translate(-50%, -50%);
}

.kc-carousel-btn--next {
	right: 0;
	transform: translate(50%, -50%);
}

@media (max-width: 767px) {
	/* Smaller arrows on a phone, where each one covers a slice of the single
	   visible card rather than sitting beside several. */
	.kc-carousel-btn {
		width: 36px;
		height: 36px;
	}

	.kc-carousel-btn svg {
		width: 15px;
		height: 15px;
	}

	.kc-carousel-track > * { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   13. Home / Away mode toggle
   Markup comes from the Genex Hockey — Home Away Mode plugin.
   -------------------------------------------------------------------------- */

.genex-mode-toggle {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: transparent;
	border: 2px solid color-mix(in srgb, var(--contrast) 35%, transparent);
	color: var(--contrast);
	border-radius: var(--kc-radius-pill);
	padding: .45rem .9rem;
	min-height: 40px;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Awen01's own stylesheet sets `.awen-dlt-toggle:hover { color: var(--base) }`,
   which paints the label the PAGE BACKGROUND colour on hover — invisible on a
   transparent button sitting on that same background (about 1:1 in Away mode).
   Both classes are on this button, so `.awen-dlt-toggle.genex-mode-toggle`
   (0,3,0) decisively outranks the plugin rule (0,2,0). */
.genex-mode-toggle:hover,
.genex-mode-toggle:focus-visible,
.awen-dlt-toggle.genex-mode-toggle:hover,
.awen-dlt-toggle.genex-mode-toggle:focus-visible {
	background: color-mix(in srgb, var(--contrast) 10%, transparent);
	border-color: var(--accent);
	color: var(--contrast);
}

/* The labels are separate spans, so pin them too rather than relying on
   inheritance the plugin may override. */
.awen-dlt-toggle.genex-mode-toggle:hover .awen-dlt-toggle__label,
.awen-dlt-toggle.genex-mode-toggle:focus-visible .awen-dlt-toggle__label,
.awen-dlt-toggle.genex-mode-toggle:hover .awen-dlt-toggle__icon,
.awen-dlt-toggle.genex-mode-toggle:focus-visible .awen-dlt-toggle__icon {
	color: var(--contrast);
}

/* The switch icon is now a single inline SVG at fill:currentColor, so it
   follows the label colour in both modes and through hover and focus. The
   legacy two-PNG rule is kept for the case where the shortcode override in
   functions.php is removed and the plugin's own markup comes back. */
.genex-mode-toggle__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: inherit;
}

.genex-mode-toggle__icon svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: currentColor;
}

.genex-mode-toggle__icon-img {
	width: 18px;
	height: 18px;
	display: block;
}


/* --------------------------------------------------------------------------
   14. Focus and motion
   -------------------------------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

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


/* --------------------------------------------------------------------------
   15. Responsive
   Breakpoints match the GenerateBlocks defaults so block-level and theme-level
   rules change over at the same widths.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	:root { --kc-stripe-height: 18px; }
}

@media (max-width: 767px) {
	:root { --kc-stripe-height: 14px; }

	/* Smaller crest on a phone, with a shallower overhang so it clears the
	   menu toggle. */
	.main-navigation .site-logo img {
		height: clamp(68px, 19vw, 104px);
		margin-bottom: calc(-1 * clamp(.5rem, 2.5vw, 1.25rem));
	}
}