/* =============================================================================
   VIKINGS TRIATHLON — main.css
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Design Tokens
   ----------------------------------------------------------------------------- */
:root {
  /* Colours */
  --color-red:        #E8322A;
  --color-red-dark:   #C4271F;
  --color-black:      #1A1A1A;
  --color-white:      #FFFFFF;
  --color-cream:      #EDE9E3;
  --color-grey-100:   #F5F3F0;
  --color-grey-200:   #E5E2DC;
  --color-grey-500:   #767270;

  /* Typography */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-ui:      'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw,  0.875rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.28vw,  1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw,  1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.625vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 1.2rem  + 0.875vw, 1.75rem);
  --text-2xl:  clamp(1.75rem,  1.5rem  + 1.25vw,  2.25rem);
  --text-3xl:  clamp(2.5rem,   2rem    + 2.5vw,   4rem);
  --text-4xl:  clamp(3rem,     2.4rem  + 3vw,     5.5rem);

  /* Spacing (8px scale) */
  --space-1:  0.5rem;   /*  8px */
  --space-2:  1rem;     /* 16px */
  --space-3:  1.5rem;   /* 24px */
  --space-4:  2rem;     /* 32px */
  --space-6:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */

  /* Vertical padding for full-width page bands (home sections, Join banner).
     Scales with the viewport: ~48px on phones up to 96px on wide screens. */
  --space-section: clamp(3rem, 1rem + 5.5vw, 6rem);

  /* Layout */
  --grid-max:     1280px;
  --grid-gutter:  1.5rem;

  /* Transitions
     --transition-fast  : hover-IN speed  — must feel instant (≤100ms)
     --transition-out   : hover-OUT speed — can linger so the return feels relaxed
     --transition-base  : non-interactive motion (card lift, image zoom, etc.)  */
  --transition-fast: 80ms ease;
  --transition-out:  220ms ease;
  --transition-base: 250ms ease;

  /* Monospace font stack (preformatted text, code blocks) */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               'Liberation Mono', 'Courier New', monospace;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
}

/* -----------------------------------------------------------------------------
   2. Base Reset
   ----------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-black);
  background-color: var(--color-white);
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   3. Typography
   Based on ALA vertical rhythm principles: headings flow into body without
   excessive gaps; list markers stay inside the reading column; line length
   is capped at ~75ch for readability (WCAG 2.2 best practice).
   ----------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 900;
  font-optical-sizing: auto;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  /* Top space creates visual separation from preceding body copy;
     bottom space is tight — the following paragraph provides its own top margin. */
  margin: 1.25em 0 0.35em;
  text-wrap: balance;
  max-width: none; /* headings are never line-length–capped */
}

/* First heading in a section should not add top margin */
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child {
  margin-top: 0;
}

h1 { font-size: var(--text-4xl); font-weight: 900; letter-spacing: -0.03em; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  margin: 0 0 1em;
  /* WCAG 2.2 / ALA: cap line length at ~75 characters for comfortable reading */
  max-width: 75ch;
}

/* Paragraphs that are direct children of flex/grid containers, hero sections,
   card interiors, or navigation should not be line-length–capped. */
.btn, nav, header, footer,
.page-hero p,
.card p, .event-card p, .news-card p, .race-card p, .coach-card p,
.novice-option-card p, .stat-row p, .ks-nav p,
.wp-block-button p {
  max-width: none;
}

/* Lists: use padding-left (keeps markers inside the column) not margin-left.
   GeneratePress defaults to margin: 0 0 1.5em 3em which pushes markers outside
   the visible gutter on many layouts. */
ul, ol {
  margin: 0 0 1em 0;
  padding-left: 1.75em; /* enough room for markers without excessive indent */
}

li {
  margin-bottom: 0.35em;
  max-width: 75ch;
}

li:last-child {
  margin-bottom: 0;
}

/* Nested lists — tighter spacing, no extra bottom margin */
li > ul, li > ol {
  margin-top: 0.35em;
  margin-bottom: 0;
}

/* Blockquote: border-left flush with the reading column, not the page edge */
blockquote {
  margin: 1.5em 0;
  padding: 0 0 0 var(--space-4);
  border-left: 3px solid var(--color-red);
  font-style: italic;
  color: var(--color-grey-500);
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   4. Layout Utilities
   ----------------------------------------------------------------------------- */

/* Sitewide: remove GeneratePress's top/bottom framing margin on site-main so
   the page-hero butts flush against the sticky header, and the last section
   butts flush against the footer, on all templates. */
.separate-containers .site-main {
  margin-top: 0;
  margin-bottom: 0;
}

/* Sitewide: strip GeneratePress's site-main > * { margin-bottom: 20px } from
   page-hero so there's no white gap between the hero and the content below. */
.site-main > .page-hero {
  margin-bottom: 0;
}

/* Kitchen sink only: also zero the ks-nav gap and any remaining side margins. */
body.page-template-page-kitchen-sink.separate-containers .site-main {
  margin: 0;
}
body.page-template-page-kitchen-sink .site-main > .ks-nav {
  margin-bottom: 0;
}

/* ----------------------------------------
   Block alignment: templates without a .container wrapper
   Several templates (kitchen sink, Novice Program, Membership) output
   the_content() directly into .entry-content with no PHP-rendered
   .container div, so top-level Gutenberg blocks would otherwise render
   edge-to-edge instead of matching the site's --grid-max content column.
   We constrain normal blocks here to match --grid-max.

   Blocks styled with their own full-bleed background via a custom
   className (.novice-inclusions, .novice-sessions) are exempt from the
   max-width rule below — same idea as :not(.alignfull), just driven by a
   hand-authored class instead of the block's own Align toolbar, since
   these aren't using Gutenberg's native align-based full-bleed system.
---------------------------------------- */
:root {
  --wp--style--global--content-size: var(--grid-max);
  --wp--style--global--wide-size: 1440px;
}

/* Container provides the page gutter once — blocks sit inside it */
.entry-content {
  padding-inline: var(--grid-gutter);
  box-sizing: border-box;
}

/* Default blocks: constrain to grid-max and centre within the padded container */
.entry-content > *:not(.alignfull):not(.alignwide):not(.novice-inclusions):not(.novice-sessions) {
  max-width: var(--grid-max);
  margin-inline: auto;
}

/* Alignwide: wider than the content column */
.entry-content > .alignwide {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
}

/* Alignfull: escape the container gutter via negative margin.
   .novice-inclusions/.novice-sessions get the same treatment — they're
   full-bleed via a hand-authored background class rather than Gutenberg's
   own align="full", but still need to escape .entry-content's gutter the
   same way, or they'd be inset by it same as any other child. */
.entry-content > .alignfull,
.entry-content > .novice-inclusions,
.entry-content > .novice-sessions {
  margin-inline: calc(-1 * var(--grid-gutter));
  width: calc(100% + 2 * var(--grid-gutter));
  max-width: none;
  padding-inline: 0;
}

/* Section-level Gutenberg blocks get explicit breathing room.
   Body-copy elements (p, h2–h6, ul, ol, blockquote) rely on their own
   typography margins — no blanket margin rule here. */
.entry-content > .wp-block-group,
.entry-content > .wp-block-cover,
.entry-content > .wp-block-columns,
.entry-content > .wp-block-media-text,
.entry-content > .wp-block-table,
.entry-content > .wp-block-quote,
.entry-content > .wp-block-pullquote,
.entry-content > .wp-block-image,
.entry-content > .wp-block-video,
.entry-content > .wp-block-embed,
.entry-content > .wp-block-buttons,
.entry-content > .wp-block-separator {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Full-width sections are coloured bands: they sit flush against each other,
   the hero above and the footer below. (Normal blocks keep their spacing.) */
.entry-content > .alignfull.alignfull {
  margin-top: 0;
  margin-bottom: 0;
}

/* GeneratePress adds a top margin to .entry-content; the home hero already
   separates it from the header */
.hero + .entry-content {
  margin-top: 0;
}

/* Collapse margin when a block directly follows an alignfull section */
.entry-content > .alignfull + * {
  margin-top: 0;
}
.entry-content > * + .alignfull {
  margin-top: 0;
}

/* Blocks that carry a background use padding-block for breathing room — strip
   external margins so adjacent coloured sections join flush with no white gap.
   WordPress adds .has-background whenever a colour is set via the inspector;
   our named styles are also listed for belt-and-braces coverage. */
.entry-content > .wp-block-group.has-background,
.entry-content > .wp-block-group.is-style-vt-cream,
.entry-content > .wp-block-group.is-style-vt-dark,
.entry-content > .wp-block-group.is-style-vt-red,
.entry-content > .wp-block-cover {
  margin-block: 0;
}

/* PHP-template sections: neutralise GeneratePress's site-main > * { margin-bottom: 20px }
   for <section> children. Each section defines its own spacing via padding-block. */
.site-main > section {
  margin-bottom: 0;
}

.container {
  width: 100%;
  max-width: var(--grid-max);
  margin-inline: auto;
  padding-inline: var(--grid-gutter);
}

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

/* -----------------------------------------------------------------------------
   5. Buttons
   ----------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.75em 1.5em;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  /* hover-OUT: relaxed return */
  transition: background-color var(--transition-out), color var(--transition-out),
              border-color var(--transition-out), transform var(--transition-out),
              box-shadow var(--transition-out);
  /* Short labels stay on one line; long ones wrap rather than overflow the column */
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
  text-align: center;
  justify-content: center;
  text-decoration: none;
}

/* hover-IN: snap to new state within 80ms */
.btn:hover, .btn:focus-visible {
  transition: background-color var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.btn:active {
  transform: scale(0.97);
}

/* Primary — #C4271F gives 5.4:1 contrast with white (AA pass) */
.btn--primary {
  background-color: var(--color-red-dark);
  color: var(--color-white);
  border-color: var(--color-red-dark);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: #A82118;
  border-color: #A82118;
}

/* Outline — white on dark/coloured backgrounds */
.btn--outline {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* White — solid white with dark text; for use on coloured backgrounds */
.btn--white {
  background-color: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}

.btn--white:hover,
.btn--white:focus-visible {
  background-color: var(--color-cream);
  border-color: var(--color-cream);
  color: var(--color-black);
}

/* Focus ring — visible on both light and dark backgrounds */
.btn:focus-visible {
  outline: 3px solid var(--color-white);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--color-black);
}

.btn--outline:focus-visible,
.btn--white:focus-visible {
  outline: 3px solid var(--color-black);
  box-shadow: 0 0 0 5px var(--color-white);
}

/*
 * .btn--glow — animated gradient border around any button.
 * Override --vt-glow-a and --vt-glow-b on the element or a parent to change colours.
 * Default: brand warm red-to-orange.
 */
.btn--glow {
  position: relative;
  /* No z-index — keeps ::after in the parent stacking context so it sits
     behind the button's own background without needing any z-index tricks. */
}

.btn--glow::after {
  --_bw: 2px;
  content: '';
  position: absolute;
  top: calc(-1 * var(--_bw));
  left: calc(-1 * var(--_bw));
  width: calc(100% + var(--_bw) * 2);
  height: calc(100% + var(--_bw) * 2);
  border-radius: calc(var(--radius-sm) + var(--_bw));
  background: linear-gradient(
    60deg,
    var(--vt-glow-a, #C4271F),
    var(--vt-glow-b, #F57C00),
    var(--vt-glow-a, #C4271F)
  );
  background-size: 300% 300%;
  z-index: -1;
  animation: vt-gradient-shift 6s ease alternate infinite;
}

@media (prefers-reduced-motion: reduce) {
  .btn--glow::after {
    animation: none;
    background-position: 50% 50%;
  }
}

/* ── Animation keyframes ──────────────────────────────────────────────────── */

/* Single-layer: used by .btn--glow::after */
@keyframes vt-gradient-shift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}


/* ── WordPress block editor buttons → mirror our .btn design system ──────── */
/*
 * GeneratePress sets .wp-block-button .wp-block-button__link at (0,2,0).
 * We use the same compound selector so our child-theme declaration wins by
 * source order, then use higher-specificity variants for colour overrides.
 */

/* Base — exact match of .btn */
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.75em 1.5em;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  /* hover-OUT */
  transition: background-color var(--transition-out), color var(--transition-out),
              border-color var(--transition-out), transform var(--transition-out),
              box-shadow var(--transition-out);
  /* Short labels stay on one line; long ones wrap rather than overflow the column */
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
  text-align: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
}

.wp-block-button {
  max-width: 100%;
}

/* hover-IN: snap */
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
  transition: background-color var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.wp-block-button .wp-block-button__link:active {
  transform: scale(0.97);
}

/* Default (no explicit background) → .btn--primary */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
  background-color: var(--color-red-dark);
  color: var(--color-white);
  border-color: var(--color-red-dark);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):focus-visible {
  background-color: #A82118;
  border-color: #A82118;
  color: var(--color-white);
}

/* Outline style → .btn--outline */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--color-black);
  border-color: var(--color-black);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

/* Explicit colour (has-background) — keep author colour, apply shape/hover */
.wp-block-button .wp-block-button__link.has-background {
  border-color: transparent;
}

.wp-block-button .wp-block-button__link.has-background:hover,
.wp-block-button .wp-block-button__link.has-background:focus-visible {
  filter: brightness(0.88);
}

/* -----------------------------------------------------------------------------
   6. Site Header
   ----------------------------------------------------------------------------- */
.skip-link:focus {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 9999;
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  clip: auto;
  width: auto;
  height: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-white);
  box-shadow: 0 1px 0 var(--color-grey-200);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-2);
}

.site-header__logo img {
  width: 180px;
  height: auto;
}

.site-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Desktop nav menu */
.site-nav__menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-1);
}

.site-nav__menu a {
  display: block;
  position: relative;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-black);
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Sliding underline — grows from left on hover */
.site-nav__menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-2);
  right: var(--space-2);
  height: 2px;
  background-color: var(--color-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-fast);
}

.site-nav__menu a:hover::after,
.site-nav__menu a:focus-visible::after,
.site-nav__menu .current-menu-item > a::after {
  transform: scaleX(1);
}

.site-nav__menu a:hover,
.site-nav__menu a:focus-visible,
.site-nav__menu .current-menu-item > a {
  color: var(--color-red);
}

/* Desktop dropdown submenu */
.site-nav__menu li {
  position: relative;
}

.site-nav__menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
  z-index: 100;
}

.site-nav__menu li:hover > .sub-menu,
.site-nav__menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-nav__menu .sub-menu a {
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
}

.site-nav__menu .sub-menu a::after {
  display: none;
}

/* Hamburger toggle — hidden on desktop */
.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Every interaction state stays transparent: GeneratePress styles
   button:focus with a dark grey (#3f4047) background otherwise. */
.site-nav__toggle:hover,
.site-nav__toggle:focus,
.site-nav__toggle:focus-visible,
.site-nav__toggle:active {
  background: transparent;
}

.site-nav__toggle:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 4px;
  border-radius: 4px;
}

.site-nav__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-black);
  transition: transform var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast);
}

.site-nav__toggle:hover .site-nav__toggle-bar,
.site-nav__toggle:focus-visible .site-nav__toggle-bar {
  background-color: var(--color-red);
}

/* Close button — hidden on desktop, shown as overlay CTA on mobile */
.site-nav__close {
  display: none;
}

/* Mobile — full-screen overlay menu */
/* Hamburger nav up to 1024px: the full menu + Join Now button needs ~1000px,
   and overflowed the screen on tablets between 768px and 950px. */
@media (max-width: 1024px) {
  /* Header sits above the overlay */
  .site-header {
    z-index: 200;
  }

  /* Single-row header: logo | [spacer] | CTA | toggle */
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .site-header__cta {
    font-size: var(--text-xs);
    padding: 0.5em 1em;
    white-space: nowrap;
  }

  /* Toggle floats on the right; sit above the overlay via inherited z */
  .site-nav__toggle {
    display: flex;
  }

  /* X animation — bars turn white so they're visible on the dark overlay */
  body.nav-open .site-nav__toggle-bar {
    background-color: var(--color-white);
  }

  /* Suppress the hover-red-bars effect when nav is open (bars are already animated) */
  body.nav-open .site-nav__toggle:hover .site-nav__toggle-bar {
    background-color: rgba(255, 255, 255, 0.6);
  }

  [aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  [aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) {
    opacity: 0;
  }
  [aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Full-screen overlay — slides in from the right */
  .site-nav__menu {
    position: fixed;
    inset: 0;
    z-index: 150;  /* below header (200) so toggle stays visible */
    background: var(--color-black);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    padding: var(--space-12) var(--grid-gutter) var(--space-16);
    list-style: none;
    margin: 0;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.35s;
  }

  .site-nav__menu[data-open] {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
  }

  /* Prevent body scroll while overlay is open */
  body.nav-open {
    overflow: hidden;
  }

  /* Close button — centred at the bottom of the overlay */
  .site-nav__close {
    display: none;
    position: fixed;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    z-index: 160;
    align-items: center;
    gap: var(--space-2);
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: var(--space-3) var(--space-6);
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--transition-fast), color var(--transition-fast);
  }

  body.nav-open .site-nav__close {
    display: flex;
  }

  .site-nav__close:hover,
  .site-nav__close:focus-visible {
    border-color: var(--color-red);
    color: var(--color-red);
  }

  /* Override GeneratePress's grey button:hover / button:focus background */
  .site-nav__close:hover,
  .site-nav__close:focus,
  .site-nav__close:active {
    background: transparent;
  }

  .site-nav__close:focus-visible {
    outline: 2px solid var(--color-red);
    outline-offset: 3px;
  }

  /* Overlay nav links — slightly smaller than before for better fit */
  .site-nav__menu a {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--color-white);
    padding: 0.55em 0;
    line-height: 1.1;
  }

  .site-nav__menu a:hover,
  .site-nav__menu a:focus-visible,
  .site-nav__menu .current-menu-item > a {
    color: var(--color-red);
  }

  /* Underline decoration doesn't suit large overlay type */
  .site-nav__menu a::after {
    display: none;
  }

  /* Subtle rule between top-level items only */
  .site-nav__menu > li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Submenu — shown inline, indented, below parent */
  .site-nav__menu .sub-menu {
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    list-style: none;
    margin: 0;
  }

  .site-nav__menu .sub-menu a {
    font-size: var(--text-base);
    font-weight: 700;
    padding: 0.35em 0 0.35em var(--space-6);
    color: rgba(255, 255, 255, 0.6);
  }

  .site-nav__menu .sub-menu a:hover,
  .site-nav__menu .sub-menu a:focus-visible {
    color: var(--color-red);
  }

  .site-nav__menu .sub-menu li + li {
    border-top: none;
  }
}

/* -----------------------------------------------------------------------------
   7. Site Footer
   ----------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-black);
  color: var(--color-white);
  padding-top: var(--space-12);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto;
  gap: var(--space-6) var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__primary {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.site-footer__brand img {
  margin-bottom: var(--space-2);
}

.site-footer__tagline {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* footer.php renders every item (top-level or nested in the source menu)
   as a flat, equal <li> here — see the comment there for why. Condensed
   gap deliberately smaller than --space-1, since this list is expected to
   grow as more links are added over time. */
.site-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.site-footer__nav-list a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast);
}

.site-footer__nav-list a:hover,
.site-footer__nav-list a:focus-visible {
  color: var(--color-white);
}

.site-footer__social {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  color: var(--color-white);
  border-color: var(--color-white);
}

.site-footer__sponsors {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}

.site-footer__sponsors-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--transition-fast);
}

.site-footer__sponsors-heading:hover,
.site-footer__sponsors-heading:focus-visible {
  color: var(--color-white);
}

.site-footer__sponsors-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-8);
}

.site-footer__sponsors-list li {
  height: 140px;
}

.site-footer__sponsors-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.site-footer__sponsors-list img {
  /* Width/height come from HTML attributes computed per-logo in footer.php
     (equal rendered area across differently-shaped logos, clamped to a max
     box) — CSS here only adds the standard responsive-image safety net
     (max-width:100%; height:auto), it must not force a uniform size.
     A percentage max-height on this element has repeatedly collapsed to
     0x0 in testing even with a definite ancestor height chain — avoid it. */
  display: block;
  max-width: 100%;
  height: auto;
  transition: transform var(--transition-fast);
}

.site-footer__sponsors-list a:hover img,
.site-footer__sponsors-list a:focus-visible img {
  transform: scale(1.05);
}

.site-footer__affiliation {
  grid-column: 1 / -1;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
}

.site-footer__affiliation a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}

.site-footer__bottom {
  padding-block: var(--space-3);
  background-color: rgba(0, 0, 0, 0.3);
}

.site-footer__bottom p {
  margin: 0;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .site-footer__primary,
  .site-footer__sponsors {
    grid-column: 1;
  }

  .site-footer__sponsors-list {
    gap: var(--space-4);
  }

  .site-footer__sponsors-list li {
    height: 90px;
  }
}

/* -----------------------------------------------------------------------------
   8. Event Card Component
   ----------------------------------------------------------------------------- */

/*
 * Static left border — category colour as a solid left accent.
 * Uses the start colour from the admin-configurable category pair.
 */
.event-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-left: 4px solid var(--vt-cat-colour, var(--color-grey-300));
  border-radius: 4px;
  background-color: var(--color-white);
  position: relative;
}

/* Let the text column shrink and wrap instead of pushing the card wider */
.event-card__body {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Map each category modifier to its admin-editable CSS custom property */
.event-card--race    { --vt-cat-colour: var(--vt-cat-race-start); }
.event-card--trail   { --vt-cat-colour: var(--vt-cat-trail-start); }
.event-card--social  { --vt-cat-colour: var(--vt-cat-social-start); }
.event-card--parkrun { --vt-cat-colour: var(--vt-cat-parkrun-start); }
.event-card--club    { --vt-cat-colour: var(--vt-cat-club-start); }
.event-card--other   { --vt-cat-colour: var(--vt-cat-other-start); }

.event-card__date-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.event-card__date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background-color: var(--color-cream);
  border-radius: var(--radius-md);
}

/* Vikings Club event badge — sits below the date square in the date column */
.event-card__vikings-badge {
  position: relative;
  width: 52px;
  height: 28px;
  background-color: var(--color-red);
  border-radius: var(--radius-sm);
  background-image: url('../images/brandmark-white.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 16px;
  overflow: clip;
}

.event-card__date-day {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1;
}

.event-card__date-month {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-grey-500);
}

.event-card__time {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-grey-500);
  margin-bottom: var(--space-1);
}

.event-card__title {
  font-size: var(--text-base);
  margin: 0 0 var(--space-1);
}

.event-card__category {
  display: inline-block;
  font-size: var(--text-xs);
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-grey-500);
}

/* -----------------------------------------------------------------------------
   9. Race Card Component
   ----------------------------------------------------------------------------- */
.race-card {
  padding: var(--space-4);
  background-color: var(--color-cream);
  border-radius: var(--radius-md);
}

.race-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.race-card__date {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-red);
}

.race-card__distance {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2em 0.6em;
  background-color: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-sm);
}

.race-card__title {
  font-size: var(--text-xl);
  margin: 0 0 var(--space-2);
}

.race-card__location {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-grey-500);
  margin: 0 0 var(--space-2);
}

.race-card__notes {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
}

.race-card .btn--outline {
  color: var(--color-black);
  border-color: var(--color-black);
}

.race-card .btn--outline:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* -----------------------------------------------------------------------------
   10. Sponsor Strip Component
   ----------------------------------------------------------------------------- */
.sponsor-strip {
  padding-block: var(--space-8);
  background-color: var(--color-white);
}

.sponsor-strip__heading {
  text-align: center;
  font-size: var(--text-lg);
  margin-bottom: var(--space-6);
  color: var(--color-grey-500);
}

.sponsor-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6) var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sponsor-strip__item img {
  height: 60px;
  width: auto;
  max-width: 100%;
  transition: transform var(--transition-base);
}

.sponsor-strip__item--major img {
  height: 80px;
}

.sponsor-strip__item a:hover img,
.sponsor-strip__item a:focus-visible img {
  transform: scale(1.05);
}

/* -----------------------------------------------------------------------------
   11. Join CTA Block Component
   ----------------------------------------------------------------------------- */
.join-cta {
  background-color: var(--color-red);
  color: var(--color-white);
  padding-block: var(--space-section);
  text-align: center;
}

.join-cta__heading {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-3);
}

.join-cta__subtext {
  font-size: var(--text-lg);
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  opacity: 0.9;
}

.join-cta__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Join banner as a synced pattern (core blocks): keep the page gutter and use
   the white solid button style on the red band */
.wp-block-group.join-cta {
  padding-inline: var(--grid-gutter);
}

/* (0,5,0) — one class above the site's default filled-button rule */
.join-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
  background-color: var(--color-white);
  color: var(--color-black);
  border: 2px solid var(--color-white);
}

.join-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover,
.join-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):focus-visible {
  background-color: var(--color-cream);
  border-color: var(--color-cream);
}

/* -----------------------------------------------------------------------------
   12. Section Header (shared heading + link row)
   ----------------------------------------------------------------------------- */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-3);
}

.section-header__title {
  font-size: var(--text-2xl);
  margin: 0;
}

.section-header__link {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-red);
  white-space: nowrap;
}

.section-header__link:hover {
  text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   13. Hero Section
   ----------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(90vh, 720px);
  display: flex;
  align-items: center;
  overflow: clip; /* clip ≠ scroll container; view() can reach root scroller for shimmer */
  background-color: var(--color-black);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0; /* stacking context — keeps shimmer ::after contained below .hero__content */
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(26, 26, 26, 0.85) 0%,
    rgba(26, 26, 26, 0.5) 60%,
    rgba(26, 26, 26, 0.2) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  color: var(--color-white);
  padding-block: var(--space-16);
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-red);
  margin-bottom: var(--space-2);
}

.hero__heading {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-3);
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.hero__subtext {
  font-size: var(--text-lg);
  opacity: 0.9;
  margin-bottom: var(--space-6);
  max-width: 540px;
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   14. Disciplines Section (home) — built from core blocks
   Full-width Group (class "disciplines") holding a heading and a Grid of
   card Groups using the Swim / Bike / Run card styles (functions.php).
   The icon is a CSS mask so it takes the brand red. Editor mirror: editor.css
   ----------------------------------------------------------------------------- */
.disciplines {
  padding-block: var(--space-section);
  background-color: var(--color-cream);
}

/* Full-width block sections keep the page gutter on their content */
.entry-content > .alignfull.disciplines,
.entry-content > .alignfull.novice-promo {
  padding-inline: var(--grid-gutter);
}

.disciplines__heading {
  text-align: center;
  margin-bottom: var(--space-6);
}

.wp-block-group[class*="is-style-vt-discipline-"] {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.wp-block-group[class*="is-style-vt-discipline-"]::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-3);
  background-color: var(--color-red);
  -webkit-mask: var(--vt-discipline-icon) center / contain no-repeat;
  mask: var(--vt-discipline-icon) center / contain no-repeat;
}

.wp-block-group.is-style-vt-discipline-swim { --vt-discipline-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='24' r='20'/%3E%3Cpath d='M14 24c0-5.523 4.477-10 10-10s10 4.477 10 10'/%3E%3Cpath d='M16 28l4-4 4 4 4-8'/%3E%3C/svg%3E"); }
.wp-block-group.is-style-vt-discipline-bike { --vt-discipline-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='36' r='6'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3Cpath d='M18 36h12M24 36V20l-6-6h8l4 6'/%3E%3C/svg%3E"); }
.wp-block-group.is-style-vt-discipline-run { --vt-discipline-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='10' r='4'/%3E%3Cpath d='M20 18l-4 12 6-4 2 10M28 18l4 12-6-4-2 10'/%3E%3C/svg%3E"); }

.wp-block-group[class*="is-style-vt-discipline-"] :is(h2, h3) {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.wp-block-group[class*="is-style-vt-discipline-"] p {
  font-size: var(--text-sm);
  color: var(--color-grey-500);
  margin-bottom: var(--space-3);
}

.entry-content .wp-block-group[class*="is-style-vt-discipline-"] p a {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-red);
  text-decoration: none;
}

/* Stack the cards on phones regardless of WordPress version (older core
   grid layouts keep the column count fixed instead of collapsing). */
@media (max-width: 600px) {
  .disciplines > .wp-block-group.is-layout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Card links inside block sections: the cards style their own text, so opt out
   of the underlined red body-link style that .entry-content applies to links
   (same selector weight +1 so it wins regardless of source order). */
.entry-content :is(.news-card, .event-card, .sponsor-strip) a:not(.btn):not(.wp-block-button__link) {
  color: inherit;
  text-decoration: none;
}

/* Section "see all" links keep their red caps style inside .entry-content */
.entry-content a.section-header__link:not(.btn):not(.wp-block-button__link) {
  color: var(--color-red);
  text-decoration: none;
}

.entry-content a.section-header__link:not(.btn):not(.wp-block-button__link):hover {
  text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   15. Latest News Section (homepage)
   ----------------------------------------------------------------------------- */
.latest-news {
  padding-block: var(--space-section);
  background-color: var(--color-cream);
}

/* -----------------------------------------------------------------------------
   16. Upcoming Events Section
   ----------------------------------------------------------------------------- */
.upcoming-events {
  padding-block: var(--space-section);
}

.event-card-grid {
  display: grid;
  /* minmax(0, …) lets columns shrink below their content's min width —
     a plain 1fr overflowed phone screens with long event footers */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .event-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -----------------------------------------------------------------------------
   16. Upcoming Races Section
   ----------------------------------------------------------------------------- */
.upcoming-races {
  padding-block: var(--space-16);
  background-color: var(--color-grey-100);
}

.race-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.races-empty {
  color: var(--color-grey-500);
}

@media (max-width: 900px) {
  .race-card-grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
   17. Novice Program Promo
   ----------------------------------------------------------------------------- */
.novice-promo {
  padding-block: var(--space-section);
  background-color: var(--color-black);
  color: var(--color-white);
}

.novice-promo__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-red);
  margin-bottom: var(--space-2);
}

.novice-promo__heading {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-3);
}

.novice-promo__text {
  font-size: var(--text-lg);
  max-width: 640px;
  opacity: 0.85;
  margin-bottom: var(--space-6);
}

/* The constrained block layout centres narrower children with !important;
   keep the intro left-aligned with the eyebrow, heading and button. */
.novice-promo.is-layout-constrained > .novice-promo__text {
  margin-left: 0 !important;
}

/* -----------------------------------------------------------------------------
   18. Page Hero (inner pages)
   ----------------------------------------------------------------------------- */
.page-hero {
  padding-block: var(--space-12);
  background-color: var(--color-cream);
}

.page-hero--dark {
  background-color: var(--color-black);
  color: var(--color-white);
}

.page-hero__title {
  font-size: var(--text-3xl);
  margin: 0;
}

/* -----------------------------------------------------------------------------
   19. Training Schedule — editable blocks (pattern "Training schedule")
   Discipline headings use the Swim/Bike/Run heading styles (functions.php);
   session lists use the "schedule-list" class: bold day, time, then the
   venue on a second line (Shift+Enter). Editor mirror: assets/css/editor.css
   ----------------------------------------------------------------------------- */
.wp-block-heading.is-style-vt-swim,
.wp-block-heading.is-style-vt-bike,
.wp-block-heading.is-style-vt-run {
  font-size: var(--text-xl);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 3px solid var(--color-grey-200);
}

.wp-block-heading.is-style-vt-swim { border-color: #4A90D9; }
.wp-block-heading.is-style-vt-bike { border-color: var(--color-red); }
.wp-block-heading.is-style-vt-run  { border-color: #27AE60; }

.wp-block-list.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-grey-500);
}

.wp-block-list.schedule-list li {
  margin: 0;
}

/* First line (day + time) reads darker than the venue line below it */
.wp-block-list.schedule-list li::first-line {
  color: var(--color-black);
  font-weight: 600;
}

.wp-block-list.schedule-list strong {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-red);
  margin-right: var(--space-1);
}

/* -----------------------------------------------------------------------------
   20. Prose (generic WP content area) and global block content styles
   ----------------------------------------------------------------------------- */

/* Prose container: caps the reading column width.
   Works alongside the global p { max-width: 75ch } rule. */
.prose {
  max-width: 760px;
}

.prose p,
.prose ul,
.prose ol {
  line-height: 1.7;
}

.prose a,
.entry-content a:not(.btn):not(.wp-block-button__link) {
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.prose a:hover,
.entry-content a:not(.btn):not(.wp-block-button__link):hover {
  color: var(--color-red-dark);
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-block: var(--space-4);
}

/* ── Code and preformatted text ───────────────────────────────────────────── */

/* Inline code */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--color-grey-100);
  padding: 0.15em 0.45em;
  border-radius: var(--radius-sm);
}

/* Code blocks (inside <pre>) */
pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  background-color: var(--color-grey-100);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-grey-200);
  overflow-x: auto;
  margin-bottom: 1em;
  max-width: none; /* code can be wider than 75ch */
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
}

/* Gutenberg Preformatted block */
.wp-block-preformatted {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  background-color: var(--color-grey-100);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-grey-200);
  overflow-x: auto;
  white-space: pre;
  max-width: none;
}

/* Gutenberg Code block */
.wp-block-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  background-color: var(--color-grey-100);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-grey-200);
  max-width: none;
}

.wp-block-code code {
  background: none;
  padding: 0;
  border-radius: 0;
}

/* ── Gutenberg Quote and Pullquote ───────────────────────────────────────── */

/* Core Quote: flush with the text column */
.wp-block-quote {
  margin: 1.5em 0;
  padding: 0 0 0 var(--space-4);
  border-left: 3px solid var(--color-red);
  border-top: none;
  border-right: none;
  border-bottom: none;
  font-style: italic;
  color: var(--color-grey-500);
}

.wp-block-quote p {
  color: inherit;
}

.wp-block-quote cite {
  display: block;
  margin-top: 0.5em;
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 700;
  color: var(--color-black);
}

/* Pullquote: centred, large, no left border */
.wp-block-pullquote {
  border-top: 3px solid var(--color-red);
  border-bottom: 3px solid var(--color-red);
  border-left: none;
  border-right: none;
  padding: var(--space-6) 0;
  text-align: center;
}

.wp-block-pullquote blockquote {
  border: none;
  padding: 0;
  margin: 0;
  color: var(--color-black);
}

.wp-block-pullquote p {
  font-size: var(--text-xl);
  font-style: italic;
  max-width: 60ch;
  margin-inline: auto;
}

.wp-block-pullquote cite {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-grey-500);
}

/* ── Lists in Gutenberg content ──────────────────────────────────────────── */

/* The global ul/ol reset handles indentation. These rules ensure Gutenberg's
   own list block classes don't override it back to GeneratePress defaults. */
.wp-block-list {
  padding-left: 1.75em;
  margin-left: 0;
}

.page-content {
  padding-block: var(--space-12);
}


/* -----------------------------------------------------------------------------
   21. Page Hero Variants
   ----------------------------------------------------------------------------- */
/* --color-red (#E8322A) gives 4.0:1 with white — fails AA for normal text.
   --color-red-dark (#C4271F) gives 5.4:1 — passes AA for all text sizes. */
.page-hero--red {
  background-color: var(--color-red-dark);
  color: var(--color-white);
}

.page-hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* No opacity — opacity reductions on coloured backgrounds cause contrast
     failures. White at 0.7 opacity on the red hero would be ~3.1:1 (fail). */
  margin-bottom: var(--space-2);
}

.page-hero__sub {
  font-size: var(--text-lg);
  /* No opacity — white at 0.9 opacity on red-dark is ~4.8:1; on red it fails.
     Full white on --color-red-dark is 5.4:1 across all hero variants. */
  margin-bottom: var(--space-4);
  max-width: 540px;
}

/* -----------------------------------------------------------------------------
   21b. Page Hero — Image-backed variant
   Layered media for amateur photos: <img> with object-position focal point,
   jersey-weave triangle pattern, holographic shimmer, dark scrim. White text
   is forced and the scrim guarantees WCAG AA on top of any underlying image.
   ----------------------------------------------------------------------------- */
.page-hero--has-image {
  position: relative;
  isolation: isolate;
  overflow: clip; /* clip ≠ scroll container; view() can reach root scroller for shimmer */
  /* Image heroes always present white text on dark — overrides --light/--red. */
  background-color: var(--color-black);
  color: var(--color-white);
  /* Slightly more vertical room so subjects aren't cropped at the edges. */
  padding-block: var(--space-16);
  /* Cap height on very tall viewports so the hero never dominates the page. */
  min-height: clamp(280px, 38vh, 520px);
  display: flex;
  align-items: center;
}

/* Suppress the inherited diagonal cut on dark/red variants when an image is present —
   the cut would slice through the image layer and look broken. */
.page-hero--has-image::after,
.page-hero--has-image::before {
  display: none;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;       /* default; overridden by inline style from focal point */
  display: block;
}

/* -- Treatments --------------------------------------------------------------- */

/* Duotone treatments use SVG filters (defs in functions.php → wp_footer).
   Filtered images render with the same size & focal positioning. */
.page-hero--treatment-duotone-red .page-hero__image {
  filter: url(#vt-duotone-red);
}
.page-hero--treatment-duotone-mono .page-hero__image {
  filter: url(#vt-duotone-mono);
}

/* -- Pattern overlay (equilateral triangle tessellation) ---------------------- */
/* 28px equilateral triangles; alternating fill-opacity (.07/.14) gives a
   faceted jersey-weave look. Tile is 56×48.5px (2 cols × 2 rows). */
.page-hero__pattern {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48.5' viewBox='0 0 56 48.5'%3E%3Cpolygon points='0,0 14,0 0,24.25' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='14,0 0,24.25 28,24.25' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='14,0 42,0 28,24.25' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='42,0 28,24.25 56,24.25' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='42,0 56,0 56,24.25' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='0,24.25 0,48.5 14,48.5' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='0,24.25 28,24.25 14,48.5' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='28,24.25 14,48.5 42,48.5' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='28,24.25 56,24.25 42,48.5' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='42,48.5 56,48.5 56,24.25' fill='white' fill-opacity='.07'/%3E%3C/svg%3E");
  background-size: 56px 48.5px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.85;
  pointer-events: none;
}

/* -- Homepage hero pattern + duotone (mirrors .page-hero treatment system) ---- */
.hero__pattern {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48.5' viewBox='0 0 56 48.5'%3E%3Cpolygon points='0,0 14,0 0,24.25' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='14,0 0,24.25 28,24.25' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='14,0 42,0 28,24.25' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='42,0 28,24.25 56,24.25' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='42,0 56,0 56,24.25' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='0,24.25 0,48.5 14,48.5' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='0,24.25 28,24.25 14,48.5' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='28,24.25 14,48.5 42,48.5' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='28,24.25 56,24.25 42,48.5' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='42,48.5 56,48.5 56,24.25' fill='white' fill-opacity='.07'/%3E%3C/svg%3E");
  background-size: 56px 48.5px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.85;
  pointer-events: none;
}

.hero--treatment-duotone-red .hero__image  { filter: url(#vt-duotone-red);  }
.hero--treatment-duotone-mono .hero__image { filter: url(#vt-duotone-mono); }

/* Plain treatment skips the pattern element entirely (PHP omits it). */

/* -- Scrim -------------------------------------------------------------------- */
/* Bottom-weighted dark gradient. Keeps the top of the image visible while
   guaranteeing 4.5:1+ contrast on white text in the lower two-thirds where
   the eyebrow/title/subtitle sit. */
.page-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.65) 35%,
      rgba(0, 0, 0, 0.30) 70%,
      rgba(0, 0, 0, 0.10) 100%
    );
}

/* -- Content sits above the media stack -------------------------------------- */
.page-hero--has-image .page-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Heading safety net — even with the scrim, give white text a faint shadow.
   1px shadow is invisible on solid backgrounds (text-only heroes) but adds a
   small contrast boost on busy images. */
.page-hero--has-image .page-hero__title,
.page-hero--has-image .page-hero__eyebrow,
.page-hero--has-image .page-hero__sub {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Editor preview: ACF field block in the sidebar gets a subtle treatment label. */

/* -- Scroll-driven shimmer ---------------------------------------------------- */
/* Diagonal light sweep sits ABOVE the scrim/overlay on .page-hero__media and
   .hero__media (both have z-index:0 stacking contexts). Uses mix-blend-mode:screen
   so it additively brightens — visible on dark images unlike overlay. Disabled
   for reduced-motion users; invisible fallback in pre-scroll-timeline browsers. */
/* Dead zone eliminated: at from(-10%) the magenta band is ~50px from the right
   edge, so the colour appears almost immediately on first scroll. */
@keyframes vt-pattern-shimmer {
  from { background-position: -10% 50%; }
  to   { background-position: 110% 50%; }
}

@keyframes vt-badge-shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 150% 50%; }
}

/* Badge shimmer plays on card hover — paused by default, disabled for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .event-card__vikings-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent          0%,
      transparent         20%,
      rgba(220, 50, 255, 0.45) 35%,
      rgba(60, 180, 255, 0.45) 50%,
      rgba(255, 220, 50, 0.45) 65%,
      transparent         80%,
      transparent        100%
    );
    background-size: 300% 100%;
    mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48.5' viewBox='0 0 56 48.5'%3E%3Cpolygon points='0,0 14,0 0,24.25' fill='white' fill-opacity='.5'/%3E%3Cpolygon points='14,0 0,24.25 28,24.25' fill='white' fill-opacity='.9'/%3E%3Cpolygon points='14,0 42,0 28,24.25' fill='white' fill-opacity='.5'/%3E%3Cpolygon points='42,0 28,24.25 56,24.25' fill='white' fill-opacity='.9'/%3E%3Cpolygon points='42,0 56,0 56,24.25' fill='white' fill-opacity='.5'/%3E%3Cpolygon points='0,24.25 0,48.5 14,48.5' fill='white' fill-opacity='.9'/%3E%3Cpolygon points='0,24.25 28,24.25 14,48.5' fill='white' fill-opacity='.5'/%3E%3Cpolygon points='28,24.25 14,48.5 42,48.5' fill='white' fill-opacity='.9'/%3E%3Cpolygon points='28,24.25 56,24.25 42,48.5' fill='white' fill-opacity='.5'/%3E%3Cpolygon points='42,48.5 56,48.5 56,24.25' fill='white' fill-opacity='.9'/%3E%3C/svg%3E");
    mask-size: 28px 24.25px;
    mask-repeat: repeat;
    mix-blend-mode: screen;
    pointer-events: none;
    animation: vt-badge-shimmer 1.8s linear infinite;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .page-hero__media::after,
    .hero__media::after,
    .post-hero__media::after,
    .news-card__image-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 3;
      /* Three-colour spectral sweep (magenta → blue → yellow) masked to the
         triangle shapes. screen blend adds colour to each facet as the band
         crosses it — up-pointing faces at 90% mask opacity catch more than
         down-pointing at 50%, giving the holographic depth. */
      background: linear-gradient(
        105deg,
        transparent   0%,
        transparent  25%,
        rgba(220, 50, 255, 0.13) 37.5%,  /* magenta */
        rgba(60, 180, 255, 0.13) 50%,    /* blue    */
        rgba(255, 220, 50, 0.13) 62.5%,  /* yellow  */
        transparent  75%,
        transparent 100%
      );
      background-size: 300% 100%;
      mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48.5' viewBox='0 0 56 48.5'%3E%3Cpolygon points='0,0 14,0 0,24.25' fill='white' fill-opacity='.5'/%3E%3Cpolygon points='14,0 0,24.25 28,24.25' fill='white' fill-opacity='.9'/%3E%3Cpolygon points='14,0 42,0 28,24.25' fill='white' fill-opacity='.5'/%3E%3Cpolygon points='42,0 28,24.25 56,24.25' fill='white' fill-opacity='.9'/%3E%3Cpolygon points='42,0 56,0 56,24.25' fill='white' fill-opacity='.5'/%3E%3Cpolygon points='0,24.25 0,48.5 14,48.5' fill='white' fill-opacity='.9'/%3E%3Cpolygon points='0,24.25 28,24.25 14,48.5' fill='white' fill-opacity='.5'/%3E%3Cpolygon points='28,24.25 14,48.5 42,48.5' fill='white' fill-opacity='.9'/%3E%3Cpolygon points='28,24.25 56,24.25 42,48.5' fill='white' fill-opacity='.5'/%3E%3Cpolygon points='42,48.5 56,48.5 56,24.25' fill='white' fill-opacity='.9'/%3E%3C/svg%3E");
      mask-size: 56px 48.5px;
      mask-repeat: repeat;
      mix-blend-mode: screen;
      pointer-events: none;
      animation: vt-pattern-shimmer 1s linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 40%;
    }
    /* News card images scroll into view — use entry range so shimmer fires on reveal */
    .news-card__image-wrap::after {
      animation-range: entry 10% entry 70%;
    }
  }
}

/* Mobile — ease the vertical padding so heroes don't push content off-screen. */
@media (max-width: 768px) {
  .page-hero--has-image {
    padding-block: var(--space-8);
    min-height: clamp(220px, 32vh, 360px);
  }
}

/* -----------------------------------------------------------------------------
   22. Novice Program Options
   ----------------------------------------------------------------------------- */
.novice-options {
  padding-block: var(--space-12);
}

.novice-options__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  max-width: 760px;
}

.novice-option-card {
  padding: var(--space-6);
  background-color: var(--color-cream);
  border-radius: var(--radius-md);
  position: relative;
}

.novice-option-card--featured {
  background-color: var(--color-black);
  color: var(--color-white);
}

.novice-option-card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background-color: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
}

.novice-option-card__price {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-red);
  margin-bottom: var(--space-1);
  white-space: nowrap;
}

.novice-option-card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.novice-option-card__includes {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.8;
}

.novice-sessions {
  padding-block: var(--space-12);
  background-color: var(--color-grey-100);
}

/* This section's background is meant to bleed full-width (like
   .novice-inclusions), but unlike that PHP-rendered block, this one is a
   plain Gutenberg group authored in the editor with no inner .container
   wrapper — so its children were rendering edge-to-edge instead of lining
   up with the rest of the page's 1280px content column. Constrain each
   direct child the same way .container does. */
.novice-sessions > * {
  max-width: var(--grid-max);
  margin-inline: auto;
  padding-inline: var(--grid-gutter);
  box-sizing: border-box;
}

.novice-sessions__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.novice-sponsor {
  padding-block: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-grey-500);
}

@media (max-width: 600px) {
  .novice-options__grid,
  .novice-sessions__grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
   23. Filter Tabs
   ----------------------------------------------------------------------------- */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
}

/* Scope colour rules to .site-main .filter-tabs, with the class doubled
   (specificity 0,4,0) so they also beat the underlined red .entry-content link
   style now that the Events List block renders inside page content. */
.site-main .filter-tabs .filter-tab.filter-tab {
  display: block;
  padding: 0.5em 1.25em;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  /* grey-500 (#767270) gives 4.7:1 vs white — passes SC 1.4.11 (3:1 for UI boundaries) */
  border: 2px solid var(--color-grey-500);
  border-radius: 999px;
  color: var(--color-grey-500);
  transition: all var(--transition-fast);
}

.site-main .filter-tabs .filter-tab.filter-tab:not(.filter-tab--active):hover,
.site-main .filter-tabs .filter-tab.filter-tab:not(.filter-tab--active):focus-visible {
  border-color: var(--color-black);
  color: var(--color-black);
}

.site-main .filter-tabs .filter-tab.filter-tab--active {
  background-color: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}

/* -----------------------------------------------------------------------------
   24. Events Section Layout
   ----------------------------------------------------------------------------- */
.event-card-grid--full {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}

.events-external-link {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-grey-200);
  font-size: var(--text-sm);
  color: var(--color-grey-500);
}

.races-archive {
  padding-block: var(--space-12);
}

.race-card-grid--list {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
  .race-card-grid--list {
    grid-template-columns: 1fr;
  }

}

/* -----------------------------------------------------------------------------
   25. Membership Page
   ----------------------------------------------------------------------------- */
.membership-intro {
  padding-block: var(--space-12);
}

.membership-intro__content {
  max-width: 760px;
}

.membership-intro ul {
  margin-bottom: var(--space-4);
  line-height: 1.8;
}

.membership-intro__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.membership-intro__renew {
  color: var(--color-black);
  border-color: var(--color-black);
}

.membership-intro__renew:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.novice-callout {
  padding-block: var(--space-12);
  background-color: var(--color-cream);
}

.novice-callout__inner {
  max-width: 600px;
}

.novice-callout__inner h2 {
  margin-bottom: var(--space-3);
}

.novice-callout__inner p {
  margin-bottom: var(--space-4);
}

/* Membership tiers — comparison table --------------------------------------- */
.membership-tiers {
  padding-block: var(--space-12);
  background-color: var(--color-cream);
}

.membership-comparison {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--space-6);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.membership-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  font-size: var(--text-sm);
  text-align: center;
}

.membership-table thead th {
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-4);
}

.membership-table__feature-col {
  width: 30%;
  min-width: 160px;
}

.membership-table__group th {
  background-color: var(--color-cream);
  color: var(--color-black);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: var(--space-2) var(--space-4);
  border-top: 2px solid var(--color-grey-200);
}

.membership-table tbody tr:not(.membership-table__group) th[scope="row"] {
  text-align: left;
  font-weight: 400;
  padding: var(--space-3) var(--space-4);
  color: var(--color-black);
}

.membership-table tbody tr:not(.membership-table__group) td {
  padding: var(--space-3) var(--space-2);
  border-left: 1px solid var(--color-grey-200);
}

.membership-table tbody tr:not(.membership-table__group):nth-child(even) {
  background-color: var(--color-grey-100);
}

.mt-yes,
.mt-no {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}

.mt-yes {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%232a8a3e' d='M16.7 5.3a1 1 0 0 0-1.4 0L8 12.6 4.7 9.3a1 1 0 0 0-1.4 1.4l4 4a1 1 0 0 0 1.4 0l8-8a1 1 0 0 0 0-1.4z'/%3E%3C/svg%3E");
}

.mt-no {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23e8322a' d='M14.3 5.7a1 1 0 0 0-1.4 0L10 8.6 7.1 5.7a1 1 0 0 0-1.4 1.4L8.6 10l-2.9 2.9a1 1 0 0 0 1.4 1.4L10 11.4l2.9 2.9a1 1 0 0 0 1.4-1.4L11.4 10l2.9-2.9a1 1 0 0 0 0-1.4z'/%3E%3C/svg%3E");
}

.mt-note {
  font-size: var(--text-xs);
  color: var(--color-grey-500);
  line-height: 1.3;
  padding-inline: var(--space-2);
}

.membership-family-note {
  font-size: var(--text-sm);
  color: var(--color-grey-500);
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Novice callout (block version) ------------------------------------------- */
.membership-novice-callout {
  padding-block: var(--space-12);
}

/* Strip GeneratePress's injected padding on inner-container so our
   padding-block on the outer group is not doubled. */
.membership-intro > .wp-block-group__inner-container,
.membership-tiers > .wp-block-group__inner-container,
.membership-novice-callout > .wp-block-group__inner-container {
  padding-block: 0;
}

/* Calendar subscribe links — events page content block ---------------------- */
.calendar-subscribe {
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}

.calendar-subscribe__label {
  color: var(--color-grey-500);
}

.calendar-subscribe__link {
  font-weight: 600;
  color: var(--color-black);
  text-decoration: none;
}

.calendar-subscribe__link:hover,
.calendar-subscribe__link:focus-visible {
  color: var(--color-red);
  text-decoration: underline;
}

.calendar-subscribe__divider {
  color: var(--color-grey-200);
}

.events-external-link {
  font-size: var(--text-sm);
  color: var(--color-grey-500);
  margin: 0;
}

.events-external-link a {
  color: var(--color-grey-500);
}

.events-external-link a:hover {
  color: var(--color-red);
}

/* -----------------------------------------------------------------------------
   26. Coach Grid
   ----------------------------------------------------------------------------- */
.coaches-archive {
  padding-block: var(--space-12);
}

.coach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.coach-card__link {
  display: block;
  text-decoration: none;
}

.coach-card__photo-wrap {
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--color-cream);
}

.coach-card__body {
  padding: var(--space-4);
}

.coach-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.coach-card__link:hover .coach-card__photo {
  transform: scale(1.03);
}

.coach-card__photo-wrap--placeholder {
  background-color: var(--color-grey-200);
}

.coach-card__name {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.coach-card__disciplines {
  font-size: var(--text-sm);
  color: var(--color-red);
  font-weight: 600;
  margin: 0;
}

/* -----------------------------------------------------------------------------
   27. Coach Single
   ----------------------------------------------------------------------------- */
.coach-single__hero {
  background-color: var(--color-black);
  color: var(--color-white);
  padding-block: var(--space-12);
}

.coach-single__hero-inner {
  display: flex;
  gap: var(--space-8);
  align-items: center;
}

.coach-single__photo-wrap {
  flex-shrink: 0;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--color-red);
}

.coach-single__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coach-single__name {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-2);
}

.coach-single__disciplines {
  font-size: var(--text-lg);
  color: var(--color-red);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.coach-single__qualifications {
  font-size: var(--text-sm);
  opacity: 0.7;
  margin: 0;
}

.coach-single__bio {
  padding-block: var(--space-12);
}

.coach-single__back {
  padding-bottom: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.coach-single__back a {
  color: var(--color-red);
}

@media (max-width: 768px) {
  .coach-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .coach-single__hero-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* -----------------------------------------------------------------------------
   27b. Race Single
   Thin, Gutenberg-friendly: hero band reuses .page-hero--dark; everything below
   is editor-managed via the_content().
   ----------------------------------------------------------------------------- */
.race-single__hero {
  /* Inherits .page-hero--dark. Extra inline meta row sits below the subtitle. */
  padding-block: var(--space-8);
}

.race-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.race-single__distance {
  /* Re-uses .race-card__distance pill styling — declared for clarity only. */
}

.race-single__cta {
  margin: 0;
}

.race-single__body {
  padding-block: var(--space-8);
}

.race-single__back {
  padding-bottom: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.race-single__back a {
  color: var(--color-red);
}

/* -----------------------------------------------------------------------------
   29. Contact Page
   ----------------------------------------------------------------------------- */
.contact-links {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact-links a,
.entry-content .contact-links a:not(.btn):not(.wp-block-button__link) {
  color: var(--color-red);
  font-weight: 600;
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   30. Sponsors Page
   ----------------------------------------------------------------------------- */
.sponsors-page {
  padding-block: var(--space-12);
}

.sponsors-tier {
  margin-bottom: var(--space-12);
}

.sponsors-tier__heading {
  font-size: var(--text-xl);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-grey-200);
}

.sponsors-tier__grid {
  display: grid;
  gap: var(--space-6);
}

.sponsors-tier__grid--major {
  grid-template-columns: repeat(2, 1fr);
}

.sponsors-tier__grid--partner {
  grid-template-columns: repeat(3, 1fr);
}

.sponsors-tier__grid--friends {
  grid-template-columns: repeat(4, 1fr);
}

.sponsor-item__logo-wrap {
  height: 100px;
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3);
}

.sponsor-item__logo-wrap img {
  max-height: 100%;
  width: auto;
  max-width: 200px;
}

.sponsor-item__name {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.sponsor-item__description {
  font-size: var(--text-sm);
  color: var(--color-grey-500);
  margin-bottom: var(--space-2);
}

.sponsor-item__link {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-red);
}

@media (max-width: 900px) {
  .sponsors-tier__grid--major,
  .sponsors-tier__grid--partner,
  .sponsors-tier__grid--friends {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
   31. Event Card — footer, details link, races grid
   ----------------------------------------------------------------------------- */

.event-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-1);
  gap: var(--space-2);
}

.event-card__footer-meta {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.event-card__vikings-label {
  font-size: var(--text-xs);
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--color-red);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-left: var(--space-2);
  margin-left: var(--space-2);
  border-left: 1px solid var(--color-grey-200);
  white-space: nowrap;
}

.event-card__description {
  font-size: var(--text-sm);
  color: var(--color-grey-600);
  margin: var(--space-1) 0 0;
}

.event-card__details-link {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-red-dark);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.event-card__details-link:hover,
.event-card__details-link:focus-visible {
  text-decoration: underline;
}

/* Whole-card stretched link — covers the article, z-index above the card BG */
.event-card__link {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}

.event-card__link:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

/* Linked card hover — subtle lift and shadow */
.event-card--linked {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.event-card--linked:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.11);
  transform: translateY(-2px);
}

/* More info indicator — sits in the card footer, above the stretched link */
.event-card__more-info {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-red);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Races fallback grid on home page */
.event-card-grid--races {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .event-card-grid--races {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------------------------------
   32. Join CTA — button override for coloured background
   ----------------------------------------------------------------------------- */
/* White solid button on the red join-cta band for safe contrast */
.join-cta .btn--outline {
  background-color: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}

.join-cta .btn--outline:hover,
.join-cta .btn--outline:focus-visible {
  background-color: var(--color-cream);
  border-color: var(--color-cream);
}

/* -----------------------------------------------------------------------------
   33. Hero — diagonal lower edge + visual refinement
   ----------------------------------------------------------------------------- */
.hero {
  clip-path: polygon(0 0, 100% 0, 100%, 0 100%);
  margin-bottom: calc(-1 * var(--space-8));  /* pull next section up under the cut */
}

.hero__content {
  padding-bottom: calc(var(--space-16) + var(--space-8));  /* compensate for clip */
}

/* Page-hero subtle bottom diagonal */
.page-hero--dark::after {
  content: '';
  display: block;
  height: 48px;
  background-color: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%);
  margin-bottom: -48px;
}

/* -----------------------------------------------------------------------------
   34. Scroll Reveal — driven by JS IntersectionObserver
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    translate: 0 1.5rem;
    transition: opacity 0.55s ease, translate 0.55s ease;
  }

  .reveal[data-revealed] {
    opacity: 1;
    translate: 0 0;
  }

  /* Stagger siblings inside grids */
  .wp-block-group[class*="is-style-vt-discipline-"].reveal:nth-child(2) { transition-delay: 0.1s; }
  .wp-block-group[class*="is-style-vt-discipline-"].reveal:nth-child(3) { transition-delay: 0.2s; }

  .event-card-grid .event-card.reveal:nth-child(2)  { transition-delay: 0.06s; }
  .event-card-grid .event-card.reveal:nth-child(3)  { transition-delay: 0.12s; }
  .event-card-grid .event-card.reveal:nth-child(4)  { transition-delay: 0.18s; }

  .race-card-grid .race-card.reveal:nth-child(2) { transition-delay: 0.1s; }
  .race-card-grid .race-card.reveal:nth-child(3) { transition-delay: 0.2s; }

  .novice-inclusions__grid .novice-inclusion.reveal:nth-child(n+2) { transition-delay: calc((var(--index, 0)) * 0.05s); }
}

/* -----------------------------------------------------------------------------
   35. Card Hover Lift
   ----------------------------------------------------------------------------- */
.race-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.race-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(26, 26, 26, 0.12);
}

/* Coach card already has photo zoom — add lift too */
.coach-card__link:hover {
  text-decoration: none;
}

/* Padded white card (like .news-card) so the hover shadow never sits flush against the text */
.coach-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.coach-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(26, 26, 26, 0.12);
}

/* -----------------------------------------------------------------------------
   36. Novice Inclusions Icon Grid
   ----------------------------------------------------------------------------- */
.novice-inclusions {
  padding-block: var(--space-12);
  background-color: var(--color-grey-100);
}

.novice-inclusions h2 {
  margin-bottom: var(--space-2);
}

.novice-inclusions__intro {
  color: var(--color-grey-500);
  font-size: var(--text-base);
  margin-bottom: var(--space-8);
}

.novice-inclusions__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.novice-inclusion {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.novice-inclusion:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(26, 26, 26, 0.10);
}

.novice-inclusion__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--color-cream);
  color: var(--color-red);
  flex-shrink: 0;
}

.novice-inclusion__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-black);
  line-height: 1.2;
}

@media (max-width: 900px) {
  .novice-inclusions__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .novice-inclusions__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -----------------------------------------------------------------------------
   37. Global link style — remove underlines on dark-BG sections
   ----------------------------------------------------------------------------- */
.site-main a:not(.btn):not(.filter-tab) {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Prose links should be visible */
.prose a {
  color: var(--color-red-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Hero & dark sections — no underline on links */
.hero a:not(.btn),
.page-hero--dark a:not(.btn),
.novice-promo a:not(.btn),
.join-cta a:not(.btn) {
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   38. News Card Component
   ----------------------------------------------------------------------------- */
.news-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(26, 26, 26, 0.12);
}

.news-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.news-card__link:focus-visible {
  outline: 3px solid var(--color-red);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

.news-card__image-wrap {
  aspect-ratio: 9 / 5;
  overflow: clip; /* clip ≠ scroll container; view() timeline reaches root scroller */
  position: relative;
  isolation: isolate;
  background-color: var(--color-grey-100);
  flex-shrink: 0;
}

/* Triangle pattern overlay — same tessellation as page hero */
.news-card__image-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48.5' viewBox='0 0 56 48.5'%3E%3Cpolygon points='0,0 14,0 0,24.25' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='14,0 0,24.25 28,24.25' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='14,0 42,0 28,24.25' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='42,0 28,24.25 56,24.25' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='42,0 56,0 56,24.25' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='0,24.25 0,48.5 14,48.5' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='0,24.25 28,24.25 14,48.5' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='28,24.25 14,48.5 42,48.5' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='28,24.25 56,24.25 42,48.5' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='42,48.5 56,48.5 56,24.25' fill='white' fill-opacity='.07'/%3E%3C/svg%3E");
  background-size: 56px 48.5px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.85;
  pointer-events: none;
}

.news-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

.news-card:hover .news-card__image {
  transform: scale(1.03);
}

.news-card__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-grey-200);
}

.news-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.news-card__date {
  font-size: var(--text-xs);
  color: var(--color-grey-500);
  font-weight: 500;
}

.news-card__cat {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-red);
}

.news-card__title {
  font-size: var(--text-xl);
  margin: 0 0 var(--space-2);
  line-height: 1.15;
}

.news-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-grey-500);
  line-height: 1.6;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* -----------------------------------------------------------------------------
   39. News Archive Layout
   ----------------------------------------------------------------------------- */
.news-archive {
  padding-block: var(--space-12);
}

.news-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

@media (max-width: 900px) {
  .news-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .news-card-grid {
    grid-template-columns: 1fr;
  }
}

.news-empty {
  color: var(--color-grey-500);
  font-size: var(--text-base);
  padding-block: var(--space-8);
}

/* Pagination */
.news-pagination {
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-grey-200);
}

.news-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.news-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid var(--color-grey-200);
  border-radius: var(--radius-sm);
  color: var(--color-black);
  text-decoration: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.news-pagination .page-numbers:hover,
.news-pagination .page-numbers:focus-visible {
  border-color: var(--color-black);
}

.news-pagination .page-numbers.current {
  background-color: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}

/* -----------------------------------------------------------------------------
   40. Single Post
   ----------------------------------------------------------------------------- */

/* Full-bleed featured image hero */
.post-hero {
  position: relative;
  min-height: min(60vh, 540px);
  display: flex;
  align-items: flex-end;
  overflow: clip; /* clip ≠ scroll container; view() timeline reaches root scroller */
  isolation: isolate;
  background-color: var(--color-black);
}

.post-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Triangle pattern overlay — matches page-hero treatment */
.post-hero__pattern {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48.5' viewBox='0 0 56 48.5'%3E%3Cpolygon points='0,0 14,0 0,24.25' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='14,0 0,24.25 28,24.25' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='14,0 42,0 28,24.25' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='42,0 28,24.25 56,24.25' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='42,0 56,0 56,24.25' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='0,24.25 0,48.5 14,48.5' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='0,24.25 28,24.25 14,48.5' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='28,24.25 14,48.5 42,48.5' fill='white' fill-opacity='.07'/%3E%3Cpolygon points='28,24.25 56,24.25 42,48.5' fill='white' fill-opacity='.14'/%3E%3Cpolygon points='42,48.5 56,48.5 56,24.25' fill='white' fill-opacity='.07'/%3E%3C/svg%3E");
  background-size: 56px 48.5px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.85;
  pointer-events: none;
}

.post-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.post-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 26, 26, 0.15) 0%,
    rgba(26, 26, 26, 0.75) 70%,
    rgba(26, 26, 26, 0.92) 100%
  );
}

.post-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--space-8);
  color: var(--color-white);
}

.post-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.post-hero__date {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}

.post-hero__cat {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-red);
  background-color: rgba(26, 26, 26, 0.5);
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
}

.post-hero__title {
  font-size: var(--text-3xl);
  margin: 0;
  max-width: 820px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Article body */
.post-body .prose {
  max-width: 720px;
}

/* Post navigation */
.post-nav {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-grey-200);
}

.post-nav .nav-links {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.post-nav .nav-previous,
.post-nav .nav-next {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 46%;
}

.post-nav .nav-next {
  text-align: right;
  margin-left: auto;
}

.post-nav__label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-grey-500);
}

.post-nav__title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-red-dark);
  text-decoration: none;
}

.post-nav a:hover .post-nav__title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Back to News link */
.post-back {
  margin-top: var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.post-back a {
  color: var(--color-red);
  text-decoration: none;
}

.post-back a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 768px) {
  .post-hero {
    min-height: min(50vh, 380px);
    align-items: flex-end;
  }

  .post-hero__title {
    font-size: var(--text-2xl);
  }

  .post-nav .nav-previous,
  .post-nav .nav-next {
    max-width: 100%;
  }
}

/* =============================================================================
   41. Kitchen Sink
   ============================================================================= */

/* Kitchen Sink nav bar */
.ks-nav {
  background: var(--color-grey-100);
  border-bottom: 1px solid var(--color-grey-200);
}

.ks-nav .container {
  padding-inline: var(--grid-gutter);
}

.ks-nav__list {
  display: flex;
  gap: 0;
  overflow-x: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

/* Target both wp_nav_menu() output and hardcoded fallback links */
.ks-nav a,
.ks-nav__link {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-grey-500);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  display: inline-block;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.ks-nav a:hover,
.ks-nav__link:hover {
  color: var(--color-black);
  background: rgba(0, 0, 0, 0.02);
}

/* Active state: wp_nav_menu() sets .current-menu-item; fallback uses aria-current */
.ks-nav .current-menu-item > a,
.ks-nav a[aria-current="page"],
.ks-nav__link[aria-current="page"] {
  color: var(--color-red);
  border-bottom-color: var(--color-red);
}

/* =============================================================================
   42. Token Display Utilities (Kitchen Sink Page 2)
   ============================================================================= */

.ks-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-4);
}

.ks-swatch {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ks-swatch__colour {
  height: 60px;
}

.ks-swatch__label {
  padding: var(--space-2);
  background: var(--color-white);
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.4;
}

.ks-scale-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-2);
}

.ks-scale-bar {
  background: var(--color-red);
  height: 24px;
  border-radius: var(--radius-sm);
}

.ks-token-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-grey-500);
  min-width: 120px;
}

/* =============================================================================
   43. Stat Row
   ============================================================================= */

.stat-row {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding-block: var(--space-10);
}

.stat-row__item {
  text-align: center;
}

.stat-row__number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 900;
  color: var(--color-red);
  line-height: 1;
}

.stat-row__label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-grey-500);
  margin-top: var(--space-1);
}

/* =============================================================================
   44. Feature Row (Alternating)
   ============================================================================= */

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-8);
}

.feature-row--reverse {
  direction: rtl;
}

.feature-row--reverse > * {
  direction: ltr;
}

.feature-row__image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  width: 100%;
}

@media (max-width: 768px) {
  .feature-row {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   45. Full-Width Breakout Band
   ============================================================================= */

.breakout-band {
  margin-inline: calc(50% - 50vw);
  padding: var(--space-12) calc(50vw - 50%);
  background: var(--color-black);
  color: var(--color-white);
  text-align: center;
}

.breakout-band--red {
  background: var(--color-red);
}

/* =============================================================================
   46. Accordion / FAQ
   ============================================================================= */

.accordion details {
  border-top: 1px solid var(--color-grey-200);
}

.accordion details:last-child {
  border-bottom: 1px solid var(--color-grey-200);
}

.accordion summary {
  font-family: var(--font-display);
  font-weight: 700;
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion summary::after {
  content: '+';
  font-size: var(--text-xl);
  color: var(--color-red);
  transition: transform 0.2s;
}

.accordion details[open] summary::after {
  transform: rotate(45deg);
}

.accordion__body {
  padding-bottom: var(--space-4);
  color: var(--color-grey-600);
}

/* =============================================================================
   47. Timeline
   ============================================================================= */

.timeline {
  position: relative;
  padding-left: var(--space-8);
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-grey-200);
}

.timeline__item {
  position: relative;
  padding-bottom: var(--space-6);
}

.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(var(--space-8) * -1 - 5px);
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-red);
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-red);
}

.timeline__year {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-red);
}

.timeline__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin: var(--space-1) 0;
}

/* =============================================================================
   48. Icon Feature Grid
   ============================================================================= */

.icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.icon-grid__item {
  text-align: center;
  padding: var(--space-6);
}

.icon-grid__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
}

.icon-grid__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

@media (max-width: 768px) {
  .icon-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   49. Testimonial / Pull Quote
   ============================================================================= */

.testimonial {
  border-left: 4px solid var(--color-red);
  padding: var(--space-6) var(--space-8);
  background: var(--color-cream);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.testimonial__quote {
  font-size: var(--text-xl);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.testimonial__quote::before {
  content: '\201C';
  font-size: 3em;
  color: var(--color-red);
  line-height: 0;
  vertical-align: -0.4em;
  margin-right: 0.1em;
}

.testimonial__attribution {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-grey-500);
}

/* =============================================================================
   50. Alert / Notice Block
   ============================================================================= */

.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid;
  margin-block: var(--space-4);
}

.alert--info {
  background: #e8f4fd;
  border-color: #2196f3;
  color: #0d47a1;
}

.alert--success {
  background: #e8f5e9;
  border-color: #4caf50;
  color: #1b5e20;
}

.alert--warning {
  background: #fff8e1;
  border-color: #ff9800;
  color: #e65100;
}

.alert--error {
  background: #fce4ec;
  border-color: #f44336;
  color: #b71c1c;
}

.alert__title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

/* =============================================================================
   51. Steps / Numbered Process
   ============================================================================= */

.steps {
  counter-reset: steps;
  list-style: none;
  padding: 0;
}

.steps__item {
  counter-increment: steps;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  position: relative;
}

.steps__item::before {
  content: counter(steps);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--color-red);
  line-height: 1;
  /* Pin to column 1 and span all rows so subsequent children stay in column 2 */
  grid-column: 1;
  grid-row: 1 / span 99;
  align-self: start;
}

/* All direct content children must sit in column 2 */
.steps__item > * {
  grid-column: 2;
}

.steps__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 1.4rem;
  top: 2rem;
  bottom: 0;
  width: 2px;
  background: var(--color-grey-200);
}

.steps__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

/* =============================================================================
   52. Block Styles — branded Group section backgrounds
   Registered via register_block_style() in functions.php.
   Editors apply these from the block Style panel (right sidebar → Styles).
   ============================================================================= */

/* Shared section padding for all branded section styles */
.wp-block-group.is-style-vt-cream,
.wp-block-group.is-style-vt-dark,
.wp-block-group.is-style-vt-red {
  padding-block: var(--space-12);
}

/* Inner content constrained to grid-max with standard gutters */
.wp-block-group.is-style-vt-cream > *,
.wp-block-group.is-style-vt-dark > *,
.wp-block-group.is-style-vt-red > * {
  max-width: var(--grid-max);
  margin-inline: auto;
  padding-inline: var(--grid-gutter);
  box-sizing: border-box;
}

/* Cream section — warm off-white, dark text */
.wp-block-group.is-style-vt-cream {
  background-color: var(--color-cream);
  color: var(--color-black);
}

/* Cream card — compact rounded panel for columns/sidebars (not a full section) */
.wp-block-group.is-style-vt-cream-card {
  background-color: var(--color-cream);
  color: var(--color-black);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.wp-block-group.is-style-vt-cream-card + .wp-block-group.is-style-vt-cream-card {
  margin-top: var(--space-4);
}

.wp-block-group.is-style-vt-cream-card :is(h2, h3, h4) {
  font-size: var(--text-base);
  margin-top: 0;
}

.wp-block-group.is-style-vt-cream-card ul {
  font-size: var(--text-sm);
  line-height: 1.8;
}

/* Dark section — near-black, white text, red links/buttons */
.wp-block-group.is-style-vt-dark {
  background-color: var(--color-black);
  color: var(--color-white);
}

.wp-block-group.is-style-vt-dark h1,
.wp-block-group.is-style-vt-dark h2,
.wp-block-group.is-style-vt-dark h3,
.wp-block-group.is-style-vt-dark h4 {
  color: var(--color-white);
}

.wp-block-group.is-style-vt-dark a:not(.wp-block-button__link) {
  color: var(--color-red);
}

/* Red section — red-dark gives 5.4:1 with white (AA pass for all sizes).
   Brand red #E8322A only achieves 4.0:1 and fails AA for normal-weight text. */
.wp-block-group.is-style-vt-red {
  background-color: var(--color-red-dark);
  color: var(--color-white);
}

.wp-block-group.is-style-vt-red h1,
.wp-block-group.is-style-vt-red h2,
.wp-block-group.is-style-vt-red h3,
.wp-block-group.is-style-vt-red h4 {
  color: var(--color-white);
}

/* =============================================================================
   53. Embed Responsive
   ============================================================================= */

/* Cap video/embed width so they don't stretch to full grid-max on wide screens */
.wp-block-embed,
.wp-block-video {
  max-width: 980px;
  margin-inline: auto;
}

.embed-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.embed-responsive iframe,
.embed-responsive video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* -----------------------------------------------------------------------------
   54. 404 Page
   ----------------------------------------------------------------------------- */
.error-404 {
  padding-block: var(--space-12);
  background-color: var(--color-cream);
}

.error-404__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.error-404__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-red-dark);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}

.error-404__title {
  font-size: var(--text-3xl);
  margin: 0 0 var(--space-3);
}

.error-404__text {
  font-size: var(--text-lg);
  color: var(--color-grey-500);
  margin-bottom: var(--space-4);
  max-width: 40ch;
}

.error-404__search {
  display: flex;
  gap: var(--space-2);
  max-width: 32rem;
}

.error-404__search-input {
  flex: 1;
  min-width: 0;
  padding: 0.75em 1em;
  font-family: var(--font-body);
  font-size: var(--text-base);
  border: 2px solid var(--color-grey-200);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-black);
}

.error-404__search-input:focus-visible {
  outline: none;
  border-color: var(--color-red-dark);
}

.error-404__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

@media (max-width: 900px) {
  .error-404__inner {
    grid-template-columns: 1fr;
  }

  .error-404__media {
    order: -1;
  }
}

.error-404-links {
  padding-block: var(--space-12);
}

.error-404-links__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* Deliberately smaller than the site's default h2 (--text-3xl) — this is a
   dense, utilitarian 3-column list section, not a page-level heading.
   Scoped to this section only; no other heading anywhere else changes. */
.error-404-links__heading {
  font-size: var(--text-xl);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 3px solid var(--color-grey-200);
}

/* No bullets, no reserved marker space — the sitewide `ul, ol { padding-left:
   1.75em }` rule leaves a left gutter even once list-style is removed unless
   padding is zeroed alongside it (that mismatch was the original bug here:
   bullet-less lists that still kept their indent). Links get the same
   underlined-red treatment as body copy links for consistency/affordance. */
.error-404-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.error-404-links__list a {
  color: var(--color-red);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.error-404-links__list a:hover,
.error-404-links__list a:focus-visible {
  color: var(--color-red-dark);
}

.error-404-links__empty {
  color: var(--color-grey-500);
  font-size: var(--text-sm);
}

@media (max-width: 700px) {
  .error-404-links__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* -----------------------------------------------------------------------------
   55. Person Block (vt/person) — life members, committee
   Photo left, name + description right; stacks on small screens.
   Editor mirror: plugins/vikings-tri-plugin/blocks/src/editor.css
   ----------------------------------------------------------------------------- */
.person {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-4);
}

.person + .person {
  border-top: 1px solid var(--color-grey-200);
}

.person--no-photo {
  grid-template-columns: 1fr;
}

.person__photo-wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-cream);
}

.person__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.person__name {
  font-size: var(--text-xl);
  margin: 0 0 var(--space-1);
}

.person__description {
  margin: 0;
}

@media (max-width: 600px) {
  .person {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .person__photo-wrap {
    max-width: 200px;
  }
}

/* Inside a core Grid block (Group → Grid), people become stacked cards like
   the coach cards: photo on top, text padded below, no dividers. Columns are
   set per page via the Grid block's minimum column width. */
.is-layout-grid > .person {
  grid-template-columns: 1fr;
  gap: 0;
  padding-block: 0;
  background-color: var(--color-grey-100);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.is-layout-grid > .person + .person {
  border-top: 0;
}

.is-layout-grid > .person .person__photo-wrap {
  max-width: none;
  border-radius: 0;
}

.is-layout-grid > .person .person__body {
  padding: var(--space-3);
}

/* -----------------------------------------------------------------------------
   56. Document List Block (vt/document-list)
   Editor mirror: plugins/vikings-tri-plugin/blocks/src/editor.css
   ----------------------------------------------------------------------------- */
.document-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.document-list__item {
  padding-block: var(--space-3);
}

.document-list__item + .document-list__item {
  border-top: 1px solid var(--color-grey-200);
}

.document-list__title {
  font-size: var(--text-lg);
  font-weight: 700;
}

.document-list__description {
  margin: var(--space-1) 0 0;
}

.document-list__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-grey-500);
}

/* -----------------------------------------------------------------------------
   57. Heading anchor links
   Ids come from vikings-tri-plugin (heading-anchors.php); the link icon and
   copy-to-clipboard behaviour from main.js.
   ----------------------------------------------------------------------------- */
:is(.entry-content, .prose) :is(h2, h3, h4, h5, h6)[id] {
  /* Land below the sticky header when jumping to a heading */
  scroll-margin-top: calc(var(--vt-header-h, 96px) + var(--space-2));
}

/* Colour/decoration: (0,5,1) so it beats the underlined red .entry-content /
   .prose link styles. Visibility is handled separately below at low
   specificity so the hover/focus/copied rules can override it. */
:is(.entry-content, .prose) a.heading-anchor.heading-anchor:not(.btn):not(.wp-block-button__link) {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.3em;
  vertical-align: middle;
  font-size: 0.55em;
  line-height: 1;
  color: var(--color-red);
  text-decoration: none;
}

.heading-anchor {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* No hover on touch screens: keep the icon faintly visible */
@media (hover: none) {
  .heading-anchor {
    opacity: 0.45;
  }
}

:is(h2, h3, h4, h5, h6):hover > .heading-anchor,
.heading-anchor:focus-visible,
.heading-anchor.is-copied {
  opacity: 1;
}

a.heading-anchor.is-copied::after {
  content: attr(data-copied);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.6rem;
  padding: 0.3em 0.7em;
  border-radius: var(--radius-sm);
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   58. Tables (core Table block) — light, readable
   Replaces WordPress's default all-cell 1px borders + 3px header rule (and
   GeneratePress's table borders) with row dividers only.
   ----------------------------------------------------------------------------- */
:is(.entry-content, .prose) .wp-block-table table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

:is(.entry-content, .prose) .wp-block-table :is(th, td) {
  border: 0;
  border-bottom: 1px solid var(--color-grey-200);
  padding: 0.75em 1em;
  text-align: left;
  vertical-align: top;
}

:is(.entry-content, .prose) .wp-block-table thead {
  border-bottom: 0;
}

:is(.entry-content, .prose) .wp-block-table thead th {
  border-bottom: 2px solid var(--color-black);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

:is(.entry-content, .prose) .wp-block-table tbody td:first-child {
  font-weight: 600;
}

:is(.entry-content, .prose) .wp-block-table tbody tr:hover {
  background-color: var(--color-grey-100);
}

/* -----------------------------------------------------------------------------
   59. Tables — mobile: each row becomes a labelled card (≤ 640px)
   Labels come from the header row via data-label, added by vikings-tri-plugin
   (table-labels.php), which also flags the figure .has-cell-labels. The first
   cell (position, year…) becomes the card title; empty cells are hidden.
   ----------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .wp-block-table.has-cell-labels {
    overflow: visible;
  }

  .wp-block-table.has-cell-labels :is(table, tbody, tr) {
    display: block;
    width: 100%;
  }

  /* Header row stays available to screen readers, hidden visually */
  .wp-block-table.has-cell-labels thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  :is(.entry-content, .prose) .wp-block-table.has-cell-labels tbody tr {
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-grey-200);
  }

  :is(.entry-content, .prose) .wp-block-table.has-cell-labels tbody tr:hover {
    background-color: transparent;
  }

  :is(.entry-content, .prose) .wp-block-table.has-cell-labels tbody :is(td, th) {
    display: block;
    position: relative;
    min-height: 1.5em;
    padding: 0.2em 0 0.2em 9.5em;
    border: 0;
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  :is(.entry-content, .prose) .wp-block-table.has-cell-labels tbody :is(td, th)::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 8.75em;
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--color-grey-500);
  }

  /* First cell = card title */
  :is(.entry-content, .prose) .wp-block-table.has-cell-labels tbody :is(td, th):first-child {
    padding-left: 0;
    padding-bottom: 0.4em;
    font-size: var(--text-base);
    font-weight: 700;
  }

  :is(.entry-content, .prose) .wp-block-table.has-cell-labels tbody :is(td, th):first-child::before {
    content: none;
  }

  :is(.entry-content, .prose) .wp-block-table.has-cell-labels tbody :is(td, th):empty {
    display: none;
  }
}