/* ==========================================================================
   Autive Starter Theme — core CSS
   --------------------------------------------------------------------------
   Structural + component CSS. References only semantic tokens defined in the
   translation layer below; semantic tokens in turn alias WP preset vars
   generated from theme.json. Child themes override theme.json palette/fonts
   and everything downstream adapts without touching this file.
   ========================================================================== */

/* 0. Translation layer: WP preset vars -> semantic role vars ------------- */
:root {
  /* Backgrounds */
  --bg-page:         var(--wp--preset--color--background);
  --bg-surface:      var(--wp--preset--color--surface);
  --bg-inverse:      var(--wp--preset--color--secondary);
  --bg-chip:         var(--wp--preset--color--background);

  /* Text */
  --text-body:       var(--wp--preset--color--foreground);
  --text-muted:      color-mix(in srgb, var(--wp--preset--color--foreground) 65%, var(--wp--preset--color--background));
  --text-heading:    var(--wp--preset--color--foreground);
  --text-accent:     var(--wp--preset--color--primary);
  --text-highlight:  var(--wp--preset--color--accent);
  --text-on-inverse: var(--wp--preset--color--background);
  --text-on-accent:  var(--wp--preset--color--background);

  /* Derived backgrounds */
  --bg-surface-soft: color-mix(in srgb, var(--wp--preset--color--surface) 78%, var(--wp--preset--color--foreground));

  /* Borders */
  --border-subtle:   color-mix(in srgb, var(--wp--preset--color--foreground) 14%, var(--wp--preset--color--background));
  --border-strong:   var(--wp--preset--color--foreground);
  --border-accent:   var(--wp--preset--color--primary);

  /* Brand roles */
  --brand-primary:         var(--wp--preset--color--primary);
  --brand-primary-dark:    color-mix(in oklab, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--secondary));
  --brand-primary-tint:    color-mix(in srgb, var(--wp--preset--color--primary) 14%, var(--wp--preset--color--background));
  --brand-secondary:       var(--wp--preset--color--secondary);
  --brand-secondary-mid:   color-mix(in srgb, var(--wp--preset--color--secondary) 70%, var(--wp--preset--color--background));
  --brand-secondary-light: color-mix(in srgb, var(--wp--preset--color--secondary) 45%, var(--wp--preset--color--background));
  --brand-secondary-tint:  color-mix(in srgb, var(--wp--preset--color--secondary) 12%, var(--wp--preset--color--background));
  --brand-tertiary:        var(--wp--preset--color--accent);
  --brand-tertiary-bright: color-mix(in srgb, var(--wp--preset--color--accent) 82%, white);
  /* 75% is the point where this passes 4.5:1 on both light grounds (4.93 on
     background, 4.53 on surface). At the 88% it started from it measured 3.92
     and 3.60, and it carries nearly every small orange label on the site. */
  --brand-tertiary-deep:   color-mix(in oklab, var(--wp--preset--color--accent) 75%, var(--wp--preset--color--foreground));

  /* Status */
  --status-error:   var(--wp--preset--color--error);
  /* Error text sits inside its own tinted panel, where the pure red measured
     4.16:1. This darker mix is for text; the pure red stays for borders and
     the icon, where 3:1 is the bar. */
  --status-error-text: color-mix(in oklab, var(--wp--preset--color--error) 78%, var(--wp--preset--color--foreground));
  /* Form field boundary. --border-subtle is a hairline for decoration and
     measured 1.23:1 against the form card, so an input had no visible edge. */
  --field-border:   color-mix(in srgb, var(--wp--preset--color--foreground) 55%, transparent);
  --status-warning: var(--wp--preset--color--warning);
  --status-success: var(--wp--preset--color--success);

  /* Typography
     Core.css references --font-display / --font-sans / --font-serif throughout.
     Child themes ship fontFamilies with slugs `display`, `body`, `accent-serif`
     (the convention). The parent ships `system` + `system-serif` as fallbacks
     for when no child is active. The var() fallback chain handles both. */
  --font-display: var(--wp--preset--font-family--display, var(--wp--preset--font-family--system, -apple-system, BlinkMacSystemFont, sans-serif));
  --font-sans:    var(--wp--preset--font-family--body,    var(--wp--preset--font-family--system, -apple-system, BlinkMacSystemFont, sans-serif));
  /* This identity has no serif. The component library reaches for --font-serif
     in a handful of accents (stat numbers, pullquote, timeline); aliasing it to
     the display face keeps those components on Montserrat instead of dropping
     to Georgia. One chokepoint beats editing every component. */
  --font-serif:   var(--font-display);
  --font-display-vars:      normal;
  --font-display-vars-soft: normal;

  /* Custom theme.json tokens aliased to short names */
  --container:        var(--wp--custom--container--wide);
  --container-narrow: var(--wp--custom--container--narrow);
  --gutter:           var(--wp--custom--gutter);
  --section-y:        var(--wp--custom--section--y);
  --section-y-sm:     var(--wp--custom--section--y-sm);
  --section-y-xs:     var(--wp--custom--section--y-xs);

  --radius-xs:   var(--wp--custom--radius--xs);
  --radius-sm:   var(--wp--custom--radius--sm);
  --radius-md:   var(--wp--custom--radius--md);
  --radius-lg:   var(--wp--custom--radius--lg);
  --radius-pill: var(--wp--custom--radius--pill);

  --stroke-hair: var(--wp--custom--stroke--hair);
  --stroke-firm: var(--wp--custom--stroke--firm);

  --motion-quick:  var(--wp--custom--motion--quick);
  --motion-smooth: var(--wp--custom--motion--smooth);
  --motion-rise:   var(--wp--custom--motion--rise);

  --tracking-tight:   var(--wp--custom--tracking--tight);
  --tracking-normal:  var(--wp--custom--tracking--normal);
  --tracking-label:   var(--wp--custom--tracking--label);
  --tracking-eyebrow: var(--wp--custom--tracking--eyebrow);

  --leading-heading: var(--wp--custom--leading--heading);
  --leading-body:    var(--wp--custom--leading--body);
  --leading-lead:    var(--wp--custom--leading--lead);

  /* Shadows */
  --shadow-card:    var(--wp--preset--shadow--card);
  --shadow-listing: var(--wp--preset--shadow--listing);
  --shadow-float:   var(--wp--preset--shadow--float);
  --shadow-btn:     var(--wp--preset--shadow--button);

  /* Focus */
  /* Opaque, and doubled: a dark inner ring reads on light and on orange, the
     white outer ring reads on night blue. A single translucent tint measured
     between 1.00:1 and 2.07:1 depending on what was behind it. */
  --focus-ring-color: var(--wp--preset--color--secondary);
  --focus-ring-halo:  #FFFFFF;
  --focus-ring:       0 0 0 3px var(--focus-ring-color), 0 0 0 6px var(--focus-ring-halo);
  --focus-offset:     var(--wp--custom--focus--offset);

  /* Layers */
  --z-nav:       50;
  --z-sticky:    40;
  --z-grain:     100;
  --z-skip-link: 200;
}

/* 1. Reset + body ------------------------------------------------------- */
:where(h1, h2, h3, h4, h5, h6) { scroll-margin-top: calc(82px + 1.5rem); }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  /* Inter stylistic sets from the approved design: single-storey a in italics
     off, straight-sided 1, open 4, round dots. */
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* 2. Utility: containers + section rhythm ------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: var(--container-narrow); }

/* Measure utilities — cap heading/text line length without inline styles.
   Use the `className` block attribute (valid) instead of an inline max-width
   (not a block attribute → invalid block content). */
.u-measure-14 { max-width: 14ch; }
.u-measure-18 { max-width: 18ch; }
.u-measure-20 { max-width: 20ch; }
.u-measure-22 { max-width: 22ch; }
.u-measure-24 { max-width: 24ch; }
.u-balance    { text-wrap: balance; }
.skutsje-lead,
.is-style-lead { max-width: 48ch; }
/* Een smallere kolom binnen een constrained layout krijgt van core
   margin-inline: auto, dus de intro stond ingesprongen naast de kop die er
   boven hoort te beginnen. En een stijl die alleen de regellengte verandert is
   voor een redacteur niet te zien: "Introtekst" hoort er ook als intro uit te
   zien. */
.is-style-lead {
  /* Core zet margin-left/right: auto !important op elk kind van een constrained
     layout, dus een smallere kolom wordt gecentreerd: de intro stond
     ingesprongen naast de kop. Plat op 0 zetten schiet door, want dan valt hij
     tegen de rand van de hele sectie. Dit rekent de linkerrand van de kolom
     zelf uit, dus de intro begint waar de kop begint en houdt alleen rechts
     op. Zit hij in een groep die al zo breed is als de kolom, dan wordt de
     marge vanzelf nul. */
  margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size, 760px)) / 2)) !important;
  margin-inline-end: auto !important;
  font-size: var(--wp--preset--font-size--medium, 1.125rem);
  line-height: var(--leading-lead);
  color: var(--text-muted);
}
:is(.section-inverse, .is-style-inverse, .skutsje-hero, .wp-block-cover.skutsje-page-hero)
  .is-style-lead:not(.has-text-color) {
  color: color-mix(in srgb, var(--text-on-inverse) 78%, transparent);
}

.section         { padding-block: var(--section-y); }
.section-tight   { padding-block-start: 1.5rem; }
.section-seamless{ padding-block-start: 0; }
.section-surface,
.is-style-surface {
  background: var(--bg-surface);
  border-block: var(--stroke-hair) solid var(--border-subtle);
}
.section-inverse,
.is-style-inverse {
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
}
/* theme.json zet elements.heading.color.text op foreground, en dat wint van de
   overgeerfde kleur van de band. Een kop in een nachtblauwe band was dus
   donkerblauw op donkerblauw: een redacteur plakt er een kop in, ziet niets, en
   denkt dat de site stuk is. Dezelfde behandeling als de rest van de band, en
   een expliciete kleur uit het palet wint hier nog steeds van.

   Let op wat hier WEL en NIET in de lijst staat. `.skutsje-hero` en
   `.wp-block-cover.skutsje-page-hero` dragen hun eigen donkere grond - de een
   via een achtergrondkleur, de ander via een uitgelichte afbeelding met een
   sluier. `.skutsje-page-hero` kaal is alleen lay-out: padding en typografie,
   geen achtergrond. Die stond hier eerst ook in, en daardoor was de kop van
   elk nieuwsbericht wit op wit - `templates/single.html` is de enige plek waar
   die hero op het papier ligt in plaats van op de band. Kleur hoort aan de
   bandstijl te hangen (`is-style-inverse`), niet aan een lay-outklasse. */
:is(.section-inverse, .is-style-inverse, .skutsje-hero, .wp-block-cover.skutsje-page-hero)
  :where(h1, h2, h3, h4, h5, h6):not(.has-text-color) {
  color: var(--text-on-inverse);
}
:is(.section-inverse, .is-style-inverse, .skutsje-hero, .wp-block-cover.skutsje-page-hero)
  :where(li, dt, dd, blockquote, figcaption):not(.has-text-color) {
  color: inherit;
}

/* Vertical rhythm fallback: any full-width <section> that doesn't set its own
   vertical padding (heroes, bands, stats opt out via their own class / inline
   padding, which win over this zero-specificity rule) gets a comfortable
   block padding. This also guarantees breathing room above the flush footer. */
:where(section.wp-block-group.alignfull) { padding-block: var(--section-y-sm); }
/* Keep the reduced top for tight sections, but give them a real bottom. */
.section-tight { padding-block-end: var(--section-y-sm); }

hr.rule {
  border: 0;
  block-size: var(--stroke-hair);
  background: var(--border-subtle);
  margin-block: 2rem;
}

/* 3. Eyebrow ------------------------------------------------------------ */
/* display: block, niet inline-flex. Op een inline-level box worden automatische
   marges nul, en de constrained layout van core positioneert zijn kinderen juist
   met margin-inline: auto. Het label sprong daardoor naar de linkerrand van de
   hele sectie terwijl de kop en de tekst netjes in de kolom bleven staan. */
.eyebrow,
.is-style-eyebrow {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-tertiary-deep);
  display: block;
}
/* On dark backgrounds the accent has too little contrast, so switch to the
   highlight colour. Done by context rather than by an extra class, so the
   Eyebrow block just works wherever an editor drops it. The explicit
   modifier stays supported for content saved before this rule existed. */
.section-inverse .eyebrow,
.section-inverse .is-style-eyebrow,
.is-style-inverse .eyebrow,
.is-style-inverse .is-style-eyebrow,
.skutsje-cta-band .eyebrow,
.skutsje-cta-band .is-style-eyebrow,
.site-footer .eyebrow,
.site-footer .is-style-eyebrow,
.eyebrow--on-inverse { color: var(--text-highlight); }

/* 4. Italic display inline accent (headline pull) ----------------------- */
.em-serif,
h1 em, h2 em, h3 em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  color: var(--text-highlight);
  letter-spacing: var(--tracking-tight);
}

/* 5. Drop cap for long prose ------------------------------------------- */
.has-drop-cap:not(:focus)::first-letter,
.drop::first-letter {
  font-family: var(--font-serif);
  font-size: 4.6em;
  float: left;
  line-height: 0.85;
  padding: 0.08em 0.12em 0 0;
  color: var(--text-accent);
  font-weight: 500;
}

/* 6. Prose --------------------------------------------------------------- */
.prose p {
  font-size: 1.06rem;
  color: var(--text-muted);
  margin-bottom: 1em;
  max-width: 62ch;
  text-wrap: pretty;
}
.prose p.lead {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--text-body);
  max-width: 38ch;
  line-height: var(--leading-lead);
}
.prose h2 { margin-top: 1rem; }
.prose h3 { margin-top: 2rem; margin-bottom: 0.75rem; color: var(--text-heading); }

.prose-two {
  column-count: 2;
  column-gap: 3rem;
  column-rule: var(--stroke-hair) solid var(--border-subtle);
}
@media (max-width: 760px) { .prose-two { column-count: 1; } }
.prose-two p { break-inside: avoid; margin-bottom: 0.9em; }

/* 7. Pullquote ---------------------------------------------------------- */
.pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  line-height: 1.15;
  color: var(--text-heading);
  max-width: 22ch;
  border-top: var(--stroke-hair) solid var(--border-accent);
  border-bottom: var(--stroke-hair) solid var(--border-accent);
  padding: 1.5rem 0;
  margin: 2.5rem 0;
}
.pullquote::before {
  content: "\276E\276F";
  display: block;
  color: var(--text-accent);
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.pullquote--wide { max-width: none; }

/* 8. Flourish separator ------------------------------------------------ */
.flourish {
  display: block;
  text-align: center;
  color: var(--text-accent);
  font-size: 1.2rem;
  margin: 2rem 0;
  letter-spacing: 1em;
}
.flourish::before { content: "\2767 \2766 \2767"; }

/* 9. Site header + footer scaffolding ---------------------------------- */
/* Sticky footer: make the page a full-height column so the footer never
   floats up on short pages — it sits at least at the bottom of the viewport. */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
}
.wp-site-blocks > main { flex: 1 0 auto; }

/* The header template-part wraps the nav and is a direct child of the page
   root, so sticky must live HERE (sticking the inner bar to its own wrapper
   gives no scroll room). */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}
/* When logged in, the WP admin bar is fixed at the top (z-index 99999), so a
   sticky header at top:0 slides behind it — covering the top of the nav and
   killing hover on the links. Offset the stick point by the admin-bar height.
   At <=600px the admin bar is position:absolute (scrolls away), so no offset. */
.admin-bar header.wp-block-template-part { top: 32px; }
@media screen and (min-width: 601px) and (max-width: 782px) {
  .admin-bar header.wp-block-template-part { top: 46px; }
}
@media screen and (max-width: 600px) {
  .admin-bar header.wp-block-template-part { top: 0; }
}
.skutsje-nav {
  background: color-mix(in srgb, var(--bg-page) 88%, transparent);
  border-bottom: var(--stroke-hair) solid var(--border-subtle);
  backdrop-filter: saturate(1.1) blur(8px);
  transition: box-shadow var(--motion-smooth), background var(--motion-smooth), padding var(--motion-smooth);
}
/* Elevate + condense the sticky header once the page scrolls.
   Scroll-driven animation where supported; harmless no-op otherwise. */
@supports (animation-timeline: scroll()) {
  .skutsje-nav {
    animation: skutsje-nav-elevate linear both;
    animation-timeline: scroll(root block);
    animation-range: 2rem 9rem;
  }
  @keyframes skutsje-nav-elevate {
    to {
      box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--text-heading) 55%, transparent);
      background: color-mix(in srgb, var(--bg-page) 96%, transparent);
    }
  }
}

/* Footer template-part wrapper inherits the root blockGap margin; remove it
   so the footer sits flush against the section above. */
footer.wp-block-template-part { margin-block-start: 0; }

.site-footer {
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  padding: clamp(3rem, 5vw, 5rem) 0 2rem;
  position: relative;
  overflow: hidden;
}
.site-footer a { transition: color var(--motion-quick); }
.site-footer a:hover { color: var(--text-highlight); }

.site-footer .wp-block-columns { margin-bottom: 3rem; }
.site-footer h4 {
  color: var(--text-on-inverse);
  font-weight: 400;
  line-height: 1.1;
}
.site-footer h5 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-highlight);
  margin-bottom: 1.25rem;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.92rem;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: var(--stroke-hair) solid color-mix(in srgb, var(--text-on-inverse) 15%, transparent);
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--text-on-inverse) 65%, transparent);
  flex-wrap: wrap;
  gap: 1rem;
}

/* 9b. Navigation -------------------------------------------------------- */
.wp-block-navigation { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; }
.wp-block-navigation .wp-block-navigation-item__content {
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding-block: 1.3rem;          /* full bar height: link top→bottom = bar */
  padding-inline: 0;
  position: relative;
  transition: color var(--motion-quick);
}
/* Centre the logo and let the (taller) nav define the bar height, so each
   link spans the whole bar — the dropdown then drops exactly under the bar
   edge and the active/hover underline sits right on it. */
.skutsje-nav > .wp-block-group { align-items: center; }
/* Animated underline — grows from the left on hover and stays put on the
   current page. Same bar drives hover + active so the cue reads instantly. */
.wp-block-navigation .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  block-size: 2px;
  background: var(--text-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-smooth);
}
.wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--text-heading); }
.wp-block-navigation .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }

/* Active page (and its parent when on a sub-page): stronger weight + colour
   and a persistent underline. */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
  color: var(--text-heading);
  font-weight: 600;
}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

/* Submenu / dropdown panels — fully self-contained (positioning + show/hide)
   so behaviour never depends on core's view CSS loading. Dark, on-brand
   (matches the footer), high-contrast light text (WCAG AA). Opens on hover,
   keyboard focus, AND the block's click toggle (.is-menu-open). */
.wp-block-navigation .wp-block-navigation-item.has-child { position: relative; }
/* Simplest universal dropdown: display none -> block on hover/focus/open.
   Attached to the bar (no gap) so hover never drops, and no visibility/
   opacity/transform/pointer-events tricks that render differently across
   browsers. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
  display: none;
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: calc(var(--z-nav) + 1);
  min-inline-size: 15rem;
  margin: 0;
  padding: 0.45rem;
  list-style: none;
  background-color: var(--bg-inverse);
  border: var(--stroke-hair) solid color-mix(in srgb, var(--text-on-inverse) 16%, transparent);
  border-radius: var(--radius-md);
  box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--text-heading) 80%, transparent);
}
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child:focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child.is-menu-open > .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__submenu-container.is-menu-open {
  display: block;
}
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  inline-size: 100%;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--text-on-inverse);
  text-transform: none;          /* readable: drop the bar's uppercase tracking */
  letter-spacing: normal;
  font-size: 0.9rem;
  transition: background var(--motion-quick), padding-inline-start var(--motion-quick);
}
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { content: none; }
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
  background-color: color-mix(in srgb, var(--text-on-inverse) 16%, transparent);
  color: var(--text-on-inverse);
  padding-inline-start: 1.1rem;
}

/* 9c. Site logo — cap height so a horizontal wordmark keeps the bar compact. */
.skutsje-nav .wp-block-site-logo img,
.skutsje-nav .custom-logo {
  /* Fixed height + auto width so an SVG (no intrinsic size) scales by its
     viewBox instead of collapsing to 0. */
  height: clamp(34px, 4.6vw, 44px);
  width: auto;
  max-width: min(72vw, 320px);
}

/* 9d. Hero media + anniversary seal ------------------------------------ */
.skutsje-hero-media { position: relative; display: inline-block; }

/* Stamped anniversary seal — inline SVG so it uses the theme display font.
   Circular text wraps a large serif "20". Sits, slightly askew, over the
   top-right of the hero blob like a wax stamp. */
.skutsje-seal {
  position: absolute;
  inset-block-start: clamp(-3rem, -3vw, -1.5rem);
  inset-inline-end: clamp(-1.25rem, -1.5vw, -0.25rem);
  z-index: 2;
  inline-size: clamp(6.5rem, 16vw, 9.75rem);
  rotate: -7deg;
  filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--text-heading) 38%, transparent));
  transition: rotate var(--motion-smooth), scale var(--motion-smooth);
}
.skutsje-hero-media:hover .skutsje-seal { rotate: -3deg; scale: 1.04; }
.skutsje-seal svg { display: block; inline-size: 100%; block-size: auto; }
.skutsje-seal__disc  { fill: var(--bg-page); }
.skutsje-seal__ring  { fill: none; stroke: var(--brand-primary); stroke-width: 1.4; }
.skutsje-seal__hair  { fill: none; stroke: color-mix(in srgb, var(--brand-secondary) 55%, transparent); stroke-width: 0.75; }
.skutsje-seal__arc {
  fill: var(--brand-secondary);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.skutsje-seal__num {
  fill: var(--brand-primary);
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 500;
  font-variation-settings: var(--font-display-vars);
}
.skutsje-seal__label {
  fill: var(--brand-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
}
.skutsje-seal__star { fill: var(--brand-tertiary); font-size: 13px; }

/* 10. Buttons (core/button overrides) ---------------------------------- */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: transform var(--motion-quick), background var(--motion-quick), color var(--motion-quick), box-shadow var(--motion-quick);
}
.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  border: var(--stroke-hair) solid var(--border-strong);
  background: transparent;
  color: var(--text-body);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--border-strong);
  color: var(--text-on-inverse);
}

/* Focus rings ----------------------------------------------------------- */
/* 3px, not 2: the audience skews older. The white halo is what makes the ring
   readable on the night-blue header and footer, where a dark ring alone all but
   disappears. */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 6px var(--focus-ring-halo);
  border-radius: var(--radius-sm);
}
/* On dark ground the two swap, so the bright ring sits against the dark and the
   dark halo against the bright. */
.skutsje-nav :where(a, button, summary):focus-visible,
.site-footer :where(a, button):focus-visible,
.section-inverse :where(a, button):focus-visible,
.is-style-inverse :where(a, button):focus-visible,
.skutsje-cta-band :where(a, button):focus-visible,
.skutsje-hero :where(a, button):focus-visible,
.skutsje-agenda-card__next :where(a, button):focus-visible {
  outline-color: var(--focus-ring-halo);
  box-shadow: 0 0 0 6px var(--focus-ring-color);
}
.wp-block-button__link:focus-visible {
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-ring);
}

/* 11. Stats strip ------------------------------------------------------- */
.skutsje-stats {
  border-block: var(--stroke-hair) solid var(--border-subtle);
  background: var(--bg-surface);
  padding-block: var(--section-y-xs);
}
.skutsje-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 720px) {
  .skutsje-stats__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
.skutsje-stat { padding: 0 1rem; }
.skutsje-stat + .skutsje-stat { border-left: var(--stroke-hair) dashed var(--border-subtle); }
@media (max-width: 720px) {
  .skutsje-stat + .skutsje-stat {
    border-left: 0;
    border-top: var(--stroke-hair) dashed var(--border-subtle);
    padding-top: 1.5rem;
  }
}
.skutsje-stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3vw + 1rem, 4rem);
  color: var(--text-heading);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-variation-settings: var(--font-display-vars-soft);
}
.skutsje-stat__num small {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-accent);
  font-size: 0.55em;
  margin-left: 0.2em;
  vertical-align: middle;
}
.skutsje-stat__label {
  font-size: 0.72rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 0.5rem;
}

/* 12. Section split ----------------------------------------------------- */
.skutsje-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.skutsje-split--media-right { grid-template-columns: 1.2fr 1fr; }
@media (max-width: 860px) {
  .skutsje-split,
  .skutsje-split--media-right { grid-template-columns: 1fr; }
}

/* 13. Card grid --------------------------------------------------------- */
.skutsje-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 900px) { .skutsje-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .skutsje-cards { grid-template-columns: 1fr; } }

.skutsje-card {
  background: var(--bg-surface);
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: transform var(--motion-smooth), box-shadow var(--motion-smooth);
  position: relative;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .skutsje-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
  }
}
.skutsje-card__date {
  font-size: 0.72rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
  font-weight: 500;
}
/* Equal-size news cards: stretch every card to the tallest in its row, clamp
   the excerpt, and pin the read-more link to the bottom. */
.skutsje-cards { align-items: stretch; }
.skutsje-cards > li { display: flex; }
.skutsje-cards > li > .skutsje-card { inline-size: 100%; block-size: 100%; }
.skutsje-card .wp-block-post-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.skutsje-card .wp-block-read-more,
.skutsje-card .wp-block-post-excerpt .wp-block-post-excerpt__more-link { margin-top: auto; }

/* 14. Agenda list ------------------------------------------------------- */
.skutsje-agenda-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 2rem;
  align-items: center;
  padding-block: 1.5rem;
  border-bottom: var(--stroke-hair) solid var(--border-subtle);
  transition: padding var(--motion-quick);
}
@media (prefers-reduced-motion: no-preference) {
  .skutsje-agenda-row:hover { padding-left: 1rem; }
}
.skutsje-agenda-row__date {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-heading);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.skutsje-agenda-row__date small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-top: 0.3rem;
}
@media (max-width: 640px) {
  .skutsje-agenda-row { grid-template-columns: 80px 1fr; }
}

/* 15. CTA band ---------------------------------------------------------- */
.skutsje-cta-band {
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}
.skutsje-cta-band__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 780px) {
  .skutsje-cta-band__grid { grid-template-columns: 1fr; }
}
.skutsje-cta-band h2 { color: var(--text-on-inverse); max-width: 16ch; }
.skutsje-cta-band p  {
  color: color-mix(in srgb, var(--text-on-inverse) 82%, transparent);
  max-width: 52ch;
  margin-top: 1rem;
}

/* 16. Page hero --------------------------------------------------------- */
.skutsje-page-hero {
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem);
}
.skutsje-page-hero h1 {
  font-size: var(--wp--preset--font-size--display);
  margin-top: 1rem;
  max-width: 18ch;
  text-wrap: balance;
}
.skutsje-page-hero__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1vw + 1rem, 1.55rem);
  color: var(--text-muted);
  margin-top: 1.5rem;
  max-width: 46ch;
  line-height: var(--leading-lead);
}
.skutsje-page-hero__split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: end;
}
@media (max-width: 780px) {
  .skutsje-page-hero__split { grid-template-columns: 1fr; }
}

/* 17. Timeline ---------------------------------------------------------- */
.skutsje-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 2rem;
}
@media (max-width: 760px) { .skutsje-timeline { grid-template-columns: 1fr; } }
.skutsje-timeline__step {
  padding: 2rem 1.5rem;
  border-left: var(--stroke-firm) solid var(--border-subtle);
  position: relative;
}
.skutsje-timeline__step:first-child { border-left: var(--stroke-firm) solid var(--border-accent); }
.skutsje-timeline__step::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 2rem;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: var(--bg-page);
  border: var(--stroke-firm) solid var(--border-accent);
}
.skutsje-timeline__year {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--text-heading);
  line-height: 1;
  margin-left: 1.5rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.skutsje-timeline__step h4,
.skutsje-timeline__step p { margin-left: 1.5rem; }
.skutsje-timeline__step p {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* 18. Trait grid -------------------------------------------------------- */
.skutsje-traits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
@media (max-width: 860px) { .skutsje-traits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .skutsje-traits { grid-template-columns: 1fr; } }
.skutsje-trait {
  padding: 1.5rem;
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
}
.skutsje-trait__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--text-accent);
  line-height: 1;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: var(--font-display-vars-soft);
}
/* Trait description — muted (replaces inline opacity on the paragraph). */
.skutsje-trait p:not(.skutsje-trait__num) { color: var(--text-muted); }

/* 19. Breed / attributes card ------------------------------------------ */
.skutsje-attributes-card {
  background: var(--bg-surface);
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: clamp(2rem, 3vw, 3rem);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 780px) {
  .skutsje-attributes-card { grid-template-columns: 1fr; }
}
.skutsje-attributes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.skutsje-attributes-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1rem;
  padding-block: 0.75rem;
  border-bottom: var(--stroke-hair) dashed var(--border-subtle);
  font-size: 0.95rem;
}
.skutsje-attributes-list li > *:first-child {
  font-family: var(--font-display);
  font-weight: 430;
  color: var(--text-accent);
}
.skutsje-attributes-list li > *:last-child {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
}

/* 20. FAQ (core/details stack) ----------------------------------------- */
.skutsje-faq .wp-block-details {
  border-bottom: var(--stroke-hair) solid var(--border-subtle);
  padding-block: 1.25rem;
}
.skutsje-faq .wp-block-details:last-child { border-bottom: 0; }
.skutsje-faq .wp-block-details summary {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text-heading);
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.skutsje-faq .wp-block-details summary::marker { content: ""; }
.skutsje-faq .wp-block-details summary::after {
  content: "+";
  color: var(--text-accent);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform var(--motion-quick);
}
.skutsje-faq .wp-block-details[open] summary::after { content: "\2013"; }

.skutsje-faq-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 760px) {
  .skutsje-faq-layout { grid-template-columns: 1fr; }
}

/* 21b. Post-terms chips (Query Loop taxonomy badges) -------------------- */
/* Universal chip rendering for any pattern that drops a wp:post-terms or
   manual .skutsje-chip-tag element. One color, one shape — child themes
   can override the bg via the role token --bg-chip if they want.       */
.skutsje-chip-tag,
.wp-block-post-terms a {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand-primary) 14%, var(--bg-page));
  color: var(--brand-primary);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  line-height: 1.2;
  transition: background var(--motion-quick), color var(--motion-quick);
}
.wp-block-post-terms { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wp-block-post-terms a:hover,
.wp-block-post-terms a:focus-visible,
.skutsje-chip-tag:hover {
  background: var(--brand-primary);
  color: var(--text-on-accent);
}

/* 21c. Ghost arrow link — replaces nested-underline patterns ----------- */
.skutsje-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--brand-tertiary-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 0;
  padding-bottom: 0.15rem;
  transition: color var(--motion-quick), border-color var(--motion-quick), gap var(--motion-quick);
}
.skutsje-arrow-link::after {
  content: "→";
  display: inline-block;
  transition: transform var(--motion-quick);
}
.skutsje-arrow-link:hover,
.skutsje-arrow-link:focus-visible {
  color: var(--brand-secondary);
  gap: 0.65rem;
}
.skutsje-arrow-link:hover::after,
.skutsje-arrow-link:focus-visible::after {
  transform: translateX(2px);
}

/* 21. Listings grid + chips (marketplace) ------------------------------ */
.skutsje-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding-block: 1rem;
  border-block: var(--stroke-hair) solid var(--border-subtle);
  margin-bottom: 2.5rem;
}
.skutsje-filter-bar__label {
  font-size: 0.72rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 0.5rem;
}
.skutsje-chip {
  padding: 0.5rem 1rem;
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  background: var(--bg-chip);
  color: var(--text-body);
  transition: background var(--motion-quick), color var(--motion-quick), border-color var(--motion-quick);
}
.skutsje-chip:hover,
.skutsje-chip.is-active {
  background: var(--brand-secondary);
  color: var(--text-on-inverse);
  border-color: var(--brand-secondary);
}

.skutsje-listings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .skutsje-listings { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .skutsje-listings { grid-template-columns: 1fr; } }

.skutsje-listing {
  background: var(--bg-page);
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--motion-smooth), box-shadow var(--motion-smooth);
}
@media (prefers-reduced-motion: no-preference) {
  .skutsje-listing:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-listing);
  }
}
.skutsje-listing__media {
  aspect-ratio: 4 / 3;
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
}
.skutsje-listing__tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--bg-page);
  color: var(--text-body);
  padding: 0.3rem 0.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: var(--stroke-hair) solid var(--border-subtle);
}
.skutsje-listing__tag--primary   { background: var(--brand-primary);   color: var(--text-on-accent);  border-color: var(--brand-primary); }
.skutsje-listing__tag--secondary { background: var(--brand-secondary); color: var(--text-on-inverse); border-color: var(--brand-secondary); }

.skutsje-listing__body   { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; flex-grow: 1; }
.skutsje-listing__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.25rem;
  border-top: var(--stroke-hair) dashed var(--border-subtle);
  font-size: 0.85rem;
}
.skutsje-listing__price {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-accent);
  font-variant-numeric: tabular-nums;
}

/* 22. Category duo ------------------------------------------------------ */
.skutsje-cat-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 720px) { .skutsje-cat-duo { grid-template-columns: 1fr; } }
.skutsje-cat-card {
  padding: 2rem;
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 1rem;
  align-items: center;
  transition: transform var(--motion-quick), border-color var(--motion-quick);
}
@media (prefers-reduced-motion: no-preference) {
  .skutsje-cat-card:hover { transform: translateY(-2px); }
}
.skutsje-cat-card--primary {
  background: linear-gradient(135deg, var(--brand-primary-tint) 0%, var(--bg-surface) 100%);
  border-color: var(--brand-primary);
}
.skutsje-cat-card--secondary {
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--brand-secondary-tint) 100%);
  border-color: var(--brand-secondary-light);
}
.skutsje-cat-count {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--text-accent);
  text-align: center;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* 23. Benefits list (icon checklist) ----------------------------------- */
.skutsje-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.skutsje-benefits li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.skutsje-benefits li::before {
  content: "";
  display: block;
  inline-size: 24px;
  block-size: 24px;
  margin-top: 2px;
  background-color: var(--text-accent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'><path d='M20 6L9 17l-5-5'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'><path d='M20 6L9 17l-5-5'/></svg>") no-repeat center / contain;
}

/* 24. Pill note --------------------------------------------------------- */
.skutsje-pill-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-surface-soft);
  color: var(--text-muted);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  border: var(--stroke-hair) solid var(--border-subtle);
}
.skutsje-pill-note::before {
  content: "\2022";
  color: var(--text-accent);
  font-size: 0.85rem;
  line-height: 1;
}

/* 25. Inline link (underlined small accent) ---------------------------- */
a.inline-link {
  border-bottom: var(--stroke-hair) solid var(--text-accent);
  transition: color var(--motion-quick);
}
a.inline-link:hover { color: var(--text-accent); }

/* 26. Form card wrapper ------------------------------------------------ */
.skutsje-form-card {
  background: var(--bg-surface);
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
/* Form-card intro line — muted + capped (replaces inline opacity/max-width).
   Excludes the eyebrow, which keeps its own accent color. */
.skutsje-form-card p:not(.eyebrow) { color: var(--text-muted); max-width: 48ch; }

/* 27. Skip link --------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: 0;
  left: 1rem;
  transform: translateY(-150%);
  z-index: var(--z-skip-link);
  background: var(--brand-primary);
  color: var(--text-on-accent);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  transition: transform var(--motion-quick);
}
.skip-link:focus { transform: translateY(0); }

/* ==========================================================================
   29. Skûtsje - site-specific components
   --------------------------------------------------------------------------
   Everything below is this site's own layer on top of the shared library.
   ========================================================================== */

/* 29a. Header over the hero -------------------------------------------- */
/* The approved design puts the nav straight on the photo. The header stays
   white-on-dark in both states, so a page without a hero simply gets the solid
   night-blue bar instead of an invisible nav. */
.skutsje-nav {
  background: var(--bg-inverse);
  border-bottom-color: transparent;
  backdrop-filter: none;
  color: var(--text-on-inverse);
}
/* De knop is geen navigatielink: die haalt zijn wit uit theme.json. Stond hij
   er wel in, dan kreeg hij #FAFCFE in plaats van wit en zakte het contrast op
   zeiloranje diep naar 4.48:1, net onder de ondergrens. */
.skutsje-nav a:not(.wp-block-button__link),
.skutsje-nav .wp-block-navigation-item__content,
.skutsje-nav .wp-block-navigation__responsive-container-open {
  color: var(--text-on-inverse);
}
.skutsje-nav .wp-block-navigation-item__content:hover {
  color: var(--brand-tertiary);
}

/* On a page that opens with a photo hero the bar starts fully transparent and
   the hero shows through. A static mockup cannot express what happens on
   scroll; keeping the bar sticky and fading the night blue back in is the
   usable version of the same look. */
body:has(.skutsje-hero) .skutsje-nav {
  background: transparent;
}
@supports (animation-timeline: scroll()) {
  body:has(.skutsje-hero) .skutsje-nav {
    animation: skutsje-nav-settle linear both;
    animation-timeline: scroll(root block);
    animation-range: 4rem 14rem;
  }
  @keyframes skutsje-nav-settle {
    to {
      background: var(--bg-inverse);
      box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--brand-secondary) 70%, transparent);
    }
  }
}

/* The overlay header must not push the hero down. */
body:has(.skutsje-hero) header.wp-block-template-part {
  position: fixed;
  inset-inline: 0;
}
body:has(.skutsje-hero) .skutsje-hero { margin-block-start: 0; }

.skutsje-nav .wp-block-group { align-items: center; }
.skutsje-nav__end {
  gap: 1.75rem;
  align-items: center;
}
/* No filter: assets/images/logo-footer.png is already the dark-ground
   version and carries the orange wordmark. brightness(0) invert(1) turned
   that orange white, which is the whole reason the logo looked wrong. */
.skutsje-nav__cta .wp-block-button__link { padding-block: 0.6rem; }
@media (max-width: 900px) {
  .skutsje-nav__cta { display: none; }
}

/* 29b. Photo hero ------------------------------------------------------- */
.skutsje-hero {
  color: var(--text-on-inverse);
  padding-block: clamp(7rem, 14vh, 10rem) clamp(3.5rem, 7vh, 6rem);
}
.skutsje-hero .wp-block-cover__inner-container { width: 100%; }
.skutsje-hero__title {
  color: var(--text-on-inverse);
  line-height: 0.95;
}
.skutsje-hero__lead {
  max-width: 52ch;
  color: color-mix(in srgb, var(--text-on-inverse) 85%, transparent);
  line-height: var(--leading-lead);
}
/* Op een foto pakt de eyebrow de heldere accentkleur in plaats van de
   verdiepte: de verdiepte is voor een lichte ondergrond. Dit mikte alleen op
   de oude klasse .eyebrow en miste dus is-style-eyebrow, waar de patronen
   sinds 1.9.0 op staan - ook op de voorpagina. */
.skutsje-hero .eyebrow,
.skutsje-hero .is-style-eyebrow,
.wp-block-cover.skutsje-page-hero .eyebrow,
.wp-block-cover.skutsje-page-hero .is-style-eyebrow { color: var(--brand-tertiary); }

/* De fotovariant van de binnenpaginahero. contentPosition bottom-left zet de
   cover op align-items: flex-start, waardoor de inner container om de tekst
   heen krimpt en tegen de linkerrand plakt; width 100% geeft de constrained
   layout zijn inspringing terug. Zelfde truc als bij .skutsje-hero hierboven,
   op een kleinere maat, want dit is geen voorpagina. */
.wp-block-cover.skutsje-page-hero {
  padding-block: clamp(4rem, 9vh, 7rem) clamp(2.5rem, 5vh, 4rem);
  /* De cover leest de uitgelichte afbeelding van de pagina. Staat die er niet,
     dan rendert core geen img en zie je alleen de half doorzichtige sluier -
     op wit. Nachtblauw eronder maakt van dat geval gewoon de vlakke band die
     de andere pagina's ook hebben, zonder dat de redacteur iets moet doen. */
  background-color: var(--bg-inverse);
}

/* Outline button on a dark ground: the library's outline style is drawn for
   light backgrounds. This follows the ground the button stands on rather than
   a class somebody has to apply - drop an outline button into a nachtblauwe
   band and it is already right. The explicit class stays valid for the markup
   that already carries it. */
:is(.section-inverse, .is-style-inverse, .skutsje-hero, .wp-block-cover.skutsje-page-hero, .skutsje-agenda-card__next)
	.wp-block-button.is-style-outline .wp-block-button__link,
.skutsje-button--on-dark .wp-block-button__link {
  border: var(--stroke-hair) solid color-mix(in srgb, var(--text-on-inverse) 40%, transparent);
  color: var(--text-on-inverse);
  background: transparent;
}
:is(.section-inverse, .is-style-inverse, .skutsje-hero, .wp-block-cover.skutsje-page-hero, .skutsje-agenda-card__next)
	.wp-block-button.is-style-outline .wp-block-button__link:hover,
.skutsje-button--on-dark .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--text-on-inverse) 12%, transparent);
  color: var(--text-on-inverse);
}

.skutsje-arrow-link--on-inverse {
  color: var(--brand-tertiary);
  border-bottom-color: color-mix(in srgb, var(--brand-tertiary) 40%, transparent);
}
.skutsje-arrow-link--on-inverse:hover,
.skutsje-arrow-link--on-inverse:focus-visible {
  color: var(--text-on-inverse);
  border-bottom-color: var(--text-on-inverse);
}

/* 29c. Floating season card -------------------------------------------- */
/* The one deliberate overlap in the design. Everything else sits on the grid:
   the client asked for a calm, predictable layout. */
.skutsje-agenda-float {
  padding-block: 0;
  margin-block-start: calc(-1 * clamp(2rem, 4vw, 3.5rem));
  position: relative;
  z-index: 2;
}
/* The divider is a real border on the right-hand panel, not a 1px gap over a
   grey card. The gap trick shows that grey wherever the two panels are not
   exactly the same height - which is never true in the editor, where blocks
   carry their own chrome. */
.skutsje-agenda-card {
  display: grid;
  grid-template-columns: minmax(16rem, 20rem) 1fr;
  background: var(--bg-page);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-float);
}
.skutsje-agenda-card__season {
  border-inline-start: var(--stroke-hair) solid var(--border-subtle);
}
@media (max-width: 860px) {
  .skutsje-agenda-card { grid-template-columns: 1fr; }
  .skutsje-agenda-card__season {
    border-inline-start: 0;
    border-block-start: var(--stroke-hair) solid var(--border-subtle);
  }
}
.skutsje-agenda-card__season {
  padding: clamp(1.5rem, 3vw, 2rem);
}
.skutsje-agenda-card__season { background: var(--bg-page); }

.skutsje-agenda-card__race {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--text-on-inverse);
  margin-block: 0.75rem 0;
}
.skutsje-agenda-card__place {
  color: color-mix(in srgb, var(--text-on-inverse) 70%, transparent);
  margin-block-start: 0.25rem;
}
.skutsje-agenda-card__when {
  font-family: var(--font-mono, var(--wp--preset--font-family--mono));
  color: color-mix(in srgb, var(--text-on-inverse) 60%, transparent);
  margin-block-start: 1rem;
}
.skutsje-agenda-card__label { color: var(--text-muted); }

.skutsje-agenda-compact {
  margin-block-start: 0.75rem;
  gap: 0 2rem;
}
.skutsje-agenda-compact__row {
  gap: 0.65rem;
  align-items: baseline;
  border-bottom: var(--stroke-hair) solid var(--border-subtle);
  padding-block: 0.5rem;
}
.skutsje-agenda-compact__date {
  font-family: var(--wp--preset--font-family--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  inline-size: 3rem;
  flex: none;
}
.skutsje-agenda-compact__place {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-body);
  margin: 0;
}
.skutsje-agenda-compact__place a { color: inherit; text-decoration: none; }
.skutsje-agenda-compact__place a:hover { color: var(--brand-primary); }
.skutsje-agenda-compact > li:first-child .skutsje-agenda-compact__date,
.skutsje-agenda-compact > li:last-child .skutsje-agenda-compact__date {
  color: var(--brand-tertiary-deep);
}

/* 29d. Facts row -------------------------------------------------------- */
.skutsje-facts { gap: 2.5rem 2.75rem; }
.skutsje-fact__label {
  font-family: var(--wp--preset--font-family--mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  margin: 0;
}
.skutsje-fact__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--wp--preset--font-size--x-large);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  margin-block-start: 0.25rem;
}
.skutsje-fact__value--accent { color: var(--brand-tertiary-deep); }

/* 29e. Aligned photo pair ---------------------------------------------- */
/* The client explicitly does not want staggered photos. Both images share one
   aspect ratio and one baseline, at every width. */
.skutsje-photo-duo { align-items: stretch; }
.skutsje-photo img {
  border-radius: var(--radius-lg);
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.skutsje-photo { margin: 0; }

/* 29f. Sponsor wall ----------------------------------------------------- */
.skutsje-sponsors__intro { text-align: center; margin-inline: auto; }
.skutsje-sponsor-grid {
  margin-block-start: 3rem;
  gap: 1rem;
}
@media (max-width: 900px) {
  .skutsje-sponsor-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 560px) {
  .skutsje-sponsor-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
.skutsje-sponsor {
  background: var(--bg-surface);
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-md);
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: 1rem;
  transition: border-color var(--motion-quick), transform var(--motion-quick);
}
.skutsje-sponsor:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent);
  transform: translateY(-2px);
}
/* Het logo krijgt een vast vak en de afbeelding past zichzelf daarin.
   Met inline-size: auto klapte elk SVG-logo dicht tot 0 breed - negentien van
   de veertig, want een SVG zonder vaste afmetingen heeft geen intrinsieke
   breedte om "auto" op te baseren. Een vak met object-fit werkt voor beide
   soorten. De object-fit moet !important zijn: core zet cover als inline stijl
   op de uitgelichte afbeelding, en cover snijdt een logo af. */
.skutsje-sponsor__logo {
  display: grid;
  place-items: center;
  block-size: 4.5rem;
  inline-size: 100%;
}
.skutsje-sponsor__logo a {
  display: block;
  inline-size: 100%;
  block-size: 4.5rem;
}
/* Vaste hoogte op de afbeelding zelf, niet honderd procent van een grid-vak:
   die honderd procent bleef bij sommige logo's onbepaald en dan groeide de
   link mee met de natuurlijke hoogte van het bestand. */
.skutsje-sponsor__logo img {
  inline-size: 100%;
  block-size: 4.5rem;
  object-fit: contain !important;
}
/* De naam gaat schuil achter het logo, maar wie een beschrijving invult wil
   hem wel zien: een donateur die geen bedrijfslogo heeft, of een sponsor met
   een regel uitleg. Staat er niets in de samenvatting, dan rendert core een
   leeg blok en blijft de tegel precies zoals hij was. */
.skutsje-sponsor__note {
  color: var(--text-muted);
  margin-block-start: 0.35rem;
  text-wrap: pretty;
}

.skutsje-sponsors__empty { color: var(--text-muted); }

/* 29g. News cards ------------------------------------------------------- */
.skutsje-card__media img {
  border-radius: var(--radius-md);
  inline-size: 100%;
  object-fit: cover;
}
.skutsje-card__date {
  font-family: var(--wp--preset--font-family--mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--brand-tertiary-deep);
  font-size: 0.75rem;
}

/* 29h. Footer details --------------------------------------------------- */
.site-footer__blurb {
  max-width: 40ch;
  color: color-mix(in srgb, var(--text-on-inverse) 60%, transparent);
}
.site-footer__meta { color: color-mix(in srgb, var(--text-on-inverse) 55%, transparent); }
/* Same logo, same reason. */

/* A sponsor without a logo yet still shows as a tile, with its name in it.
   The moment a logo is uploaded the name steps aside. */
.skutsje-sponsor__name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--text-muted) 75%, transparent);
  margin: 0;
  text-align: center;
}
.skutsje-sponsor__name a { color: inherit; text-decoration: none; }
.skutsje-sponsor:has(.skutsje-sponsor__logo img) .skutsje-sponsor__name { display: none; }
/* Tenzij er een beschrijving bij staat: dan hoort de naam er weer bij, anders
   hangt een regel uitleg onder een logo waar hij niet bij lijkt te horen.
   Het `p` in de :has() is er niet voor niets: de regel hierboven telt de `img`
   in zijn :has() mee, dus zonder dat element weegt deze lichter en verliest
   hij. */
.skutsje-sponsor:has(.skutsje-sponsor__note p) .skutsje-sponsor__name { display: block; }

/* Core gives core/cover a fluid font-size of its own (up to 2.75em), which
   inflates everything inside the hero that does not carry a preset class.
   Two class names, so this beats core's single-class rule. */
.wp-block-cover.skutsje-hero { font-size: var(--wp--preset--font-size--medium); }

/* Sentence case in the bar: the design's nav is not a set of small caps. */
.skutsje-nav .wp-block-navigation {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--wp--preset--font-size--small);
}

/* News cards follow the approved design: no box, left aligned, the photo
   carries the card. The library's bordered, centred card belongs to another
   site's identity. */
.skutsje-cards .skutsje-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  text-align: left;
}
.skutsje-cards .skutsje-card .wp-block-post-title { margin-block: 0.5rem 0; }
.skutsje-cards .skutsje-card .wp-block-post-title a { text-decoration: none; }
.skutsje-cards .skutsje-card .wp-block-post-excerpt { color: var(--text-muted); }
.skutsje-cards .skutsje-card .wp-block-read-more {
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: none;
}

/* Footer links: the global link colour is the blue from the palette, which on
   the night-blue footer is both off-design and short of contrast. */
.site-footer a {
  color: color-mix(in srgb, var(--text-on-inverse) 72%, transparent);
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--text-on-inverse);
  text-decoration: underline;
}
.site-footer li { color: color-mix(in srgb, var(--text-on-inverse) 72%, transparent); }

/* 29i. Inner page components ------------------------------------------- */
/* The library's timeline styles its step title as h4; after a section h2 the
   correct level here is h3. */
.skutsje-timeline__step h3 { margin-left: 1.5rem; }
.skutsje-timeline__year { font-weight: 800; }

/* No italic serif accent in this identity, so the trait number is display
   weight instead. */
.skutsje-trait__num {
  font-style: normal;
  font-weight: 800;
  color: var(--brand-tertiary-deep);
}

/* People: name and role, no photo. The crew changes per season and the club
   does not have portraits of everyone. */
.skutsje-person { text-align: left; }
.skutsje-person__role { color: var(--brand-tertiary-deep); margin: 0; }
.skutsje-person__name {
  margin-block: 0.4rem 0;
  letter-spacing: var(--tracking-tight);
}

/* Agenda page rows */
.skutsje-agenda-row__title { margin: 0; letter-spacing: 0; }
.skutsje-agenda-row__title a { text-decoration: none; color: inherit; }
.skutsje-agenda-row__title a:hover { color: var(--brand-primary); }
.skutsje-agenda-row__time {
  font-family: var(--wp--preset--font-family--mono);
  color: var(--text-muted);
  margin: 0;
  margin-inline-start: auto;
}
.skutsje-agenda-row__date { text-transform: capitalize; }
.skutsje-agenda-empty { color: var(--text-muted); }

/* Contact details list */
.skutsje-contact-list {
  list-style: none;
  padding: 0;
  margin-block-start: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Merchandise: photo placeholders until the club supplies product shots. */
/* Zelfde reden als bij .skutsje-people: het raster hoort bij de klasse en niet
   alleen bij het layout-attribuut, anders valt het patroon na invoegen uit de
   inserter terug op een enkele kolom. */
.wp-block-post-template.skutsje-merch,
.skutsje-merch {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}
@media (min-width: 620px) {
  .wp-block-post-template.skutsje-merch,
  .skutsje-merch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .wp-block-post-template.skutsje-merch,
  .skutsje-merch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.skutsje-merch__media {
  aspect-ratio: 4 / 3;
  background: var(--bg-surface);
  border: var(--stroke-hair) solid var(--border-subtle);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
}
.skutsje-merch__placeholder { color: var(--text-muted); margin: 0; }
.skutsje-merch__item h3 { letter-spacing: var(--tracking-tight); }
.skutsje-merch__price {
  font-family: var(--wp--preset--font-family--mono);
  color: var(--brand-tertiary-deep);
  margin-block-start: 0.25rem;
}

/* Interior page hero sits on the night-blue band, like the design's subpages. */
.skutsje-page-hero.section-inverse,
.skutsje-page-hero.is-style-inverse {
  padding-block: clamp(7rem, 12vh, 9rem) clamp(2.5rem, 5vh, 4rem);
}
.skutsje-page-hero.section-inverse h1,
.skutsje-page-hero.is-style-inverse h1 { color: var(--text-on-inverse); }
.skutsje-page-hero__lead {
  color: color-mix(in srgb, var(--text-on-inverse) 82%, transparent);
  max-width: 55ch;
  font-family: var(--font-sans);
  font-style: normal;
}

/* The header part and the first section both sit directly in the page root,
   which carries a blockGap margin. That left a strip of page background
   between the night-blue bar and the night-blue page hero. */
main.wp-block-group > *:first-child { margin-block-start: 0; }
header.wp-block-template-part + main { margin-block-start: 0; }

/* The library elevates the sticky bar by fading in the page background, which
   is white. This header is white-on-night-blue in both states, so that
   animation made the nav invisible on scroll. The hero variant keeps its own
   animation: body:has(.skutsje-hero) is more specific and still wins. */
.skutsje-nav { animation: none; }

/* Wide enough for "Za 18 Jul" on one line. */
.skutsje-agenda-row { grid-template-columns: 150px 1fr auto; }
@media (max-width: 640px) {
  .skutsje-agenda-row { grid-template-columns: 110px 1fr; }
  .skutsje-agenda-row__time { grid-column: 2; margin-inline-start: 0; }
}

/* The library marks the current page with the heading colour, which is ink and
   therefore invisible on the night-blue bar. */
.skutsje-nav .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.skutsje-nav .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.skutsje-nav .wp-block-navigation-item__content:hover {
  color: var(--text-on-inverse);
}
.skutsje-nav .wp-block-navigation .wp-block-navigation-item__content::after {
  background: var(--brand-tertiary);
}

/* A tier with one or two sponsors would otherwise stretch its tile to half the
   page. A logo does not get better at 600px wide. */
.skutsje-sponsor { max-inline-size: 320px; }

/* Grid containers built from a plain group inherit the flow layout's
   sibling margin, which pushed every item after the first down by one gap and
   broke the top line of the row. */
.skutsje-traits > *,
.skutsje-timeline > *,
.skutsje-merch > *,
.skutsje-facts > * { margin-block-start: 0; }

/* Link cards: the card is the link target, so the heading should not read as a
   separate blue underlined link. */
.skutsje-linkcard h3 { margin: 0; }
.skutsje-linkcard h3 a {
  color: var(--text-body);
  text-decoration: none;
}
.skutsje-linkcard:hover { border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent); }
.skutsje-linkcard:hover h3 a { color: var(--brand-primary); }
.skutsje-linkcard p { margin-block-start: 0.5rem; }

/* The card uses a constrained layout, which centres its children; a paragraph
   capped at 48ch then sat indented next to its own heading. */
.skutsje-form-card > * { margin-inline: 0; }

/* ==========================================================================
   30. Findings from the pre-deploy accessibility review
   ========================================================================== */

/* 30a. Submenu was white text on a white panel (1.02:1) -----------------
   Core ships .wp-block-navigation:not(.has-background) .wp-block-navigation__
   submenu-container { background:#fff } at (0,3,0). The theme set the dark
   background at (0,2,0) and lost, while its lighter text colour at (0,3,0)
   won. Match core's specificity so the panel is dark again. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
  background-color: var(--bg-inverse);
  border-color: color-mix(in srgb, var(--text-on-inverse) 18%, transparent);
}
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a {
  color: var(--text-on-inverse);
}
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a:hover,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a:focus-visible {
  color: var(--brand-tertiary);
}

/* 30b. Outline button on dark was ink on night blue (1.19:1) -------------
   The class sits on the .wp-block-button wrapper, so naming both beats core's
   .wp-block-button.is-style-outline .wp-block-button__link at (0,3,0). */
.wp-block-button.skutsje-button--on-dark .wp-block-button__link {
  border: var(--stroke-hair) solid color-mix(in srgb, var(--text-on-inverse) 45%, transparent);
  color: var(--text-on-inverse);
  background: transparent;
}
.wp-block-button.skutsje-button--on-dark .wp-block-button__link:hover,
.wp-block-button.skutsje-button--on-dark .wp-block-button__link:focus-visible {
  background: color-mix(in srgb, var(--text-on-inverse) 14%, transparent);
  color: var(--text-on-inverse);
  border-color: var(--text-on-inverse);
}

/* 30c. Hero eyebrow measured 1.03:1 at its worst point over the photo ----
   It sits on the 55% stop of the hero gradient, where the veil covers least.
   White clears 9:1 everywhere the heading does. The orange stays the accent
   colour everywhere it has a solid ground behind it. */
.skutsje-hero .eyebrow { color: var(--text-on-inverse); }

/* 30d. The cover needs a floor colour ------------------------------------
   Until the photo paints, the transparent bar sat on the gradient over the
   page background and the white nav measured about 3.5:1. On a phone on 4G
   that is the first thing a visitor sees. */
.skutsje-hero { background-color: var(--bg-inverse); }

/* 30e. Sponsor tile: the whole tile is the link -------------------------
   The name was a 60x14px target with a 75% transparency on top of a muted
   grey (3.09:1). */
.skutsje-sponsor { position: relative; }
.skutsje-sponsor__name {
  color: var(--text-muted);
}
.skutsje-sponsor__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.skutsje-sponsor:focus-within {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: var(--focus-offset);
}

/* 30f. Target sizes ------------------------------------------------------
   Footer and contact links were 14 to 20px tall. The padding absorbs the list
   gap, so the layout does not move. */
.site-footer ul { gap: 0.1rem; }
.site-footer li a,
.skutsje-contact-list a {
  display: inline-block;
  padding-block: 0.5rem;
}
.wp-block-navigation__submenu-icon {
  padding: 0.5rem;
  min-inline-size: 24px;
  min-block-size: 24px;
}

/* The mobile rule lost to core's .wp-block-buttons.is-layout-flex at (0,2,0),
   so the CTA stayed in the bar next to the burger on a phone. */
@media (max-width: 900px) {
  .wp-block-buttons.skutsje-nav__cta { display: none; }
}

/* 30f-2. Het mobiele overlay ---------------------------------------------
   Gemeten op 390px: labels op 12,94px, tapdoelen 21px hoog, en de container
   stond op padding 0 zodat elk label tegen de bezel lag - rechterrand precies
   op x = 390. Dat faalt WCAG 2.1 AA niet (2.5.5 is AAA, en onder 2.2 halen ze
   het via de spacing-uitzondering), maar het publiek van deze club leest geen
   13px tegen de schermrand.

   De maat komt uit de small-preset in theme.json, clamp(0.8rem, ...), en die
   bodem van 0.8rem is wat bijt. Die preset draagt ook de agendarijen, de
   eyebrows en de link "Volledige agenda", dus hij blijft ongemoeid en de
   correctie staat alleen hier.

   Dit wijkt zichtbaar af van design/site/: het overlay wordt een lijst van
   volle rijen in plaats van kleine rechtsuitgelijnde labels. */
/* De wrapper draagt een shorthand `padding: 56px 0 0` uit de blokstylesheet,
   en die wint van een padding-inline op de container eromheen. Daarom staat de
   zijruimte hier, op het element dat de shorthand zelf draagt. Idem voor de
   links: font-size landde wel en padding niet, dus daar zit een selector met
   meer gewicht tussen. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  padding-inline: 1.25rem;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container
  .wp-block-navigation-item
  .wp-block-navigation-item__content {
  display: block;
  font-size: 1.0625rem;
  padding-block: 0.7rem;
}

/* "Club van 100" staat als knop naast het navigatieblok, niet erin, dus CSS
   alleen krijgt hem het overlay niet in - op een telefoon was de enige route
   ernaartoe de footer, onderaan een pagina van 8800px. Het menu draagt nu een
   eigen item met deze klasse; op desktop blijft de knop het en verbergen we
   het item, zodat de bestemming er precies een keer staat. */
.skutsje-nav .wp-block-navigation__container > .skutsje-nav__cta-in-menu {
  display: none;
}
@media (max-width: 900px) {
  .skutsje-nav .wp-block-navigation__container > .skutsje-nav__cta-in-menu {
    display: flex;
  }
}

/* 30g. Placeholder pill measured 3.18:1 --------------------------------- */
.skutsje-pill-note {
  background: var(--bg-surface);
  color: var(--text-body);
  border-color: color-mix(in srgb, var(--wp--preset--color--foreground) 35%, transparent);
}

/* 30h. Skip link ---------------------------------------------------------
   Two problems. The theme's own .skip-link styling never applied, because core
   also gives the link .screen-reader-text and that carries the clip. And there
   is no :focus reset for the clip anywhere in this stack, so the link stayed a
   1x1 clipped box even while focused - measured. Reset the lot explicitly. */
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
  clip-path: none;
  clip: auto;
  inline-size: auto;
  block-size: auto;
  overflow: visible;
  position: fixed;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  transform: none;
  background-color: var(--bg-inverse);
  color: var(--text-on-inverse);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-sm);
  outline: 3px solid var(--focus-ring-halo);
  outline-offset: 2px;
  text-decoration: none;
  z-index: 100000;
}

/* 30i. Reduced motion ----------------------------------------------------
   Four components opted in to motion behind a no-preference query; everything
   else animated unconditionally, including a rotate-and-scale hover and two
   scroll-driven animations. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-timeline: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .skutsje-seal:hover,
  .wp-block-button__link:hover,
  .skutsje-sponsor:hover,
  .skutsje-linkcard:hover,
  .skutsje-card:hover {
    transform: none;
    rotate: none;
    scale: none;
  }
  .skutsje-arrow-link:hover,
  .skutsje-arrow-link:focus-visible { gap: 0.4rem; }
}

/* 30j. The submenu opens on keyboard focus too ---------------------------
   Core deliberately excludes .open-on-hover-click from its :focus-within rule,
   because that variant ships a chevron toggle button. That button works, but it
   means tabbing onto "Over ons" itself does nothing, which reads as broken. The
   theme's own :focus-within rule was written for the plain variant and was dead
   code. Mirror core's open state for this variant explicitly. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child.open-on-hover-click:focus-within > .wp-block-navigation__submenu-container {
  height: auto;
  min-width: 200px;
  opacity: 1;
  overflow: visible;
  visibility: visible;
  width: auto;
}

/* 30k. Pagination -------------------------------------------------------
   The news index shipped a pagination block with no styling at all, so it fell
   back to bare page-number links. Invisible now with three posts, a row of
   12px targets the moment the club has ten. */
.skutsje-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
.skutsje-pagination .page-numbers,
.skutsje-pagination .wp-block-query-pagination-previous,
.skutsje-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: 0.75rem;
  border: var(--stroke-hair) solid var(--field-border);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  text-decoration: none;
  font-weight: 600;
  transition: background var(--motion-quick), border-color var(--motion-quick);
}
.skutsje-pagination .page-numbers:hover {
  background: var(--bg-surface);
  border-color: var(--brand-primary);
}
.skutsje-pagination .page-numbers.current {
  background: var(--bg-inverse);
  border-color: var(--bg-inverse);
  color: var(--text-on-inverse);
}

/* 30l. Search form ------------------------------------------------------
   The 404 and the search results are the two places a visitor lands when
   something already went wrong, and the search block ships unstyled. */
.skutsje-search {
  max-inline-size: 32rem;
}
.skutsje-search .wp-block-search__label {
  font-family: var(--font-display);
  font-weight: 700;
  display: block;
  margin-block-end: 0.5rem;
}
.skutsje-search .wp-block-search__input {
  border: var(--stroke-firm) solid var(--field-border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  font: inherit;
  color: var(--text-body);
  background: var(--bg-page);
  min-block-size: 48px;
}
.skutsje-search .wp-block-search__input:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-ring-halo);
}
.skutsje-search .wp-block-search__button {
  background: var(--brand-tertiary);
  color: var(--text-body);
  border: 0;
  border-radius: var(--radius-pill);
  padding-inline: 1.35rem;
  min-block-size: 48px;
  font-weight: 600;
  cursor: pointer;
}
.skutsje-search .wp-block-search__button:hover {
  background: var(--brand-primary);
  color: var(--text-on-inverse);
}

/* The archive title on a taxonomy or search page uses the page-hero band. */
.skutsje-page-hero .wp-block-query-title { color: var(--text-on-inverse); }

/* ==========================================================================
   31. Second accessibility review
   ========================================================================== */

/* 31a. The reduced-motion reset was switching off the nav's legibility ---
   The transparent bar over the hero only turns night blue through the
   scroll-driven animation. Block 30i sets animation-timeline: none on
   everything, so with reduced motion on, the bar stayed transparent and the
   white menu sat on the white page below the hero: 1.00:1, measured.
   The same held in any browser without animation-timeline, since the @supports
   block had no fallback. Both groups now get the solid bar from the start.
   The trade is the transparent opening shot, and legibility wins. */
@media (prefers-reduced-motion: reduce) {
  body:has(.skutsje-hero) .skutsje-nav { background: var(--bg-inverse); }
}
@supports not (animation-timeline: scroll()) {
  body:has(.skutsje-hero) .skutsje-nav { background: var(--bg-inverse); }
}

/* 31b. The one button that kept the old white-on-orange label -----------
   .skutsje-nav a (0,2,0) outranks the button colour from theme.json (0,1,0),
   so "Club van 100" stayed at 3.16:1 while every other button was fixed. */
/* De knop in de header is dezelfde knop als elders: zeiloranje diep met wit,
   4.61:1. Hier stond donkere tekst op diezelfde oranje - 3.84:1, onder de
   ondergrens - omdat de kleur uit een tijd stamt dat de knop lichter was. De
   kleur komt nu uit theme.json en de nav hoeft er niets aan te veranderen. */
.skutsje-nav .wp-block-button__link:hover { color: var(--text-on-inverse); }

/* 31c. Core's constrained layout was pulling cards apart -----------------
   Core sets margin-left/right: auto !important on every child of a
   constrained container. In a flex column that shrinks the child to its text
   width and centres it, so every card had a different left edge: measured
   34.2px, 6px and 39.4px on three cards in the same row. The layout type is
   fixed at the block level in the patterns; this catches content already
   saved with the old markup. */
.skutsje-card > *,
.skutsje-form-card > *,
.skutsje-linkcard > *,
.skutsje-person > *,
.skutsje-sponsor > *,
.skutsje-merch__item > *,
.skutsje-hero__body > *,
.skutsje-agenda-card__next > *,
.skutsje-agenda-card__season > * {
  margin-inline: 0 !important;
}

/* 31d. Card link targets ------------------------------------------------
   Title links measured 18px tall against the 24px of SC 2.5.8. */
.skutsje-cards .skutsje-card .wp-block-post-title a,
.skutsje-agenda-compact__place a {
  display: inline-block;
  padding-block: 0.25rem;
}

/* Whole-card link, as the sponsor tiles already had. Only the heading was
   clickable on the 404 and Over ons cards: 55x22px at the smallest. */
.skutsje-linkcard { position: relative; }
.skutsje-linkcard :where(h2, h3) a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
/* The rules for these cards named h3 while the 404 markup uses h2, so they
   applied to nothing and the titles kept the default blue underline. */
.skutsje-linkcard :where(h2, h3) { margin: 0; }
.skutsje-linkcard :where(h2, h3) a {
  color: var(--text-body);
  text-decoration: none;
}
.skutsje-linkcard:hover :where(h2, h3) a { color: var(--brand-primary); }

/* 31e. Search field placeholder ----------------------------------------
   The browser default measured 4.48:1, just under. forms.css already sets a
   token for this; the search block was not covered by it. */
.skutsje-search .wp-block-search__input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* 31f. Pagination ellipsis is not a button ------------------------------ */
.skutsje-pagination .page-numbers.dots {
  border-color: transparent;
  min-inline-size: 1.5rem;
}
.skutsje-pagination .wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Cards on the search and archive templates need an edge: a result without a
   featured image had no outline at all and read as a floating sentence. */
.skutsje-search-results .skutsje-card {
  border-top: var(--stroke-hair) solid var(--border-subtle);
  padding-block-start: 1rem;
}

/* 31g. Race page location line ------------------------------------------ */
.skutsje-event__meta {
  gap: 0.75rem;
  align-items: baseline;
}
.skutsje-event__meta .eyebrow { color: var(--brand-tertiary); }
.skutsje-event__place {
  color: color-mix(in srgb, var(--text-on-inverse) 82%, transparent);
  margin: 0;
}

/* ==========================================================================
   32. Client review, 28 augustus
   ========================================================================== */

/* 32a. The hero text was not in the container ---------------------------
   Core puts a cover with a custom content position on display:flex, and its
   own rule sets the inner container to width:auto at (0,3,0). As a flex item
   that shrinks to the text width: measured 590px inside a 2545px cover, so the
   copy sat far left of the 1280px container everything below it uses. */
/* Core doubles the class in its own selector to reach (0,4,0) precisely so it
   is hard to override. Doubling it back plus the theme class gets there. */
.wp-block-cover.skutsje-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container,
.wp-block-cover.skutsje-page-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
  width: 100%;
}

/* 32b. Button orange, deep enough to carry white ------------------------
   Zeiloranje met wit erop haalt 3.25:1 en zakt door de ondergrens. Zeiloranje
   diep haalt 4.61:1 en leest als dezelfde kleur; de gewone accentkleur blijft
   onaangeroerd overal waar hij geen witte tekst draagt.

   Die kleur stond hier als een kale hex en overrulede theme.json. Op de pagina
   won dit bestand, in de editor won theme.json, dus de knop had daar de lichte
   oranje met donkere tekst: een redacteur zag een andere knop dan de bezoeker.
   De kleur staat nu in theme.json, als palettekleur "Zeiloranje diep", zodat
   beide kanten en de kleurkiezer in de zijbalk hetzelfde zeggen. Alleen de
   hover blijft hier, want theme.json's :hover geldt niet voor de nav-knop. */
.wp-block-button__link:hover,
.skutsje-nav .wp-block-button__link:hover {
  background-color: var(--brand-secondary);
  color: #FFFFFF;
}
/* The outline button on the hero keeps its transparent ground. */
.wp-block-button.skutsje-button--on-dark .wp-block-button__link {
  background: transparent;
}

/* An arrow in the primary buttons, as in the design. */
.skutsje-button--arrow .wp-block-button__link::after,
.is-style-arrow .wp-block-button__link::after {
  content: "→";
  display: inline-block;
  margin-inline-start: 0.5rem;
  transition: transform var(--motion-quick);
}
.skutsje-button--arrow .wp-block-button__link:hover::after,
.is-style-arrow .wp-block-button__link:hover::after {
  transform: translateX(2px);
}

/* 32c. The floating card was showing its divider colour ------------------
   The card paints the hairline by putting a 1px gap over a grey ground. The
   right panel came up 16px short of the row because it carried the root block
   gap as a margin, so that grey showed along the top. */
.skutsje-agenda-card > * { margin-block: 0; }

.skutsje-agenda-card__race { margin-block-start: 0.75rem; }
.skutsje-agenda-card__place {
  margin-block-start: 0.25rem;
  color: color-mix(in srgb, var(--text-on-inverse) 70%, transparent);
}

/* .eyebrow is the size the design asks for; a preset font-size class on the
   same element carries !important and was overriding it. */
.skutsje-agenda-card__next .eyebrow,
.skutsje-agenda-card__next .is-style-eyebrow,
.skutsje-agenda-card__label { font-size: 0.75rem; }

/* 32d. News card titles were the link blue ------------------------------ */
.skutsje-cards .skutsje-card .wp-block-post-title a {
  color: var(--text-body);
}
.skutsje-cards .skutsje-card .wp-block-post-title a:hover,
.skutsje-cards .skutsje-card .wp-block-post-title a:focus-visible {
  color: var(--brand-tertiary-deep);
}
.skutsje-cards .skutsje-card .wp-block-read-more {
  color: var(--brand-tertiary-deep);
}

/* 32e. The CTA band carries a photo, as in the design ------------------- */
.skutsje-cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Absolutely positioned, but core's constrained layout still caps a child at
   contentSize and centres it with auto margins, so the photo rendered as a
   760px strip down the middle of the band. */
/* z-index: -1 legde de foto en de sluier achter de achtergrond van het blok
   eromheen. Op de pagina viel dat niet op, in de editor wel: daar heeft de
   canvas zijn eigen stapelcontext, dus de band werd wit met witte tekst erin.
   Een eigen stapelcontext op de band plus positieve lagen doet hetzelfde en
   werkt aan beide kanten gelijk. */
.skutsje-cta-band__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0 !important;
  max-width: none !important;
  /* Geen width/height van 100%: die rekenen tegen het padding-vak en wonnen in
     de editor van inset, waardoor de foto de band niet volledig vulde. */
}
.skutsje-cta-band__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0.25;
}
.skutsje-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--bg-inverse) 62%, transparent);
}
/* De inhoud boven de foto en de sluier. */
.skutsje-cta-band > *:not(.skutsje-cta-band__photo) {
  position: relative;
  z-index: 2;
}
/* The heading sat indented next to its own label: core's constrained layout
   again, centring a capped heading inside the column. */
.skutsje-cta-band__grid > *,
.skutsje-cta-band__grid > * > * { margin-inline: 0 !important; }

/* 32f. People, with their photograph ------------------------------------
   The crew used to be names in a pattern file. They are people with a face,
   a role and their own words, so the card leads with the photograph. */
/* Het raster stond alleen in het layout-attribuut van post-template, en dat
   overleeft het invoegen uit de inserter niet: wat het patroonbestand als
   {"type":"grid","columnCount":4} meegeeft, komt als {"type":"default"} in de
   pagina terecht. De bestaande pagina's ontsnapten daaraan omdat ze het
   patroon als verwijzing gebruiken in plaats van uitgeklapte blokken - een
   redacteur die het raster zelf invoegde kreeg schermbrede portretten onder
   elkaar, en de instelling om dat te herstellen zit drie panelen diep.
   Het raster hoort dus bij de klasse, net als de andere structuur binnen een
   patroon. .wp-block-post-template ervoor zodat dit ook wint van de
   layout-CSS die core inline zet wanneer het attribuut er wel is. */
.wp-block-post-template.skutsje-people,
.skutsje-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}
@media (min-width: 620px) {
  .wp-block-post-template.skutsje-people,
  .skutsje-people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .wp-block-post-template.skutsje-people,
  .skutsje-people { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.skutsje-person {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
}
.skutsje-person__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.skutsje-person__name {
  margin-block: 0.85rem 0;
  font-size: var(--wp--preset--font-size--large);
  letter-spacing: var(--tracking-tight);
}
.skutsje-person__role {
  margin-block-start: 0.15rem;
  color: var(--brand-tertiary-deep);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
@media (max-width: 900px) {
  .skutsje-people { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 560px) {
  .skutsje-people { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 32g. Race result ------------------------------------------------------
   Empty until a race has been sailed, so the row must not reserve space or
   show a stray separator when there is nothing to say. */
.skutsje-agenda-row { grid-template-columns: 150px 1fr auto auto; }
.skutsje-agenda-row__result {
  margin: 0;
  font-weight: 700;
  color: var(--brand-tertiary-deep);
  font-variant-numeric: tabular-nums;
}
.skutsje-agenda-row__result:empty { display: none; }
@media (max-width: 640px) {
  .skutsje-agenda-row { grid-template-columns: 110px 1fr auto; }
}

/* 32h. Club van 100 members --------------------------------------------- */
.skutsje-members {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.5rem 2rem;
}
.skutsje-members li {
  border-bottom: var(--stroke-hair) solid var(--border-subtle);
  padding-block: 0.5rem;
}

/* 32i. Builder credit ---------------------------------------------------- */
.site-footer__credit a {
  color: var(--brand-tertiary);
  text-decoration: none;
  font-weight: 600;
}
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible { text-decoration: underline; }

/* 32j. Webshop ----------------------------------------------------------
   The merchandise grid runs on WooCommerce now, so the price and the button
   are its blocks and carry its class names. */
.skutsje-merch__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.skutsje-merch__item .wp-block-post-title a {
  color: var(--text-body);
  text-decoration: none;
}
.skutsje-merch__item .wp-block-post-title a:hover { color: var(--brand-tertiary-deep); }
.skutsje-merch__price {
  font-family: var(--wp--preset--font-family--mono);
  color: var(--brand-tertiary-deep);
  font-weight: 500;
  margin-block-start: 0.35rem;
}
.skutsje-merch__price del { opacity: 0.6; margin-inline-end: 0.4rem; }
.skutsje-merch__button { margin-block-start: 0.85rem; }
.skutsje-merch__button .wp-block-button__link,
.skutsje-merch__button a.button {
  background: var(--wp--preset--color--accent-deep);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.2rem;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
  display: inline-block;
}
.skutsje-merch__button .wp-block-button__link:hover,
.skutsje-merch__button a.button:hover { background: var(--brand-secondary); }

/* 32k. Finish in the compact season list --------------------------------
   Only shows once a race has been sailed, so it must take no room when the
   field is empty. */
.skutsje-agenda-compact__result {
  margin: 0 0 0 auto;
  font-weight: 700;
  color: var(--brand-tertiary-deep);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.skutsje-agenda-compact__result:empty { display: none; }

/* 32l. Next race block --------------------------------------------------
   Replaces the Query Loop that used to fill this panel. Same look; the
   difference is that the editor now draws it from PHP and therefore shows the
   same race the page does. */
/* Het paneel droeg zijn donkere grond van de kaart eromheen, maar de tekst-
   kleuren zitten in het blok. Buiten die kaart was het dus wit op wit en zag
   een redacteur een lege plek. De grond hoort bij het blok, niet bij de kaart,
   dan klopt hij overal. De kaart zet hem niet nog eens. */
.wp-block-skutsje-next-race {
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  padding: clamp(1.5rem, 3vw, 2rem);
  block-size: 100%;
  /* Anders telt core's max-width alleen de inhoud en steekt het paneel aan
     weerskanten voorbij de kolom waar de rest in staat. */
  box-sizing: border-box;
}
/* Een eigen achtergrond uit de zijbalk wint hiervan, anders is de instelling
   er wel maar doet hij niets. */
.wp-block-skutsje-next-race.has-background { background: none; }

.skutsje-next-race__label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-tertiary);
  margin: 0;
}
.skutsje-next-race__name {
  font-family: var(--font-display);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-heading);
  color: var(--text-on-inverse);
  margin-block: 0.75rem 0;
}
.skutsje-next-race__when {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--small);
  color: color-mix(in srgb, var(--text-on-inverse) 60%, transparent);
  margin-block-start: 1rem;
}
.skutsje-next-race__empty {
  color: color-mix(in srgb, var(--text-on-inverse) 70%, transparent);
  margin-block-start: 0.75rem;
}
.skutsje-next-race__link {
  margin-block-start: 1.5rem;
  font-size: var(--wp--preset--font-size--small);
}
.skutsje-next-race__link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--brand-tertiary);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--motion-quick), gap var(--motion-quick);
}
.skutsje-next-race__link a::after {
  content: "→";
  display: inline-block;
}
.skutsje-next-race__link a:hover,
.skutsje-next-race__link a:focus-visible {
  color: var(--text-on-inverse);
  gap: 0.65rem;
}

/* 32. Winkelwagen in de header ------------------------------------------- */

/* Het blok rendert altijd; de badge draagt `hidden` zolang de wagen leeg is.
   Daar haakt dit op, dus het icoon verschijnt pas als er iets in zit. Dat volgt
   de eigen toestand van het blok in plaats van een tekst die per taal anders
   luidt. */
.skutsje-nav__cart:has(.wc-block-mini-cart__badge[hidden]) { display: none; }

.skutsje-nav__cart .wc-block-mini-cart__button {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.skutsje-nav__cart .wc-block-mini-cart__icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}
.skutsje-nav__cart .wc-block-mini-cart__button:hover .wc-block-mini-cart__icon {
  color: var(--brand-tertiary);
}
.skutsje-nav__cart .wc-block-mini-cart__badge {
  background: var(--brand-tertiary);
  color: var(--text-on-inverse);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  min-inline-size: 1.15rem;
  padding: 0.2rem;
  border-radius: 999px;
  text-align: center;
}

/* De gesloten lade van het blok draagt aria-hidden="true" maar is niet inert
   en niet verborgen: hij staat op left: 2545px, buiten beeld, met een knop
   Sluiten en een link Begin met winkelen erin. Die twee bleven gewoon in de
   tabvolgorde staan - op /merchandise/ waren het stop 30 en 31 van 33 - en hun
   focusring is transparant, dus de focus verdween twee keer zonder dat er iets
   op het scherm gebeurde. aria-hidden haalde ze intussen wel uit de
   toegankelijkheidsboom, dus een schermlezer kondigde niets aan. Dat is precies
   de combinatie die axe als aria-hidden-focus markeert (SC 4.1.2, 2.4.3,
   2.4.7). display: none haalt ze uit de tabvolgorde; het blok zet de vlag zelf
   om zodra de lade opengaat. */
.wc-block-mini-cart__drawer[aria-hidden="true"] {
  display: none;
}

/* 33. Onderaan een nieuwsbericht ----------------------------------------- */

/* Een kale "terug naar nieuws" onder een artikel is een doodlopende weg. Wie
   hier komt heeft net iets gelezen en wil het volgende. */
.skutsje-postnav {
  border-block-start: var(--stroke-hair) solid var(--border-subtle);
  margin-block-start: clamp(3rem, 6vw, 4.5rem);
  padding-block-start: clamp(2rem, 4vw, 3rem);
}
.skutsje-postnav__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (max-width: 700px) {
  .skutsje-postnav__pair { grid-template-columns: 1fr; }
}
.skutsje-postnav__side > * { margin-inline: 0 !important; }
/* De rechterkolom lijnt met de rechterrand uit, zodat het paar leest als een
   heen en een terug in plaats van als twee losse blokken. */
.skutsje-postnav__side--next { text-align: end; }

.skutsje-postnav .wp-block-post-navigation-link {
  margin-block-start: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--large);
  line-height: var(--leading-heading);
}
.skutsje-postnav .wp-block-post-navigation-link a {
  color: var(--wp--preset--color--foreground);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 var(--stroke-hair);
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--motion-quick), color var(--motion-quick);
}
.skutsje-postnav .wp-block-post-navigation-link a:hover,
.skutsje-postnav .wp-block-post-navigation-link a:focus-visible {
  color: var(--brand-tertiary-deep);
  background-size: 100% var(--stroke-hair);
}
/* Aan het begin of het eind van de reeks rendert core niets. De kolom moet dan
   ook geen kop overhouden die nergens heen wijst. */
.skutsje-postnav__side:not(:has(.wp-block-post-navigation-link)) { visibility: hidden; }

.skutsje-postnav__all { margin-block-start: clamp(2rem, 4vw, 3rem); }

/* 34. Laatste uitslag in het eerstvolgende-paneel ------------------------
   Na het seizoen draait het paneel om: niet de volgende wedstrijd maar de
   laatste uitslag. De plaats is dan het grootste element, want dat is wat
   een bezoeker tussen de seizoenen komt halen. Zelfde paneel, zelfde kleuren,
   zodat de kaart niet van karakter wisselt. */
.skutsje-next-race__result {
  display: block;
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  line-height: 1;
  color: var(--brand-tertiary);
  font-variant-numeric: tabular-nums;
}
.skutsje-next-race__result-race {
  display: block;
  margin-block-start: 0.5rem;
}

/* 35. Hoofdsponsor op de logowand ---------------------------------------
   Eén tegel boven de wand, in het midden, met het label en de naam erbij. De
   wand eronder sluit het niveau "Hoofdsponsor" uit, zodat het logo niet twee
   keer staat. Is er geen hoofdsponsor, dan rendert de rij niets en begint de
   wand waar hij altijd begon. */
.skutsje-sponsor-lead {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 30rem);
  justify-content: center;
  gap: 1rem;
}
.skutsje-sponsor-lead > * { margin-block: 0; }
.skutsje-sponsor--lead {
  aspect-ratio: auto;
  padding: 1.5rem 2rem 1.75rem;
  gap: 0.75rem;
  border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent);
}
.skutsje-sponsor--lead .skutsje-sponsor__tier {
  margin: 0;
  text-align: center;
}
.skutsje-sponsor--lead .skutsje-sponsor__logo,
.skutsje-sponsor--lead .skutsje-sponsor__logo a,
.skutsje-sponsor--lead .skutsje-sponsor__logo img { block-size: 6rem; }
/* De naam hoort hier wel bij het logo: wie hoofdsponsor is, wordt genoemd.
   Twee klassen plus de :has() van de verbergregel, dus deze wint. */
.skutsje-sponsor--lead:has(.skutsje-sponsor__logo img) .skutsje-sponsor__name { display: block; }
.skutsje-sponsors__lead + .skutsje-sponsors__query .skutsje-sponsor-grid { margin-block-start: 1.5rem; }

/* 36. Tijdlijn, uitgebreid en uitklapbaar --------------------------------
   Verticaal, want de historie telt meer periodes dan er naast elkaar passen.
   Zelfde lijn en dezelfde stip als de korte tijdlijn, zodat beide als één
   familie lezen. Het verhaal zit in een core/details: zonder JavaScript,
   toetsenbord en screenreader krijgen de native uitklap. De samenvatting
   kleurt als link, want hij gedraagt zich zo. */
.skutsje-timeline-long { max-width: 62ch; }
.skutsje-timeline-long > * { margin-block: 0; }
.skutsje-timeline-long__step {
  position: relative;
  padding: 0 0 2.75rem 2rem;
  border-left: var(--stroke-firm) solid var(--border-subtle);
}
.skutsje-timeline-long__step:first-child { border-left-color: var(--border-accent); }
.skutsje-timeline-long__step:last-child { padding-bottom: 0.5rem; }
.skutsje-timeline-long__step::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 0.55rem;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: var(--bg-page);
  border: var(--stroke-firm) solid var(--border-accent);
}
.skutsje-timeline-long__year {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-heading);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.75rem;
}
.skutsje-timeline-long__step > h3 { margin: 0; }
.skutsje-timeline-long__step > p:not(.skutsje-timeline-long__year) {
  margin-block-start: 0.5rem;
  color: var(--text-muted);
  text-wrap: pretty;
}
.skutsje-timeline-long .wp-block-details { margin-block-start: 0.75rem; }
.skutsje-timeline-long .wp-block-details summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--small);
  color: var(--brand-primary);
}
.skutsje-timeline-long .wp-block-details summary::marker { content: ""; }
.skutsje-timeline-long .wp-block-details summary::-webkit-details-marker { display: none; }
.skutsje-timeline-long .wp-block-details summary::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
}
.skutsje-timeline-long .wp-block-details[open] summary::after { content: "\2013"; }
.skutsje-timeline-long .wp-block-details summary:hover,
.skutsje-timeline-long .wp-block-details summary:focus-visible { color: var(--text-heading); }
.skutsje-timeline-long .wp-block-details > :not(summary) {
  margin-block-start: 0.75rem;
  color: var(--text-body);
  text-wrap: pretty;
}
.skutsje-timeline-long .wp-block-details > figure { margin-block-start: 1rem; }