@font-face { font-family: "Bricolage Grotesque"; font-weight: 400; font-display: swap; src: url("../fonts/bricolage-grotesque-400-t0USyBy.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap; src: url("../fonts/bricolage-grotesque-600-9TujzF2.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url("../fonts/bricolage-grotesque-800-7tst0g-.woff2") format("woff2"); }

:root {
  --bg: #FBF8F3;
  --band: #F3EADA;
  --band-alt: #F6EDDD;
  --ink: #1F1B16;
  --ink-soft: #5f564b;
  --ink-mute: #8a8074;
  --green: #3E5C50;
  --green-light: #5B7A6C;
  --green-deep: #1f302a;
  --gold: #C4883C;
  --gold-dark: #8a5f1f;
  --tag-clubavond: #e1ede6;
  --tag-clubavond-ink: #2f4a3f;
  --tag-interclub: #f5e6cf;
  --tag-tornooi: #ece7f2;
  --tag-tornooi-ink: #574b6e;
  --wood: #8F6A42;
  --line: #e9e1d5;
  --surface: #ffffff;
  --r-i: 8px;
  --r-s: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --radius: var(--r-i);
  --wrap: 1100px;
}

* { box-sizing: border-box; }

/* Basiskleur voor links: overal ons goud, niet het browserstandaard-blauw.
   Knoppen, rijen, menu's en andere bouwstenen met een eigen kleur overschrijven
   dit met hun eigen, specifiekere regel. */
a { color: var(--gold-dark); text-underline-offset: 2px; }

/* Visueel verborgen, wel voorgelezen: voor tekst die een schermlezer nodig
   heeft maar die niet nog eens naast een al leesbaar cijfer hoeft te staan. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;

  /* Houdt de footer onderaan bij korte pagina's. Zonder dit kruipt hij
     omhoog en blijft er een lap achtergrond onder staan. 100dvh en niet
     100vh: op mobiel telt vh de adresbalk mee, wat een schuifbalk oplevert
     op een pagina die past. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

h1 { font-size: clamp(28px, 7vw, 46px); line-height: 1.08; letter-spacing: -1px; margin: 12px 0; }
h2 { font-size: clamp(20px, 4vw, 27px); letter-spacing: -.4px; }
h1, h2 { font-weight: 800; letter-spacing: -0.03em; }

.btn, .btn-secondary {
  display: inline-block;
  padding: 13px 20px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
}
.btn { background: var(--green); color: var(--bg); }
.btn-secondary { background: transparent; border: 1.5px solid var(--gold); color: var(--gold-dark); cursor: pointer; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.site-nav { border-bottom: 1px solid var(--line); padding: 12px 0; }
.site-nav .inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.site-nav img { height: 40px; display: block; }
.site-nav ul { list-style: none; display: flex; align-items: center; gap: 16px; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a { color: var(--ink-soft); text-decoration: none; font-size: 14px; }
.site-nav a:hover { color: var(--ink); }

/* Menuknop: alleen op smalle schermen. Een verborgen checkbox met label
   (partials/_nav_toggle.html.twig) klapt de lijst open, zonder JavaScript. */
.nav-toggle-input, .nav-toggle { display: none; }

@media (max-width: 760px) {
  .site-nav .inner { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .nav-toggle-input { display: block; position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--radius);
    font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; user-select: none;
  }
  /* Fase 7 eindreview, punt 14: overal een goudrand overwogen, maar goud
     (#C4883C) haalt op de lichte achtergronden hier maar ~2.9:1 contrast
     (WCAG 1.4.11 vraagt 3:1 voor UI-componenten); dit groen haalt >4.4:1.
     Daarom hier bewust groen gelaten, zie het eindrapport. */
  .nav-toggle-input:focus-visible + .nav-toggle { outline: 2px solid var(--green-light); }
  .nav-toggle-input:checked + .nav-toggle { border-color: var(--green); color: var(--green); }

  .site-nav ul { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; margin-top: 6px; }
  .nav-toggle-input:checked ~ ul { display: flex; transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
  @starting-style { .nav-toggle-input:checked ~ ul { opacity: 0; transform: translateY(-6px); } }
  .site-nav ul li { border-top: 1px solid var(--line); }
  .site-nav ul li a { display: block; padding: 13px 2px; font-size: 16px; }

  .btn, .btn-secondary { display: block; }
}

.site-footer {
  background: var(--ink);
  color: var(--band);
  margin-top: 48px;
  padding: 28px 0;
  font-size: 13px;
}
.site-footer a { color: var(--gold); }
/* Eindigt de pagina op een donkere band (de partij van de week), dan sluit de
   footer daar zonder lichte strook op aan. */
main:has(> .puzzle:last-child) + .site-footer { margin-top: 0; }

.lead { color: var(--ink-soft); max-width: 42ch; margin: 0; }

.section { padding: var(--s6) 20px; }
.section > h2:first-child { margin-top: 0; }

/* =========================================================================
   Fase 7, taak 4: homepage met een fotokop over het volledige scherm, een
   schaakklok, "voor wie", nieuws als magazine en de agenda als lint.
   ========================================================================= */

/* ---------- fotokop over het volledige scherm ---------- */
.hero {
  /* Geen overflow: hidden, om dezelfde reden als .bighead: het
     uitgeklapte menu op smalle schermen moet over de kop heen kunnen steken. */
  /* Minder hoog dan het volledige scherm (was 100dvh): de kop liet voorheen
     niets van de rest van de pagina vermoeden. min() met een vaste
     px-waarde tempert ook extreem hoge, smalle vensters. align-items:
     center (in plaats van end) zet de inhoud iets hoger dan de onderrand,
     zodat zichtbaar is dat er meer volgt onder de foto. */
  position: relative; min-height: min(72dvh, 720px); display: grid; align-items: center;
  color: #fff; margin-bottom: var(--s6);
}
.hero > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); animation: hero-settle 2.4s var(--ease) forwards;
}
@keyframes hero-settle { to { transform: scale(1); } }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 17, 14, .55) 0%, rgba(20, 17, 14, .4) 35%, rgba(20, 17, 14, .85) 100%);
}
.hero-inner {
  position: relative; z-index: 1; width: 100%;
  display: grid; grid-template-columns: 1.4fr .9fr; gap: var(--s6);
  align-items: end; padding-top: 96px; padding-bottom: var(--s6);
}
.hero-text h1 { color: #fff; font-size: clamp(48px, 8vw, 96px); line-height: .95; letter-spacing: -3px; margin: 0 0 var(--s4); }
.hero-text .lead { color: #efe7da; max-width: 34ch; font-size: 18px; margin: 0 0 var(--s5); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px;
  border-radius: var(--r-i); background: var(--gold); color: var(--ink); font-weight: 700; text-decoration: none;
}
.cta:hover { background: #d59a4c; }
.cta:active { transform: scale(.97); }
.hero-link { color: #f3eada; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.hero-link:hover { color: #fff; }

/* Schaakklok: een glasvlak boven de foto, met een effen terugval voor wie
   geen doorschijnende vlakken wil zien. */
.hero-next {
  justify-self: end; width: 100%; max-width: 320px;
  background: rgba(251, 248, 243, .1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-s); padding: var(--s5);
}
@media (prefers-reduced-transparency: reduce) {
  .hero-next { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.hero-next-label { margin: 0; font-size: 14px; color: #d9cdb8; }
.hero-next-when { margin: var(--s2) 0 0; font-size: 25px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; }
.hero-next-count { display: flex; gap: var(--s3); margin-top: var(--s4); font-variant-numeric: tabular-nums; }
.hero-next-count div { flex: 1; background: var(--ink); border-radius: var(--r-i); padding: var(--s2) 0; text-align: center; }
.hero-next-count b { display: block; font-size: 24px; line-height: 1; }
.hero-next-count span { font-size: 11px; color: #bfb29b; }
.hero-next.is-live .hero-next-count, .hero-next.is-over .hero-next-count { display: none; }
.hero-next .attendance-count { display: block; margin-top: var(--s3); font-size: 13px; color: #e8dcc6; }

@media (max-width: 760px) {
  .hero { min-height: min(78dvh, 650px); }
  .hero-inner { grid-template-columns: 1fr; gap: var(--s5); padding-top: 84px; padding-bottom: var(--s5); }
  .hero-text h1 { font-size: 34px; letter-spacing: -1.5px; }
  .hero-text .lead { font-size: 16px; }
  .hero-actions { align-items: stretch; }
  .hero-next { justify-self: stretch; max-width: none; }
}

/* ---------- voor wie: drie beelden, ongelijk ---------- */
.tiles { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s4); margin-top: var(--s6); }
.tile {
  position: relative; border-radius: var(--r-s); overflow: hidden; min-height: 420px;
  color: #fff; display: flex; align-items: end; text-decoration: none;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(20, 17, 14, .8));
}
.tile > div { position: relative; z-index: 1; padding: var(--s5); }
.tile h3 { color: #fff; margin: 0 0 4px; font-size: 24px; letter-spacing: -.5px; }
.tile p { margin: 0; color: #eadfcd; font-size: 14.5px; max-width: 30ch; }

@media (max-width: 820px) {
  .tiles { grid-template-columns: 1fr; }
  /* Op de homepage schuiven de drie tegels zijwaarts op smalle schermen. */
  .who-grid {
    grid-template-columns: 78%; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: var(--s5) -20px 0; padding: 0 20px; scroll-padding-inline: 20px;
  }
  .tile { min-height: 340px; scroll-snap-align: start; }
  /* In deze zijwaartse strook alleen faden, niet omhoog schuiven: de
     basis-translateY(24px) van .rise telde mee in de scrollhoogte, waardoor
     de strook ook 24px verticaal kon scrollen. overflow-y: hidden houdt de
     strook strikt horizontaal. */
  .who-grid .tile.rise { transform: none; }
  .who-grid { overflow-y: hidden; }
}

/* ---------- nieuws als magazine: één groot verhaal, twee klein ---------- */
.news-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s4); margin-top: var(--s6); }
.story { display: block; text-decoration: none; color: inherit; }
.story .img { display: block; border-radius: var(--r-s); overflow: hidden; aspect-ratio: 16 / 10; background: var(--band); }
.story img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.story h3 { font-size: 26px; line-height: 1.1; letter-spacing: -.6px; margin: var(--s3) 0 4px; }
.story .meta { color: var(--ink-soft); font-size: 13px; }
.side { display: grid; gap: var(--s4); align-content: start; }
.side .story .img { aspect-ratio: 16 / 9; }
.side .story h3 { font-size: 19px; }

@media (max-width: 820px) { .news-grid { grid-template-columns: 1fr; gap: var(--s5); } }

/* ---------- wat er aankomt: de agenda als lint ---------- */
.agenda-lint { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: var(--s6); border-top: 2px solid var(--ink); }
.agenda-lint a { display: block; padding: var(--s5) var(--s4) var(--s5) 0; text-decoration: none; color: inherit; border-right: 1px solid var(--line); }
.agenda-lint a:last-child { border-right: 0; }
.agenda-lint a:hover .d { color: var(--green); }
.agenda-lint .d { display: block; font-size: 40px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; transition: color .2s ease; }
.agenda-lint .m { display: block; margin-top: 2px; color: var(--gold-dark); font-weight: 700; font-size: 13px; }
.agenda-lint h3 { margin: var(--s2) 0 2px; font-size: 17px; font-weight: 700; }
.agenda-lint p { margin: 0; color: var(--ink-soft); font-size: 13.5px; }
.agenda-lint a.is-cancelled .d, .agenda-lint a.is-cancelled .m { color: var(--ink-soft); }

@media (max-width: 820px) {
  .agenda-lint { grid-template-columns: 1fr 1fr; }
  .agenda-lint a:nth-child(2) { border-right: 0; }
  .agenda-lint a { border-bottom: 1px solid var(--line); padding-left: 0; }
}

/* =========================================================================
   Fase 7, taak 6: partij van de week op de homepage. Structuur en stijl uit
   design/mockups/fase-7/a.html (sectie "Partij van de week"): een
   donkergroene band, de notatie als klikbare knoppen, en een bord dat zonder
   JavaScript door de server getekend is (.static-board, 8x8 CSS-grid) en dat
   game_controller.js vervangt door een bespeelbaar cm-chessboard.
   ========================================================================= */
.puzzle { background: var(--green-deep); color: #f3eada; }
.puzzle .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s6); align-items: center; padding-top: var(--s6); padding-bottom: var(--s6); }
/* min-width: 0: zonder dit mag een grid-item nooit smaller worden dan zijn
   eigen inhoud (min-width: auto standaard) - en de notatie hieronder (.moves,
   zelf ook een grid) telt daarbij mee. Op een smal scherm duwde dat deze
   kolom, en dus de hele band, breder dan het scherm. */
.puzzle .game-info { min-width: 0; }
.puzzle h2 { color: #fff; }
.puzzle .players { margin: var(--s4) 0 0; font-size: 19px; color: #fff; }
.puzzle .event { margin: 4px 0 0; color: #a9bcb3; font-size: 14px; }

.puzzle .moves {
  list-style: none; margin: var(--s5) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px var(--s4);
  max-height: 188px; overflow-y: auto; overflow-x: hidden; font-variant-numeric: tabular-nums;
  /* Smalle, rustige scrollbalk in de kleuren van de band in plaats van de
     grijze systeembalk. Ruimte rechts zodat hij niet over de zetten valt. */
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 136, 60, .55) transparent;
}
.puzzle .moves::-webkit-scrollbar { width: 6px; }
.puzzle .moves::-webkit-scrollbar-track { background: transparent; }
.puzzle .moves::-webkit-scrollbar-thumb { background: rgba(196, 136, 60, .55); border-radius: 3px; }
.puzzle .moves::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.puzzle .moves li { display: flex; gap: 6px; align-items: center; min-width: 0; }
/* display: flex hierboven wint anders van het hidden-attribuut (zetten na het sleutelmoment). */
.puzzle .moves [hidden] { display: none; }
.puzzle .moves .no { color: #7f978c; width: 26px; font-size: 14px; }
.puzzle .moves button {
  border: 0; background: none; color: #dfe8e3; font: inherit; font-size: 15px;
  padding: 2px 6px; border-radius: var(--r-i); cursor: pointer; min-height: 32px;
}
.puzzle .moves button:active { background: rgba(255, 255, 255, .14); }
.puzzle .moves button.on { background: var(--gold); color: var(--ink); font-weight: 700; }
/* Op een aanraakscherm is 32 px te krap (algemene regel: tikvlakken ≥ 44 px);
   op een muisapparaat mag de dichte notatie-grid uit de mockup wel zo
   compact blijven. .moves blijft binnen zijn max-height gewoon scrollen
   (overflow-y: auto hierboven), ook met de hogere knoppen op een telefoon. */
@media (pointer: coarse) {
  .puzzle .moves button { min-height: 44px; }
}

.puzzle .controls { display: flex; gap: 10px; margin-top: var(--s5); }
.puzzle .controls button {
  min-height: 48px; min-width: 48px; border-radius: var(--r-i);
  border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff;
  font: inherit; font-size: 22px; cursor: pointer; transition: background-color .2s ease, transform 160ms var(--ease);
}
.puzzle .controls button:active { transform: scale(.97); }
.puzzle .controls .play { font-size: 15px; font-weight: 700; padding: 0 22px; background: var(--gold); border-color: var(--gold); color: var(--ink); }
.puzzle .status { margin-top: var(--s4); min-height: 28px; font-weight: 600; color: var(--gold); }
.puzzle.quiz .status { font-size: 19px; }

.puzzle .board {
  /* min-width: 0 is nodig omdat een grid-item van zichzelf niet smaller
     wordt dan zijn inhoud (min-width: auto standaard): zonder dit duwt het
     SVG-bord (width/height 100%, dus een eigen intrinsieke grootte zolang
     de kolombreedte nog niet vaststaat) de kolom breder dan de rest van de
     band, met een horizontale schuifbalk op smalle schermen tot gevolg. */
  position: relative; width: 100%; min-width: 0; aspect-ratio: 1; border-radius: var(--r-s); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35); justify-self: end;
}
/* cm-chessboard zet op zijn eigen wrapper-div een inline pixelbreedte/-hoogte
   (zijn "responsive"-meting). Blijft die div gewoon in de normale flow, dan
   telt die inline maat mee voor de grid-kolom hierboven, met hetzelfde
   probleem als min-width: auto: op het moment van meten staat de uiteindelijke
   kolombreedte nog niet vast, dus de kolom groeit mee met een te grote eerste
   meting (en blijft dat, want de volgende meting ziet dan weer die te grote
   kolom). position: absolute haalt die div uit de flow, zodat zijn eigen maat
   nooit meer de kolombreedte kan beïnvloeden: hij past zich altijd naar
   .board, nooit omgekeerd. */
.puzzle .board:not(.static-board) > div { position: absolute; inset: 0; }
.puzzle .board.shake { animation: game-shake .32s cubic-bezier(.36, .07, .19, .97); }
@keyframes game-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* Bord zonder JavaScript: dezelfde 8x8 grid als cm-chessboard erna gebruikt,
   a8 linksboven, zodat er geen sprong is wanneer de controller het overneemt. */
.static-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.static-board [data-square] { display: grid; place-items: center; min-width: 0; min-height: 0; }
.static-board [data-square] svg { width: 78%; height: 78%; }
.static-board [data-square]:nth-child(16n + 1), .static-board [data-square]:nth-child(16n + 3),
.static-board [data-square]:nth-child(16n + 5), .static-board [data-square]:nth-child(16n + 7),
.static-board [data-square]:nth-child(16n + 10), .static-board [data-square]:nth-child(16n + 12),
.static-board [data-square]:nth-child(16n + 14), .static-board [data-square]:nth-child(16n + 16) { background: #efe3cc; }
.static-board [data-square]:nth-child(16n + 2), .static-board [data-square]:nth-child(16n + 4),
.static-board [data-square]:nth-child(16n + 6), .static-board [data-square]:nth-child(16n + 8),
.static-board [data-square]:nth-child(16n + 9), .static-board [data-square]:nth-child(16n + 11),
.static-board [data-square]:nth-child(16n + 13), .static-board [data-square]:nth-child(16n + 15) { background: #b08a5e; }

/* Kleurthema voor cm-chessboard (style.cssClass: "philidor"), lichte/donkere
   velden zoals hierboven, en de markering van de laatste zet in goud. */
.cm-chessboard.philidor .board .square.white { fill: #efe3cc; }
.cm-chessboard.philidor .board .square.black { fill: #b08a5e; }
.cm-chessboard.philidor .board .border { fill: #b08a5e; stroke: none; }
.cm-chessboard.philidor .coordinates .coordinate { fill: #8F6A42; font-size: 6px; }
.cm-chessboard.philidor .coordinates .coordinate.black { fill: #efe3cc; }
/* Vlakke rgba-goud viel weg op het donkere veld (#b08a5e): te weinig
   contrast tussen de twee. Een gouden kader (stroke) rond het volledige veld
   blijft zichtbaar op beide veldkleuren, de lichte vulling erbovenop is
   enkel een accent. */
.cm-chessboard.philidor .markers .marker.marker-square {
  fill: rgba(196, 136, 60, .3); stroke: #f4c876; stroke-width: 3px; opacity: 1;
}

@media (max-width: 820px) {
  .puzzle .wrap { grid-template-columns: 1fr; gap: var(--s5); padding-top: var(--s5); padding-bottom: var(--s5); }
  .puzzle .board { justify-self: stretch; }
}

@media (max-width: 480px) {
  /* Elk zetpaar (nummer + witte zet + zwarte zet) staat zonder spatie
     aaneen (zie home/_game.html.twig) en kan dus nergens afbreken: op een
     telefoon is er voor drie van die paren naast elkaar te weinig plaats.
     Eén kolom laat elk paar zijn eigen volle breedte gebruiken. */
  .puzzle .moves { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero > img { transform: none; }
  .puzzle .board.shake { animation: none; }
}

/* ---------- tekstpagina's ---------- */
/* De leeswijdte beperken we op de tekstblokken zelf, niet op de container.
   Zette je de container smaller, dan verspringt de linkerrand tussen pagina's:
   een smaller gecentreerd blok begint verder naar rechts dan de navigatie
   erboven. Nu houdt elke pagina dezelfde linkerrand en blijft de regellengte
   toch leesbaar. */
.prose > p,
.prose > ul,
.prose > ol,
.prose > h1,
.prose > h2,
.prose > h3,
.prose > .card,
.prose > form,
.prose > .cta-row { max-width: 70ch; }

.prose p, .prose li { color: var(--ink-soft); }
.prose h2 { margin-top: 28px; }
.prose .card p { margin-bottom: 0; }
.cta-row { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cta-row a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }

.tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tags span { background: var(--band); color: var(--green); border-radius: 999px; padding: 3px var(--s3); font-size: 13px; font-weight: 600; }

/* ---------- formulieren ---------- */
.notice { margin-bottom: 20px; }
.honeypot { position: absolute; left: -9999px; }
form label { display: block; font-weight: 600; font-size: 14px; margin: 16px 0 5px; }
/* Opsommen van types is fout gegaan: password ontbrak op de inlogpagina.
   Nu andersom, alles behalve wat geen tekstveld is. Dan glipt een nieuw
   veldtype er niet meer doorheen. */
form input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
form textarea,
form select {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-i);
  background: var(--surface);
  font: inherit;
  color: var(--ink);
}
/* Punt 14: zie de toelichting bij .nav-toggle-input:focus-visible hierboven, zelfde afweging (bewust groen, niet goud). */
form input:focus, form textarea:focus, form select:focus { outline: 2px solid var(--green-light); border-color: transparent; }
form button { margin-top: 18px; border: 0; cursor: pointer; font: inherit; }
form ul { color: #a3342a; font-size: 13px; padding-left: 18px; margin: 6px 0 0; }

/* Inline links in lopende tekst volgen het palet, niet het browserstandaard-blauw.
   Knoppen uitgesloten: die hebben hun eigen kleuren, en een gouden tekst op een
   groene knop is onleesbaar. */
.prose a:not(.btn):not(.btn-secondary):not(.row):not(.news-event),
main p a:not(.btn):not(.btn-secondary):not(.row):not(.news-event) {
  color: var(--gold-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.prose a:not(.btn):not(.btn-secondary):not(.row):not(.news-event):hover,
main p a:not(.btn):not(.btn-secondary):not(.row):not(.news-event):hover { color: var(--ink); }

.event-flag {
  /* inline-block is hier geen opmaakkeuze maar een noodzaak: een doorhaling
     van een ouder loopt dwars door inline kinderen heen en is van binnenuit
     niet te annuleren. Met inline-block valt de badge erbuiten. */
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--bg);
  /* --ink-mute geeft maar 3,66:1 contrast op --bg; --ink-soft haalt de 4,5:1 (spec §7). */
  background: var(--ink-soft);
  border-radius: var(--r-i);
  padding: 1px 6px;
  vertical-align: 2px;
  text-decoration: none;
}

/* ---------- activiteit ---------- */
.event-head { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.event-head h1 { margin: 0; }
.event-kind { margin: 0 0 var(--s1); font-size: 13px; }
.event-facts { margin: 0 0 var(--s4); max-width: 70ch; }
.fact-icon { width: 20px; height: 20px; color: var(--green); flex: none; }
.prose > .soft-note, .prose > .event-head, .prose > .rows { max-width: 70ch; }
.prose > .soft-note { margin: var(--s4) 0; }

/* ---------- meer ademruimte op smalle schermen ----------
   Op desktop staan kaarten en lijsten naast elkaar en zorgt de kolombreedte
   zelf voor rust. Gestapeld op een telefoon valt die weg, en dan zijn dezelfde
   maten te krap. Alles wat verticaal stapelt krijgt hier meer lucht. */
@media (max-width: 760px) {
  .site-nav { padding: 14px 0 10px; }
  .site-nav .inner { gap: 10px 14px; }

  .section { padding: 40px 20px; }
  .section h2 { margin-bottom: 4px; }

  .card { padding: 22px 20px; }

  .prose h2 { margin-top: 34px; }
  .prose ul { padding-left: 20px; }
  .prose li { margin-bottom: 10px; }

  .site-footer { margin-top: 40px; padding: 32px 0; }
}

/* ---------- accountknop in de navigatie ---------- */
.nav-account { display: flex; align-items: center; }
.nav-account a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
}
.nav-account a:hover { border-color: var(--green); color: var(--green); }

@media (max-width: 760px) {
  /* Op mobiel staat het icoon tussen de tekstitems; een label erbij maakt
     duidelijk waar het heen gaat, want daar is geen title-tekst te zien. */
  .nav-account a { width: auto; height: auto; border: 0; border-radius: 0; gap: 6px; }
  .nav-account a::after { content: attr(aria-label); font-size: 14px; }
}

/* ---------- aanwezigheid ---------- */
/* Twee even brede knoppen naast elkaar, ook op een telefoon: dit is het
   scherm dat vanuit de WhatsApp-groep wordt geopend. */
/* Dimmen kan pas als er al een keuze is (anders lijken twee gelijke opties
   toevallig ongelijk); het ⋯-menu (forfait) telt niet mee, dat blijft altijd
   op volle sterkte. */
.pair:has(button[aria-pressed="true"]) button[aria-pressed="false"] { opacity: .7; }
.board-more .pair button[aria-pressed="false"] { opacity: 1; }
.pair button[aria-pressed="true"]::before { content: "\2713\00a0"; }

.attendance-count { font-size: 15px; }

form label.checkbox-row { display: flex; align-items: center; gap: 8px; font-weight: 400; }

/* ---------- kampioenschap ---------- */
/* Een kruistabel is breed: hij scrolt binnen zijn eigen kader, niet de pagina. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.standing { width: 100%; border-collapse: collapse; font-size: 14px; }
.standing th, .standing td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.standing td:first-child, .standing th:first-child { width: 2.5em; }
.standing .is-withdrawn { color: var(--ink-soft); }
.entry-flag { color: var(--ink-soft); font-size: 12px; }
.cross-table td { text-align: center; }
.cross-table td:nth-child(2) { text-align: left; }

/* ---------- wedstrijdleider ---------- */
.arbiter > h1 { margin-bottom: var(--s3); }
.arbiter > h2 { margin: var(--s6) 0 var(--s2); font-size: 18px; }
.arbiter > .action-card, .arbiter > .rows, .arbiter > .soft-note { max-width: 640px; }
.action-btn { display: block; width: 100%; margin-top: var(--s3); }
form[data-form="paringen"] { max-width: 640px; }
.arbiter-list { list-style: none; padding: 0; margin: 0; }
.arbiter-list li { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.arbiter fieldset { border: 0; padding: 0; margin: 16px 0; }
.arbiter legend { font-weight: 700; margin-bottom: 6px; }
.form-hint { color: var(--ink-soft); font-size: 13px; margin: 4px 0 0; }
.cta-row form { margin: 0; }
.board { margin: var(--s3) 0; max-width: 640px; }
.board-head { display: flex; justify-content: space-between; align-items: baseline; }
.board-nr { font-size: 12px; font-weight: 800; color: var(--wood); }
.board-names { margin: var(--s1) 0 0; }
.board-selects { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s2); align-items: center; margin-top: var(--s2); }
.board-selects select { min-width: 0; }
.board-error, .board-notice { color: var(--gold-dark); font-size: 14px; margin: var(--s2) 0 0; }
.board-absent { background: var(--band); border-color: var(--band); }
/* opacity zwakt ook de tekstkleur af tot onder 4,5:1 contrast (spec §7); een
   effen band met eigen tekstkleur blijft leesbaar. Dubbele klasse: wint zo van
   .action-card zonder van de bronvolgorde in dit bestand af te hangen. */
.action-card.board-bye { background: var(--band); color: var(--ink-soft); }
.triple button[aria-pressed="true"]::before { content: "\2713\00a0"; }
.board-more { margin-top: var(--s2); }
.board-more summary { cursor: pointer; list-style: none; width: 44px; height: 44px; line-height: 44px; text-align: center; border-radius: var(--r-i); color: var(--ink-soft); }
.board-more summary::-webkit-details-marker { display: none; }
.board-more[open] summary { background: var(--band); }
.link-button { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; padding: var(--s2) 0; color: var(--gold-dark); text-decoration: underline; cursor: pointer; font: inherit; }
.round-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3); max-width: 640px; }
.round-head h1 { margin: 0; }
.round-head p { margin: 0; }
.teller { margin: 0; font-family: ui-monospace, Menlo, monospace; font-weight: 800; font-size: 20px; color: var(--green); }

/* ---------- menu's ---------- */
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--green); }
.member-nav a.member-nav-staff { color: var(--green); font-weight: 700; }

/* "Meer": een <details> met een uitklaplijst op desktop. */
.nav-more { position: relative; }
.nav-more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink-soft); padding: 4px 10px; border: 1.5px solid var(--line); border-radius: var(--r-i); }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: " \25BE"; }
.site-nav .nav-more-list {
  position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 10;
  display: flex; flex-direction: column; gap: 0; min-width: 200px; padding: var(--s1) 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-i);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}
.nav-more-list a { display: flex; align-items: center; min-height: 44px; padding: var(--s2) var(--s4); }
.nav-more-list .nav-logout { border-top: 1px solid var(--line); }
.nav-extra { display: none; }

.arbiter-nav { background: var(--band); }
.arbiter-brand { font-weight: 800; color: var(--ink) !important; font-size: 16px !important; }
.arbiter-nav a { color: var(--green); font-weight: 700; }

@media (max-width: 760px) {
  .nav-more { display: none; }
  .nav-extra { display: block; }
  .site-nav a[aria-current="page"] { box-shadow: none; }
}

/* =========================================================================
   Fase 5: één ruimteschaal en een handvol bouwstenen die elke pagina deelt.
   Zie docs/superpowers/specs/2026-09-24-fase-5-redesign-design.md, §2.
   ========================================================================= */
:root { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; }

/* Kalenderblokje: dag groot, maand of weekdag klein. Overal dezelfde vorm. */
.cal {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  flex: none; width: 48px; min-height: 48px; padding: 6px 0;
  border-radius: var(--r-i); background: var(--green); color: var(--bg);
  line-height: 1.05; text-align: center;
}
.cal-day { font-size: 18px; font-weight: 800; }
.cal-sub { font-size: 10.5px; }
.cal-lg { width: 64px; min-height: 64px; }
.cal-lg .cal-day { font-size: 26px; }
.cal-lg .cal-sub { font-size: 12px; }
/* --ink-mute geeft maar 3,66:1 contrast met de witte cijfertekst; --ink-soft haalt 4,5:1 (spec §7). */
.cal-muted { background: var(--ink-soft); }

/* Rijen: lijsten zonder kaart per item. */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 44px; padding: var(--s3) 0;
  border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
}
.rows > .row:last-child { border-bottom: 0; }
a.row:hover .row-title { color: var(--green); }
.row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-title { font-weight: 700; }
.row-meta { font-size: 12.5px; color: var(--ink-soft); }
.row-end { margin-left: auto; color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
.row-score { flex: none; width: 28px; text-align: center; font-family: ui-monospace, Menlo, monospace; font-weight: 800; font-size: 18px; }
/* Alleen de titeltekst doorstrepen, niet de spatie voor het label. */
.row.is-cancelled .row-name { text-decoration: line-through; }

/* Een kaart is voor één ding waar je iets mee doet. */
.action-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s4); }
.action-card + .action-card { margin-top: var(--s3); }
.action-head { display: flex; align-items: center; gap: var(--s3); }
.soft-note { background: var(--band); border: 0; border-radius: var(--r-s); padding: var(--s3) var(--s4); }
.soft-note p:last-child { margin-bottom: 0; }

/* Twee of drie gelijke knoppen naast elkaar. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s3); }
.pair form { margin: 0; }
.pair button, .pair .btn, .pair .btn-secondary { width: 100%; margin-top: 0; min-height: 44px; }
.triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s3); }
.triple form { margin: 0; }
.triple button { width: 100%; margin-top: 0; min-height: 48px; font-size: 17px; padding: var(--s3) 0; }

/* Radiogroep die eruitziet als een knoppenpaar; zonder JS gewone radioknoppen. */
.pair-radio label { display: block; margin: 0; font-weight: 700; }
.pair-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pair-radio span {
  display: block; text-align: center; min-height: 44px; padding: 11px var(--s2);
  border-radius: var(--r-i); border: 1.5px solid var(--gold); color: var(--gold-dark); cursor: pointer;
}
.pair-radio input:checked + span { background: var(--green); border-color: var(--green); color: var(--bg); }
/* Punt 14: zelfde afweging, bewust groen gelaten. */
.pair-radio input:focus-visible + span { outline: 2px solid var(--green-light); }
/* Bij "beide afwezig" is er maar één radio (alleen Uitstellen): die neemt dan de volle breedte. */
.pair-radio label:only-child { grid-column: 1 / -1; }

/* Schakelaar: gewone links, de huidige met aria-current. */
.segmented { display: inline-flex; max-width: 100%; overflow-x: auto; border: 1.5px solid var(--line); border-radius: var(--r-i); margin: var(--s2) 0 var(--s4); }
.segmented a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px var(--s4); font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.segmented a[aria-current="page"] { background: var(--green); color: var(--bg); }

.group-title { font-size: 12.5px; font-weight: 800; color: var(--wood); margin: var(--s5) 0 0; }
.group-title a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.muted { color: var(--ink-soft); }
@media (max-width: 760px) { .hide-narrow { display: none; } }

/* ---------- ledengedeelte ---------- */
.member > h1 { margin-bottom: var(--s4); }
.member > h2 { margin: var(--s6) 0 var(--s2); font-size: 18px; }
.member > .action-card, .member > .soft-note, .member > .rows, .member > section { max-width: 640px; }
.member > * + .action-card, .member > * + .soft-note, .member > * + section { margin-top: var(--s3); }
.h1-sub { font-size: .5em; font-weight: 600; letter-spacing: 0; }
.small { font-size: 12.5px; }
.next-game { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.next-game-body { display: flex; flex-direction: column; gap: 2px; }
.next-game-piece { font-size: 28px; line-height: 1; }
.standing .num { text-align: right; }
.standing tr.is-me td { background: var(--band); font-weight: 700; }
.score-win { color: var(--green); }
.score-loss { color: var(--wood); }
.attendance-names { color: var(--ink-soft); font-size: 13px; margin: var(--s3) 0 0; }

/* ---------- nieuws ---------- */
.row-thumb { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-i); background: var(--band); }
.row-intro { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news > .rows, .news > .soft-note { max-width: 720px; }
.news-pages { justify-content: space-between; max-width: 720px; }
.news-meta { margin: calc(-1 * var(--s2)) 0 var(--s4); }
/* .news-body en .news-gallery zijn geen rechtstreekse kinderen van .prose
   (ze zitten in .news-post), dus de algemene ".prose > p"-regels raken ze
   niet: zonder dit liepen ze op desktop over de volle .prose-breedte
   (1060 px) door in plaats van de leesbreedte van 70ch aan te houden. */
.news-post > .news-body, .news-post > .news-gallery { max-width: 70ch; }
.news-event { display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0; color: inherit; text-decoration: none; min-height: 44px; }
.news-event:hover .row-title { color: var(--green); }
.news-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: var(--s5) 0; }
.news-gallery figure { margin: 0; }
.news-gallery a { display: block; }
.news-gallery img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-i); }
.news-gallery figcaption { font-size: 12.5px; color: var(--ink-soft); margin-top: var(--s1); }
/* De eerste foto springt in het oog: twee kolommen en twee rijen breed. */
.news-gallery figure:first-child { grid-column: span 2; grid-row: span 2; }
.news-gallery figure:first-child img { aspect-ratio: auto; height: 100%; }
@media (max-width: 760px) {
  .news-gallery { grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
}

/* ---------- nieuwsbericht als artikel ---------- */
.article { max-width: 760px; margin: 0 auto; }
.article .lead { font-size: 22px; line-height: 1.45; max-width: none; margin: var(--s4) 0 var(--s5); color: var(--ink); }

/* ---------- lightbox ---------- */
.lightbox { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: rgba(20, 17, 14, .92); color: #fff; }
.lightbox::backdrop { background: rgba(20, 17, 14, .92); }
.lightbox[open] { transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.lightbox[open]::backdrop { transition: opacity 200ms ease; }
@starting-style {
  .lightbox[open] { opacity: 0; transform: scale(.97); }
  .lightbox[open]::backdrop { opacity: 0; }
}
.lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s6) var(--s4); box-sizing: border-box; }
.lightbox img { max-width: 100%; max-height: calc(100% - 48px); object-fit: contain; }
.lightbox figcaption { font-size: 14px; color: #e9e1d5; text-align: center; }
.lightbox button { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox button:focus-visible { outline: 2px solid #fff; }
.lightbox-close { top: var(--s4); right: var(--s4); }
.lightbox-prev { left: var(--s4); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--s4); top: 50%; transform: translateY(-50%); }

/* ---------- focus en beweging ---------- */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn, .btn-secondary, .row, .cta-row a, .segmented a, .cta { transition: background-color .2s ease, color .2s ease, transform 160ms var(--ease), box-shadow .2s ease; }
.btn:active, .btn-secondary:active { transform: scale(.97); }
.rise { opacity: 0; transform: translateY(24px); animation: rise .6s var(--ease) forwards; }
.rise.d1 { animation-delay: .06s; } .rise.d2 { animation-delay: .12s; } .rise.d3 { animation-delay: .18s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-property: color, background-color, border-color, opacity !important; }
  .rise { opacity: 1; transform: none; }
}

/* =========================================================================
   Fase 7, taak 3: vaste fotokop met het menu erin, en een donkere footer,
   op elke publieke pagina behalve de homepage (die volgt in taak 4).
   ========================================================================= */

/* ---------- menu boven een foto ---------- */
.site-nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; }
.site-nav--overlay {
  /* Boven de kaart die over de kop schuift (.overlap, z-index 2): anders
     viel het uitgeklapte menu op een telefoon eronder. */
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  border-bottom: 0; padding: 18px 0;
}
.site-nav--overlay .brand { color: #fff; }
.site-nav--overlay .brand img { height: 30px; }
.site-nav--overlay a { color: #f3eada; }
.site-nav--overlay a:hover { color: #fff; }
.site-nav--overlay a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--gold); }
.site-nav--overlay .nav-account a { border-color: rgba(255, 255, 255, .4); color: #fff; }
.site-nav--overlay .nav-account a:hover { border-color: #fff; }

@media (max-width: 760px) {
  .site-nav--overlay .nav-toggle {
    border-color: rgba(255, 255, 255, .35); background: rgba(20, 17, 14, .35); color: #fff;
  }
  .site-nav--overlay .nav-toggle-input:checked + .nav-toggle { border-color: #fff; color: #fff; }
  .site-nav--overlay ul {
    background: var(--ink); border-radius: var(--r-s); padding: 4px 14px; margin-top: 10px;
    /* De kop zelf is maar zo hoog als de foto; het uitgeklapte menu mag daar
       gerust overheen liggen (de kop clipt niet langer, zie .bighead
       hieronder), maar moet zelf kunnen scrollen als het menu langer is dan
       het scherm. */
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
  }
  .site-nav--overlay ul li { border-top-color: rgba(255, 255, 255, .14); }
  .site-nav--overlay ul li a { color: #f3eada; }
}

/* ---------- grote fotokop op elke publieke pagina ---------- */
.bighead {
  /* Geen overflow: hidden: de foto vult haar eigen vlak toch al via
     position:absolute + inset:0 + object-fit, maar op smalle schermen moet
     het uitgeklapte menu (site-nav--overlay ul, hierboven) over de kop héén
     kunnen uitsteken in plaats van afgesneden te worden. */
  position: relative; min-height: min(64dvh, 620px); display: grid; align-items: end;
  color: #fff; margin-bottom: var(--s6);
}
.bighead > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bighead::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 17, 14, .55) 0%, rgba(20, 17, 14, .35) 45%, rgba(20, 17, 14, .85) 100%);
}
/* De bovenmarge houdt de titel onder het menu, ook als de kop laag is. */
.bighead > .wrap { position: relative; z-index: 1; width: 100%; padding-top: 96px; padding-bottom: var(--s6); }
.bighead h1 { color: #fff; margin: 0; font-size: clamp(36px, 7vw, 96px); line-height: .95; letter-spacing: -3px; overflow-wrap: anywhere; }
.bighead-onder { margin: var(--s4) 0 0; color: #efe7da; font-size: 20px; max-width: 40ch; }
.bighead-actie { margin: var(--s5) 0 0; }
.kicker { margin: 0 0 10px; color: #d9cdb8; font-size: 15px; font-weight: 600; }
@media (max-width: 760px) {
  .bighead { margin-bottom: var(--s5); }
  .bighead > .wrap { padding-top: 84px; padding-bottom: var(--s5); }
  .bighead h1 { letter-spacing: -1.5px; }
  .bighead-onder { font-size: 17px; }
}

/* ---------- bouwstenen voor de pagina's onder de kop (fase 8) ---------- */
.ghost {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px;
  border-radius: var(--r-i); border: 1.5px solid currentColor; font-weight: 700; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.ghost:hover, .ghost:focus-visible { background: var(--ink); color: #fff; border-color: var(--ink); }
.band .ghost:hover, .band .ghost:focus-visible { background: #f3eada; color: var(--green-deep); border-color: #f3eada; }
.band { background: var(--green-deep); color: #f3eada; }
.band h2 { color: #fff; }
.band .lead { color: #c9d6cf; }
.band .timeline a { color: var(--gold); }

/* Tekst naast een foto; .rev zet de foto links. .split--top lijnt de kolommen
   bovenaan uit (activiteit: verslag naast het aanwezigheidsblok). */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split .photo { border-radius: var(--r-s); overflow: hidden; aspect-ratio: 4 / 5; }
.split .photo img { width: 100%; height: 100%; object-fit: cover; }
.split.rev .photo { order: -1; }
.split--top { grid-template-columns: 1.2fr 1fr; gap: var(--s6); margin: var(--s5) 0; align-items: start; }
.split--top h2 { min-height: 1.2em; }

.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px; border-top: 2px solid currentColor; }
.timeline > div { padding: 24px 28px 0 0; position: relative; }
.timeline > div::before { content: ""; position: absolute; top: -9px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); }
.timeline .when { font-weight: 800; font-size: 15px; color: var(--gold-dark); }
.band .timeline .when { color: var(--gold); }
.timeline h3 { margin: 6px 0; }
.timeline p, .timeline .tl-body { margin: 0; opacity: .85; }

.faq { margin-top: var(--s5); border-top: 1px solid var(--line); max-width: 780px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: var(--s4); min-height: 64px; font-weight: 700; font-size: 19px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; color: var(--gold-dark); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details { interpolate-size: allow-keywords; }
.faq details::details-content {
  block-size: 0; overflow: hidden; opacity: 0;
  transition: block-size 250ms var(--ease), opacity 250ms ease, content-visibility 250ms allow-discrete;
}
.faq details[open]::details-content { block-size: auto; opacity: 1; }
.faq details p { margin: 0 0 20px; color: var(--ink-soft); max-width: 62ch; }

.invite { position: relative; border-radius: 24px; overflow: hidden; min-height: 420px; display: grid; align-items: end; color: #fff; }
.invite > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.invite::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(20, 17, 14, .85), rgba(20, 17, 14, .25)); }
.invite > div { position: relative; z-index: 1; padding: 48px; max-width: 560px; }
.invite p { color: #eadfcd; margin: 12px 0 24px; }
.invite h2 { color: #fff; }

/* Pagina's De club en Jeugd */
.pt0 { padding-top: 0; }
.split-actie { margin-top: 28px; }
.intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: end; }
.intro .big { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -.6px; margin: 0; font-weight: 600; }
.intro .muted { margin: 0; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 48px; border-top: 1px solid var(--line); }
.facts div { padding: 22px 24px 0 0; }
.facts b { display: block; font-size: 30px; letter-spacing: -1px; line-height: 1; }
.facts span { color: var(--ink-soft); font-size: 15px; }
.contactband { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; background: var(--band); border-radius: 20px; padding: 40px; }
.contactband h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); }
.contactband p { margin: 8px 0 0; color: var(--ink-soft); }
.youth-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.youth-steps div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: 26px; }
.youth-steps b { display: block; font-size: 15px; color: var(--gold-dark); }
.youth-steps h3 { margin: 8px 0 6px; }
.youth-steps p { margin: 0; color: var(--ink-soft); }
.parents { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.parents .faq { margin-top: 0; }
@media (max-width: 820px) {
  .intro, .parents { grid-template-columns: 1fr; gap: 28px; }
  .facts { grid-template-columns: 1fr; }
  .facts div { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .contactband { grid-template-columns: 1fr; padding: 28px; }
  .youth-steps { grid-template-columns: 1fr; }
}

/* Trekt de eerste sectie na de kop deels over de foto. */
.overlap { position: relative; z-index: 2; margin-top: -96px; }
/* Kop met een kaart die eroverheen schuift: extra ruimte onderaan, zodat de kaart geen tekst afdekt. */
.bighead--overlap > .wrap { padding-bottom: 128px; }

@media (max-width: 820px) {
  .split:not(.split--top) { grid-template-columns: 1fr; gap: 28px; }
  .split .photo { aspect-ratio: 4 / 3; }
  .split.rev .photo { order: 0; }
  .timeline { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid currentColor; }
  .timeline > div { padding: 0 0 28px 26px; }
  .timeline > div::before { top: 4px; left: -9px; }
  .invite > div { padding: 28px; }
  .invite::after { background: linear-gradient(180deg, rgba(20, 17, 14, .15), rgba(20, 17, 14, .88)); }
  .overlap { margin-top: -40px; }
  .bighead--overlap > .wrap { padding-bottom: 64px; }
}
@media (max-width: 760px) { .split--top { grid-template-columns: 1fr; gap: var(--s5); } }

/* ---------- donkere footer ---------- */
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.site-footer strong { font-size: 15px; }
@media (max-width: 760px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--s2); }
}

/* ---------- kalender: maandgroepen ---------- */
.month { display: grid; grid-template-columns: 180px 1fr; gap: var(--s5); padding: var(--s5) 0; border-top: 2px solid var(--ink); }
.month:last-child { padding-bottom: 0; }
.month-title { margin: 0; font-size: 28px; letter-spacing: -.8px; }
@media (max-width: 760px) { .month { grid-template-columns: 1fr; gap: var(--s2); } }

/* ---------- activiteitenrij: dag groot, weekdag in goud, soort rechts ---------- */
.row-day { flex: none; width: 52px; text-align: center; line-height: 1.05; }
.row-day-num { display: block; font-size: 28px; font-weight: 800; letter-spacing: -1px; }
.row-day-sub { display: block; font-size: 12.5px; font-weight: 700; color: var(--gold-dark); margin-top: 2px; }
.row.is-cancelled .row-day-num, .row.is-cancelled .row-day-sub { color: var(--ink-soft); }
.kind {
  flex: none; margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--green);
  background: var(--band); border-radius: 999px; padding: 3px 10px;
}
.row.is-cancelled .kind { background: var(--band); color: var(--ink-soft); }
@media (max-width: 820px) { .kind { display: none; } }

/* ---------- activiteit: kaart over de foto, verslag en aanwezigheid ---------- */
.bighead-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s4) 0 0; padding: 0; list-style: none; font-size: 17px; color: #efe7da; }
.bighead-meta li { display: inline-flex; align-items: center; gap: var(--s2); }
.bighead-meta svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
@media (max-width: 760px) { .bighead-meta { font-size: 15px; gap: var(--s1) var(--s4); } }

.act-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s5); box-shadow: 0 20px 50px rgba(31, 27, 22, .1); }
.act-cancelled { margin: 0 0 var(--s4); color: var(--ink-soft); }
.card-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); }
.fact .fact-icon { width: 26px; height: 26px; }
.fact strong { display: block; margin-top: var(--s2); font-size: 19px; }
.fact span { color: var(--ink-soft); font-size: 14.5px; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s5); align-items: center; }
.vs .team { text-align: center; }
.vs .team b { display: block; font-size: 26px; letter-spacing: -.6px; overflow-wrap: anywhere; }
.vs .team span { color: var(--ink-soft); font-size: 14px; }
.vs .mid { text-align: center; }
.vs .mid .n { font-size: 40px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.vs .mid small { color: var(--ink-soft); font-size: 14px; }
.act-card.is-cancelled .vs .n { color: var(--ink-soft); }
@media (max-width: 820px) {
  .act-card { padding: var(--s4); }
  .vs { grid-template-columns: 1fr; gap: var(--s3); }
  .vs .mid { order: -1; }
  .vs .mid .n { font-size: 32px; }
}

/* ---------- kalender: uitgelichte activiteit en filters ---------- */
.feature {
  display: grid; grid-template-columns: 1.1fr .9fr; background: var(--green-deep); color: #f3eada;
  border-radius: 20px; overflow: hidden; text-decoration: none; box-shadow: 0 30px 70px rgba(31, 27, 22, .2);
}
.feature-img { position: relative; min-height: 320px; }
.feature-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-txt { padding: var(--s6) var(--s6) var(--s6) var(--s6); display: flex; flex-direction: column; justify-content: center; }
.feature-kind { margin: 0; font-size: 14px; color: var(--gold); font-weight: 700; }
.feature h2 { color: #fff; margin: var(--s2) 0; font-size: clamp(26px, 3vw, 34px); letter-spacing: -1px; line-height: 1.05; }
.feature-meta { margin: 0; color: #d9cdb8; }
.feature-state { margin: var(--s3) 0 0; color: var(--gold); font-weight: 700; }
.feature-count { display: flex; gap: var(--s3); margin-top: var(--s5); font-variant-numeric: tabular-nums; }
.feature-count div { background: rgba(255, 255, 255, .08); border-radius: var(--r-i); padding: var(--s2) var(--s3); text-align: center; min-width: 64px; }
.feature-count b { display: block; font-size: 26px; line-height: 1; }
.feature-count span { font-size: 12px; color: #bfb29b; }
.feature.is-live .feature-count, .feature.is-over .feature-count { display: none; }
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; }
  .feature-img { min-height: 200px; }
  .feature-txt { padding: var(--s5); }
}
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s3); }
.chips a {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s4); border-radius: 999px;
  border: 1.5px solid var(--line); text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink-soft);
  transition: background-color .2s ease, color .2s ease;
}
.chips a:hover { color: var(--ink); border-color: var(--ink); }
.chips a[aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }
.kind--clubavond { background: var(--tag-clubavond); color: var(--tag-clubavond-ink); }
.kind--interclub { background: var(--tag-interclub); color: var(--gold-dark); }
.kind--tornooi { background: var(--tag-tornooi); color: var(--tag-tornooi-ink); }

.report {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--s4); align-items: center;
  text-decoration: none; color: inherit; background: var(--band); border-radius: var(--r-s); overflow: hidden;
}
.report img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.report div { padding: var(--s4) var(--s4) var(--s4) 0; }
.report h4 { margin: 0; font-size: 19px; line-height: 1.15; }
.report p { margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; }

.coming { background: var(--green-deep); color: #f3eada; border-radius: var(--r-s); padding: var(--s5); }
.coming strong { display: block; font-size: 44px; line-height: 1; }
.coming p { margin: var(--s2) 0 0; }
.coming a {
  display: inline-flex; align-items: center; margin-top: var(--s4); min-height: 48px; padding: 0 var(--s5);
  border-radius: var(--r-i); background: var(--gold); color: var(--ink); font-weight: 700; text-decoration: none;
}

/* ---------- eerste keer ---------- */
/* Het blok staat in dezelfde .wrap als titel en stappen, dus dezelfde linkerrand. */
.first-evening { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
.first-evening h2 { margin: 0 0 var(--s4); }
.first-photo { border-radius: var(--r-s); overflow: hidden; aspect-ratio: 4 / 3; }
.first-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evening { display: flex; gap: var(--s4); align-items: center; background: var(--band); border-radius: var(--r-s); padding: var(--s4); margin: 0 0 var(--s4); }
.evening p { margin: 0; color: var(--ink-soft); }
.evening strong { color: var(--ink); }
@media (max-width: 760px) {
  .first-evening { grid-template-columns: 1fr; gap: var(--s5); }
  .first-photo { order: -1; }
}

.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); border-top: 2px solid var(--ink); padding-top: var(--s5); }
.flow-icon { width: 28px; height: 28px; color: var(--gold-dark); }
.flow h3 { margin: var(--s3) 0 4px; font-size: 21px; }
.flow p { margin: 0; color: var(--ink-soft); }
@media (max-width: 760px) { .flow { grid-template-columns: 1fr; gap: var(--s4); } }

/* =========================================================================
   Fase 8, taak 4: nieuws, interclub, tornooien en contact
   ========================================================================= */

/* ---------- nieuws: magazine ---------- */
.mag { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) 22px; }
.mag .story { min-width: 0; }
.story .img .cal { margin: var(--s5); }
.story .img:not(:has(img)) { display: grid; align-content: end; }
.story p { margin: 6px 0 0; color: var(--ink-soft); }
.story-big { grid-column: span 8; }
.story-big h3 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -1px; }
.story-side { grid-column: span 4; display: grid; gap: var(--s5); align-content: start; }
.story-side:empty { display: none; }
.story-big .img, .story-side .img { aspect-ratio: 16 / 10; }
.story-4 { grid-column: span 4; }
.story-4 .img { aspect-ratio: 4 / 3; }
.news .mag { margin-top: 0; }
@media (max-width: 820px) {
  .story-big, .story-side, .story-4 { grid-column: span 12; }
}

/* ---------- interclub: ploegkaarten en agenda op de donkere band ---------- */
.teams { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s5); }
.team-card {
  border-radius: var(--r-s); background: var(--green-deep); color: #f3eada; padding: var(--s5);
  min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s5);
}
.team-letter { font-size: 64px; font-weight: 800; letter-spacing: -2px; line-height: .9; color: var(--gold); }
.team-card h3 { color: #fff; margin: 0; }
.team-card p { margin: 4px 0 0; color: #bfd0c8; font-size: 15px; }
.band.section { padding-block: 56px; }
.band .agenda-lint { border-top-color: #f3eada; }
.band .agenda-lint a { border-right-color: rgba(255, 255, 255, .15); border-bottom-color: rgba(255, 255, 255, .15); }
.band .agenda-lint .d, .band .agenda-lint h3 { color: #fff; }
.band .agenda-lint .m { color: var(--gold); }
.band .agenda-lint p { color: #c9d6cf; }
.band .agenda-lint a:hover .d { color: var(--gold); }
.band .agenda-lint a.is-cancelled .d, .band .agenda-lint a.is-cancelled .m { color: #93a59c; }
.agenda-lint--all { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.agenda-lint--all a { border-right: 0; padding-left: 0; }
@media (max-width: 820px) {
  .teams { grid-template-columns: 1fr; }
  .team-card { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; }
  .agenda-lint--all { grid-template-columns: 1fr 1fr; }
  .agenda-lint--all a { border-bottom: 1px solid rgba(255, 255, 255, .15); }
}
@media (max-width: 480px) { .agenda-lint--all { grid-template-columns: 1fr; } }

/* ---------- tornooien: kaarten ---------- */
.tgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.tcard {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-s); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tcard-main { flex: 1; display: block; color: inherit; text-decoration: none; }
.tcard-top { display: flex; gap: var(--s4); align-items: center; background: var(--band); padding: var(--s5); }
.tcard-top h4 { margin: 0 0 2px; font-size: 21px; line-height: 1.15; }
.tcard-body { margin: 0; padding: var(--s4) var(--s5) var(--s3); color: var(--ink-soft); font-size: 15px; }
.tcard-go {
  display: flex; align-items: center; min-height: 44px; padding: 0 var(--s5) var(--s3);
  font-weight: 700; color: var(--gold-dark); text-decoration: none;
}
.tcard-go:hover { color: var(--ink); }
.tcard-top h4 a { color: inherit; text-decoration: none; }
.tcard-top h4 a:hover, .tcard-top h4 a:focus-visible { text-decoration: underline; }
.tcard-deadline { margin: 0; padding: 0 var(--s5) var(--s2); font-size: 15px; font-weight: 600; }
.tcard.is-cancelled { opacity: .75; }
.tcard.is-cancelled .tcard-top h4 { text-decoration: line-through; }
@media (max-width: 820px) { .tgrid { grid-template-columns: 1fr; } }

/* uitgelichte tornooikaart en inschrijfregel */
.deadline-left { color: var(--gold-dark); margin-left: var(--s2); }
.deadline.is-closed { color: var(--ink-soft); }
.tfeature {
  display: flex; gap: var(--s5); align-items: center; background: var(--green-deep); color: #f3eada;
  border-radius: 20px; padding: var(--s6); box-shadow: 0 30px 70px rgba(31, 27, 22, .2);
}
.tfeature .cal { flex: none; }
.tfeature-txt { min-width: 0; }
.tfeature h2 { color: #fff; margin: var(--s2) 0; font-size: clamp(26px, 3vw, 34px); letter-spacing: -1px; line-height: 1.05; }
.tfeature .feature-meta + .feature-meta { margin-top: var(--s2); }
.tfeature-deadline { margin: var(--s3) 0 0; font-weight: 600; }
.tfeature .deadline-left { color: var(--gold); }
.tfeature .deadline.is-closed { color: #d9cdb8; }
.tfeature-actie { margin: var(--s4) 0 0; }
@media (max-width: 820px) { .tfeature { flex-direction: column; align-items: flex-start; padding: var(--s5); } }
@media (prefers-reduced-motion: reduce) { .tcard, .tcard:hover { transition: none; transform: none; } }

/* ---------- contact: info links, formulier rechts ---------- */
.contact-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s6) 64px; align-items: start; }
.contact-facts { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s3); font-size: 18px; font-weight: 600; }
.contact-facts li { display: flex; align-items: center; gap: var(--s3); }
.contact-facts svg { width: 24px; height: 24px; color: var(--gold-dark); flex: none; }
.contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input:not([type="hidden"]) { min-height: 48px; }
.contact-form .cta { min-height: 52px; padding: 0 26px; }
.contact-form form label:first-child { margin-top: 0; }
@media (max-width: 820px) { .contact-split { grid-template-columns: 1fr; gap: var(--s5); } }
@media (max-width: 560px) { .contact-form .row2 { display: block; } }

/* =========================================================================
   Hover alleen op apparaten met een echte muis. Op een aanraakscherm
   "plakt" een :hover anders na een tik (de foto blijft ingezoomd, de kaart
   blijft zweven). Mobile first: de basis hierboven heeft geen hover.
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {
  .tile:hover img { transform: scale(1.05); }
  .story:hover img { transform: scale(1.04); }
  .tcard:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(31, 27, 22, .1); }
  .puzzle .controls button:hover { background: rgba(255, 255, 255, .08); }
  .puzzle .moves button:hover { background: rgba(255, 255, 255, .08); }
}

/* Deze elementen geven zelf feedback bij een druk (schaal of achtergrond):
   de grijze tikflits van mobiele browsers erbovenop is dan dubbel. */
.btn, .btn-secondary, .cta, .ghost, .tile, .story, .tcard-main,
.puzzle .controls button, .puzzle .moves button, .nav-toggle { -webkit-tap-highlight-color: transparent; }

/* Minder beweging: de foto's zoomen ook bij hover niet in (de overgang op
   transform is daar uit, dus het zou anders een harde sprong zijn). */
@media (prefers-reduced-motion: reduce) {
  .tile img, .story img { transform: none !important; }
}

/* ---------- foutpagina's ---------- */
.error-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.error-page--plain { min-height: 80dvh; display: flex; flex-direction: column; justify-content: center; }
.error-page--plain .brand img { display: block; height: auto; max-width: 200px; margin-bottom: var(--s6); }
.error-page--plain h1 { font-size: clamp(40px, 7vw, 72px); line-height: 1; letter-spacing: -2px; margin: 0 0 var(--s4); }