/* ============================================================
   DAVOZ, Damesvolleybal Zwevegem
   Strak en vlak: clubrood, lichtgrijs, geen schaduwen
   ============================================================ */

:root {
  /* ==========================================================
     KLEUREN VAN DE SITE
     Alles hieronder aanpassen volstaat: de hele site volgt mee.
     Wil je iets uitproberen, verander enkel deze regels.
     ========================================================== */

  /* --- De twee om mee te spelen --- */
  --bg: #efeff0; /* achtergrond van de hele website */
  --card: #dcdee0; /* achtergrond van de kaartjes      */

  /* --- Het merkrood --- */
  --ink: #a2342d; /* kop, navigatie, hero, randen, knoppen, titels */
  --ink-soft: #8a2b25; /* iets donkerder, voor hover                    */
  --card-foot: #a2342d; /* de balk onderaan een kaartje                  */

  /* --- Steuntinten --- */
  --paper: #ffffff; /* wit: tekst op rood, invulvelden          */
  --surface: #eceded; /* navigatiebalk, hover, losse blokjes      */
  --line: #cfd1d3; /* dunne scheidingslijnen                   */

  /* --- Tekst --- */
  --text: #33353a; /* gewone leestekst    */
  --muted: #6b6d72; /* bijschriften, labels */

  /* --- Vormgeving --- */
  --radius: 4px; /* knoppen en kleine vlakjes             */
  --radius-card: 14px; /* afronding bovenaan een kaartje        */
  --shadow: none; /* geen schaduwen meer in dit ontwerp    */
  --shadow-sm: none;

  /* Deze twee zijn ouder en volgen het merkrood */
  --accent: #a2342d;
  --yellow: #a2342d;
  --coral: #8a2b25;

  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* `clip` knipt horizontaal overschot net zo goed weg als `hidden`,
     maar maakt van body geen scrollcontainer. Met `hidden` bleef de
     navigatiebalk niet plakken, want sticky zoekt de dichtstbijzijnde
     scrollcontainer in plaats van het venster. */
  overflow-x: clip;
}

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

/* Alle koppen in het merkrood, de leestekst blijft neutraal donker */
h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.feed-head h2,
.youth-heading,
.section-title {
  color: var(--ink);
}

a {
  color: var(--ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--coral);
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

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

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Volledige breedte (navbar), strak tegen de paginarand */
.nav-wide {
  width: 100%;
  padding: 0;
}

/* ============================================================
   Inhoudsvak
   Eén vorm voor alle vakjes op de site: een lichtgrijs tekstvak
   met afgeronde hoeken enkel bovenaan, inhoud gecentreerd, en
   onderaan een lichtere balk met de titel van wat erin staat.
   Geen randen, geen schaduwen, geen extra effecten.
   ============================================================ */

.tile,
.score-card,
.teamnews-item,
.side-block,
.person,
.pos-card,
.search-result,
.callout,
.bigquote,
.news-post,
.stat {
  display: flex;
  flex-direction: column;
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--ink);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-align: center;
  gap: 0.45rem;
  padding: 1.3rem 1.25rem 0;
}

/* ---------- Topband marquee ---------- */

.topband {
  background: var(--ink);
  border-bottom: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- Header ---------- */

.site-head {
  background: var(--ink);
  color: var(--paper);
}

.head-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--paper);
}
.brand:hover {
  color: var(--paper);
}

.brand-mark {
  width: 64px;
  height: 64px;
  flex: none;
}

.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: var(--paper);
}
.brand-full {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}
.brand-tag {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.1rem;
}

.head-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.head-search label {
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
}
.head-search input {
  border: 0;
  background: var(--paper);
  color: var(--text);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.95rem;
  min-width: 220px;
}
.head-search input::placeholder {
  color: #9a9ca1;
}
.head-search button {
  border: 0;
  background: #1a1a1a;
  color: var(--paper);
  font-weight: 800;
  font-family: var(--font-body);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.14s ease;
}
.head-search button:hover {
  background: #000000;
}

/* ---------- Navigatie ---------- */

/* De kop en de navigatie worden samen in dit lege vak gezet. Zonder
   `display: contents` is dat vak de begrenzing voor de sticky balk
   eronder, en dan schuift die na een paar honderd pixels toch mee weg. */
#site-header {
  display: contents;
}

.site-nav {
  background: var(--surface);
  border-top: 0;
  /* rode lijn die de navigatiebalk afsluit, zelfde rood als de hero */
  border-bottom: 3px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.7rem;
  background: none;
  font: 800 0.85rem var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0;
  cursor: pointer;
}
.nav-toggle-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
  flex: none;
}
.nav-toggle-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transition:
    top 0.2s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}
.nav-toggle-icon span:nth-child(1) {
  top: 0;
}
.nav-toggle-icon span:nth-child(2) {
  top: 6px;
}
.nav-toggle-icon span:nth-child(3) {
  top: 12px;
}
.nav-toggle.open .nav-toggle-icon span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
.nav-toggle.open .nav-toggle-icon span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open .nav-toggle-icon span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

.drop-toggle {
  display: none;
}

.nav-extra {
  display: none;
}

.nav-list {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.nav-list > li {
  position: relative;
}
.nav-list > li > a {
  display: block;
  padding: 0.85rem 1.1rem;
  font-weight: 800;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-right: 1px solid var(--line);
}
.nav-list > li:first-child > a {
  border-left: 1px solid var(--line);
}
.nav-list > li > a:hover,
.nav-list > li:focus-within > a {
  background: var(--ink);
  color: var(--paper);
}
.nav-list > li.active > a {
  background: var(--ink);
  color: var(--paper);
}
.drop {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--card);
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  z-index: 200;
}
.nav-list > li:hover > .drop,
.nav-list > li:focus-within > .drop {
  display: block;
}
.drop a {
  display: block;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
}
.drop a:hover {
  background: var(--ink);
  color: var(--paper);
}
/* In het teammenu staat het seizoen rechts tegen de rand, los van de
   ploegnaam links. Enkel regels met een jaartal worden zo verdeeld. */
.drop a:has(.drop-jaar) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
}
.drop-jaar {
  flex: none;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.drop a:hover .drop-jaar {
  color: rgba(255, 255, 255, 0.75);
}
/* Engagement heeft eigen onderdelen. Die stonden ingesprongen in
   dezelfde lijst; nu klappen ze open als een tweede menuutje naast
   het eerste, zodat de hoofdlijst kort blijft. */
.drop li.has-sub {
  position: relative;
}
.drop li.has-sub > a::after {
  content: "\203A";
  float: right;
  font-weight: 800;
  line-height: 1;
}
.drop-sub {
  display: none;
  position: absolute;
  top: -0.4rem;
  left: 100%;
  min-width: 230px;
  background: var(--card);
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  z-index: 210;
}
.drop li.has-sub:hover > .drop-sub,
.drop li.has-sub:focus-within > .drop-sub {
  display: block;
}
.drop-sub a {
  display: block;
  padding: 0.5rem 1rem;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
}
.drop-sub a:hover {
  background: var(--ink);
  color: var(--paper);
}
.drop .sep {
  border-top: 1px solid var(--line);
  margin: 0.3rem 0;
}

/* ---------- Hero (home) ---------- */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 0;
  display: flex;
  align-items: center;
  /* Bewust lager dan het scherm, zodat je altijd ziet dat er
     onder de hero nog inhoud staat. */
  min-height: 0;
  padding: 3.2rem 0 3.6rem;
}

/* Logo als achtergrond: boven en onder mag het uit beeld lopen.
   Het vlak is bewust ruimer dan de hero zelf, want door de kanteling
   zouden de hoeken anders leeg blijven. De maten hieronder zijn dus
   een percentage van dat ruimere vlak, niet van de hero. */
.hero-bg {
  position: absolute;
  inset: -40% -20%;
  z-index: 0;
  background-image: url("../images/davoz-logo.png");
  background-repeat: no-repeat;
  background-position: center center;
  /* 72% van dit vlak komt neer op ongeveer 130% van de hero */
  background-size: auto 72%;
  /* Negatieve hoek kantelt tegen de klok in: de rechterkant gaat omhoog. */
  transform: rotate(-9deg);
  /* Het logo is rood in het bestand; brightness(0) maakt het zwart,
     invert(1) daarna wit. De dekking bepaalt hoe hard het wit
     doorkomt: 1 is spierwit, lager laat het rood meespelen. */
  filter: brightness(0) invert(1);
  opacity: 0.3;
}

/* Zwarte, licht transparante laag zodat de tekst leesbaar blijft */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
}

/* Drie kolommen: uitslagen links, tekst in het midden, sociaal rechts */
.hero-grid {
  position: relative;
  z-index: 2;
  /* De hero gebruikt de volledige paginabreedte, niet de smallere
     container van de rest van de site: zo is er meer plaats. */
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 340px;
  align-items: center;
  gap: 2rem;
  padding: 0 1.75rem;
}
.hero-col:empty {
  display: none;
}
.hero-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.hero-inner {
  max-width: 100%;
  padding: 0.5rem 0.5rem 1rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-kicker {
  display: inline-block;
  background: var(--coral);
  color: var(--paper);
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 0.3rem 0.8rem;
  margin-bottom: 1.2rem;
}
.hero h1 {
  font-family: var(--font-display);
  /* "DAMESVOLLEYBAL" kan niet afbreken. Bij de smalste driekolomshero
     (1250px) is de middenkolom ~530px breed; 4.6vw houdt de titel
     daar net binnen de kolom. */
  font-size: clamp(2.2rem, 7.5vw, 8rem);
  line-height: 0.88;
  margin: 0 0 1.2rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
/* Op een breed scherm staat de volledige naam er; DAVOZ is
   alleen voor smalle schermen (zie de media query onderaan). */
.hero-kort {
  display: none;
}
.hero h1 .stroke,
.hero h1 .fill,
.hero h1 .hero-kort {
  color: var(--paper);
  /* Donkerrode rand rond de witte letters, zodat ze ook leesbaar
     blijven waar het lichte logo doorschijnt. paint-order zet de
     rand aan de buitenkant, anders wordt de letter zelf dunner. */
  -webkit-text-stroke: 2px #a2342d;
  paint-order: stroke fill;
}
.hero p.lead {
  max-width: 100%;
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--paper);
  /* -webkit-text-stroke: 2px #a2342d; */
  paint-order: stroke fill;
  margin: 0 auto 2.2rem;
}
.hero .btn-row {
  justify-content: center;
}
.hero .btn {
  background: var(--paper);
  color: var(--ink);
  border: 0;
}
.hero .btn:hover {
  background: var(--card);
  color: var(--ink);
}
.hero .btn.ghost {
  background: transparent;
  color: var(--paper);
  border: 2px solid var(--paper);
}
.hero .btn.ghost:hover {
  background: var(--paper);
  color: var(--ink);
}
.hero-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.4rem;
}
.stat {
  padding: 0.9rem 1rem 0;
  min-width: 120px;
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--yellow);
}
.stat span {
  order: 9;
  margin: auto -1rem 0;
  padding: 0.5rem 0.8rem;
  background: var(--card-foot);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffffff;
}

/* ---------- Knoppen ---------- */

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.75rem 1.4rem;
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}
.btn:hover {
  background: var(--coral);
  color: var(--paper);
}
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 0.65rem 1.3rem;
}
.btn.ghost:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn.coral {
  background: var(--coral);
  color: var(--paper);
}
.btn.coral:hover {
  color: var(--paper);
}
.btn-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- Layout met sidebar ---------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 3rem;
  padding: 3rem 1.25rem 4rem;
  max-width: 1400px;
  margin: 0 auto;
}

.content {
  min-width: 0;
}

/* Homepage: links het nieuws, rechts de uitslagen */
.layout.home-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-bottom: 2rem;
}
/* Zelfde grens als de hero: smaller dan dit is de rechterkolom te
   krap voor twee wedstrijdkaartjes naast elkaar. Dan komt het nieuws
   bovenaan en krijgen de uitslagen de volle breedte. */
@media (max-width: 1249px) {
  .layout.home-layout {
    grid-template-columns: 1fr;
  }
}
.home-uitslagen {
  min-width: 0;
}
/* De uitslagen staan in de rechterkolom zelf nog eens in twee kolommen */
.home-uitslagen .scoreboard,
.home-uitslagen .scoreboard-youth {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}
/* Staan DAVOZ A en B in de hero, dan is hun vak hier leeg en hoeft
   de kop "Uitslagen" er ook niet te staan */
.feed-head:has(+ .scoreboard:empty) {
  display: none;
}
@media (max-width: 480px) {
  .home-uitslagen .scoreboard,
  .home-uitslagen .scoreboard-youth {
    grid-template-columns: 1fr;
  }
}

/* "Meer over DAVOZ" in de rechterkolom, onder de jeugduitslagen: de
   blokken staan naast elkaar zolang er plaats is. */
.meer-over {
  margin-top: 0.4rem;
}
/* De blokken zitten in een eigen raster, los van de kop: zou de kop
   mee in het raster staan en alle kolommen overspannen, dan houdt dat
   een lege kolom open. */
.meer-over .side-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.6rem;
}
.meer-over .side-head h2 {
  font-size: 2.6rem;
}
.meer-over .side-block {
  margin-bottom: 0;
}


/* ---------- Pagina-koppen ---------- */

.crumbs {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 1rem;
}
.crumbs a {
  color: var(--muted);
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
  letter-spacing: 0.01em;
}
.page-title::after {
  content: "";
  display: block;
  width: 90px;
  height: 8px;
  background: var(--yellow);
  margin-top: 0.9rem;
}
.page-intro {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 44rem;
}

/* ---------- Prose ---------- */

.prose h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 2.6rem 0 0.8rem;
}
.prose h2 .hl {
  background: transparent;
  color: var(--ink);
  padding: 0;
  line-height: 1.2;
  box-decoration-break: clone;
}
.prose h3 {
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 1.8rem 0 0.5rem;
}
.prose p {
  margin: 0 0 1rem;
}
.prose ul {
  padding-left: 1.3rem;
  margin: 0 0 1.2rem;
}
.prose li {
  margin-bottom: 0.45rem;
}
.prose li::marker {
  color: var(--coral);
  font-weight: 800;
}
/* In een rood blok is dat donkerrode bolletje niet te zien; daar wordt
   het wit, net als de tekst eromheen. */
.callout li::marker {
  color: var(--paper);
}
.prose strong {
  color: var(--ink);
}

/* ---------- Quote / callout / notice ---------- */

.bigquote {
  margin: 2rem 0;
  padding: 1.8rem 1.6rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
}
.bigquote::before {
  content: "\201C";
  position: absolute;
  top: -34px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 4.6rem;
  color: var(--coral);
}

.callout {
  background: var(--ink);
  color: var(--paper);
  margin: 2rem 0;
}
.callout h3 {
  margin-top: 0 !important;
}
.callout p:last-child {
  margin-bottom: 0;
}

.notice {
  border-left: 6px solid var(--coral);
  background: #fff1ec;
  padding: 0.9rem 1.2rem;
  margin: 1.4rem 0;
  font-size: 0.95rem;
}

/* ---------- Teamfoto bovenaan een teampagina ---------- */

.team-photo {
  margin: 1.8rem 0 2.4rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: hidden;
  background: var(--card);
}
.team-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.team-photo figcaption {
  background: var(--card-foot);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.75rem 1rem;
}

/* ---------- Tegels (hub-pagina's) ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.4rem;
  margin: 2rem 0;
}
.tile {
  text-decoration: none;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}
.tile:hover {
  color: var(--ink);
}
.tile .tile-num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--coral);
  letter-spacing: 0.1em;
}
.tile h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
  margin: 0.3rem 0 0.5rem;
  text-transform: uppercase;
}
.tile p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.tile .tile-go {
  display: inline-block;
  margin-top: 0.9rem;
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tile:hover .tile-go {
  color: var(--coral);
}
/* De accenttegel: rood vlak, witte tekst, donkerdere balk onderaan */
.tile.accent {
  background: var(--ink);
  color: var(--paper);
}
.tile.accent .tile-num,
.tile.accent .tile-go {
  color: var(--paper);
}
.tile.accent h3 {
  background: var(--ink-soft);
  color: var(--paper);
}
.tile.accent p {
  color: rgba(255, 255, 255, 0.85);
}
.tile.accent:hover {
  color: var(--paper);
}
.tile.accent:hover h3 {
  background: #74231e;
}

/* ---------- De vakjes in de hero ----------
   Op het rode vlak worden de kaartjes wit in plaats van grijs:
   dat leest rustiger en houdt de hero licht. ---------- */

.hero .score-card,
.hero .side-block {
  background: var(--paper);
  border: 0;
  color: var(--text);
  padding: 0.9rem 1rem 0;
  gap: 0.3rem;
  margin: 0;
  text-align: center;
}
.hero .score-card .score-head,
.hero .side-block h3 {
  margin: auto -1rem 0;
  padding: 0.5rem 0.8rem;
  font-size: 1.1rem;
  /* Witte rand rond het rode vormpje onder elk kaartje in de hero */
  border: 2px solid var(--paper);
}
.hero .score-card .score-label {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  margin-bottom: 0;
}
/* Titel en datum op één regel, met net genoeg lucht ertussen. */
.hero .score-card {
  padding-top: 0.85rem;
  gap: 0.25rem;
}
.hero .score-card .score-kop {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.3rem;
}
.hero .score-card .score-kop {
  justify-content: center;
}
.hero .score-card .match-regel,
.hero .score-card .match-rij {
  font-size: 0.98rem;
}
.hero .wedstrijd-kaart .is-laatste .match-rij .match-score {
  font-size: 1.2rem;
}

/* De twee kaartjes links bepalen de hoogte; het Facebook-blok rechts
   past zich daaraan aan (site.js). Blijft er toch ruimte over, dan gaat
   die gelijk verdeeld over beide kaartjes en hun helften. */
.hero .wedstrijd-kaart .score-empty {
  min-height: 0;
}
.hero .score-card {
  flex: 1 1 auto;
}
.hero .score-card .score-split {
  flex: 1 1 auto;
  align-content: space-evenly;
}
.hero .score-card .score-when {
  font-size: 0.76rem;
  min-height: 0;
  margin: 0;
}
.hero .score-card .score-when:not(:empty)::before {
  content: "· ";
  color: var(--muted);
}
.hero .score-card .score-when:empty {
  display: none;
}
.hero .score-card .score-split {
  gap: 0.7rem;
}
.hero .score-card .score-half {
  gap: 0.35rem;
}
.hero .score-card .score-half + .score-half {
  padding-top: 0.7rem;
}
.hero .score-card .match-sets {
  margin-top: 0;
}
.hero .score-card .match-team {
  font-size: 1.05rem;
}
.hero .score-card .match-score {
  font-size: 1.8rem;
  padding: 0.02rem 0.5rem;
}
.hero .score-card .match-sets li {
  font-size: 0.68rem;
}
.hero .score-card .score-sets,
.hero .score-card .score-empty {
  font-size: 0.78rem;
}
.hero .score-reeks {
  font-size: 0.82rem;
  padding: 0.12rem 0.5rem;
  background: var(--paper);
  color: var(--ink);
}

/* Volg DAVOZ rechts in de hero */
.hero .side-social {
  margin-bottom: 0.6rem;
}
.hero .side-fb-embed {
  overflow: hidden;
  border-radius: var(--radius);
}
.hero .side-block .fb-status {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 1rem 0.5rem;
  margin: 0;
}

/* Link naar de jeugduitslagen, enkel op een smal scherm (onder de
   knoppen in de hero). Op een breed scherm staan de uitslagen al in
   de hero en verdwijnt de link. */
.hero-jeugd-link {
  display: inline-block;
  margin-top: 1.3rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}
.hero-jeugd-link:hover,
.hero-jeugd-link:focus-visible {
  color: #1a1a1a;
}
@media (min-width: 1250px) {
  .hero-jeugd-link {
    display: none;
  }
}
/* De plakkende navigatiebalk mag de kop niet bedekken na het springen */
#uitslagen-jeugd {
  scroll-margin-top: 5rem;
}

/* Terwijl het Facebook-venster laadt, blijft het onzichtbaar:
   zo zie je geen half opgebouwd kader. */
.side-fb-embed iframe.is-laden {
  opacity: 0;
  height: 0 !important;
}
.side-fb-embed iframe {
  transition: opacity 0.2s ease;
}
.fb-status {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
  padding: 0.8rem 0;
  text-align: center;
}

/* ---------- Scorebord (home) ---------- */

/* Op een breed scherm staan deze kaartjes in de hero; dan blijft dit
   vak leeg en mag het geen ruimte innemen. */
.scoreboard:empty {
  display: none;
}
.scoreboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 0 0 2.8rem;
}
.score-card {
  color: var(--text);
}
.score-head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
}
.score-head a {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--yellow);
  text-decoration: none;
}
.score-head a:hover {
  color: var(--coral);
}
.score-reeks {
  background: var(--paper);
  color: var(--ink);
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.score-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 0;
}
/* De datum staat op een eigen regel onder de titel. Ook een lege
   regel houdt haar hoogte: zo begint de wedstrijd eronder in beide
   helften en in alle kaartjes op dezelfde lijn. */
.score-when {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.4;
  min-height: 1.4em;
  color: var(--text);
  margin-bottom: 0.35rem;
}
/* ---------- Eén wedstrijd: ploeg / uitslag / ploeg ----------
   Altijd onder elkaar en gecentreerd. Zo staat de uitslag netjes
   tussen de twee ploegen, ook als een ploegnaam lang is. */
.match {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  width: 100%;
}

/* ---------- Volgende match en laatste uitslag ----------
   Altijd onder elkaar, gescheiden door een dunne lijn. Beide helften
   hebben dezelfde opbouw (titel, datum, wedstrijd). */
.score-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  width: 100%;
}
.score-half {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  /* elke helft meet zichzelf, zodat de wedstrijd erin weet hoeveel
     plaats ze echt heeft */
  container: helft / inline-size;
}
.score-half + .score-half {
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}
/* Titel en datum van een helft */
.score-kop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}
/* Op de homepage staat er niets naast om mee uit te lijnen, dus een
   lege datumregel hoeft er geen plaats in te nemen. Op de teampagina's
   staan twee kaartjes naast elkaar en blijft die plaats wel vrij. */
.score-card:not(.ts-card) .score-when:empty {
  min-height: 0;
  margin-bottom: 0;
}

.match-team {
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--ink);
  /* De kaartjes breken tekst desnoods midden in een woord; een
     ploegnaam mag dat niet ("Denterge / m"), die breekt op spaties. */
  overflow-wrap: break-word;
}
.match-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.match-score {
  font-family: var(--font-display);
  font-size: 2.9rem;
  line-height: 1;
  color: #ffffff;
  border-radius: var(--radius);
  background: var(--ink);
  padding: 0.06rem 0.8rem;
  letter-spacing: 0.02em;
}
/* Op de teampagina's staan de twee kaartjes naast elkaar: het
   scoreblokje en het woord "tegen" krijgen daar dezelfde hoogte, zodat
   ook de tweede ploegnaam in beide kaartjes op één lijn staat. */
.ts-card .match-score,
.ts-card .match-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  margin: 0;
}

/* ---------- Wedstrijdkaartjes op de homepage ----------
   Alles gecentreerd. Volgende match op één regel ("Ploeg 1 vs Ploeg 2"),
   laatste uitslag ook op één regel met de score in het midden
   ("Ploeg 1  3 - 1  Ploeg 2"). Geldt in de hero en bij de jeugd. */
.wedstrijd-kaart .score-half {
  align-items: stretch;
}
.wedstrijd-kaart .is-volgende {
  text-align: center;
}
.wedstrijd-kaart .is-laatste {
  text-align: center;
}
.wedstrijd-kaart .score-kop {
  align-items: center;
  text-align: center;
}
.wedstrijd-kaart .is-laatste .match-sets {
  justify-content: center;
}

/* Volgende match als lopende tekst */
.match-regel {
  margin: 0;
  min-height: 1.65rem;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: break-word;
}
.match-regel .match-vs {
  margin: 0 0.2rem;
  vertical-align: 0.1em;
}

/* Laatste uitslag: ploeg | score | ploeg. De twee ploegkolommen zijn
   even breed, dus de score staat altijd exact in het midden van het
   kaartje. De smalle binnenmarge van het kaartje geeft die kolommen
   zoveel mogelijk plaats; past een naam toch niet, dan loopt hij door
   op een spatie. */
.match-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.35rem;
  width: 100%;
  min-height: 1.65rem;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.3;
}
.match-rij .mr-team {
  min-width: 0;
  /* enkel een woord dat op zich niet in de kolom past, breekt af */
  overflow-wrap: break-word;
}
.match-rij .mr-team:first-child {
  text-align: right;
}
.match-rij .mr-team:last-child {
  text-align: left;
}
.wedstrijd-kaart .is-laatste .match-rij .match-score {
  font-size: 1.35rem;
  padding: 0.12rem 0.3rem;
  white-space: nowrap;
}
/* Is een helft smal (twee kolommen op een kleiner scherm), dan wordt de
   tekst iets kleiner. Zo past een naam als "Zwevegem" in zijn kolom en
   breekt hij niet midden in het woord af. */
@container helft (max-width: 260px) {
  .wedstrijd-kaart .match-rij,
  .wedstrijd-kaart .match-regel {
    font-size: 0.88rem;
  }
  .wedstrijd-kaart .match-rij {
    column-gap: 0.3rem;
  }
  .wedstrijd-kaart .is-laatste .match-rij .match-score {
    font-size: 1.15rem;
    padding: 0.1rem 0.35rem;
  }
}

/* Zonder wedstrijd even hoog als wat er anders zou staan, zodat
   kaartjes naast elkaar gelijk blijven lopen */
.wedstrijd-kaart .score-empty {
  display: flex;
  align-items: center;
  font-size: 0.92rem;
}
.wedstrijd-kaart .score-empty {
  justify-content: center;
  text-align: center;
}
.wedstrijd-kaart .is-volgende .score-empty {
  min-height: 1.65rem;
}
.wedstrijd-kaart .is-laatste .score-empty {
  min-height: 1.65rem;
}

/* De tegenstander in het grijs, DAVOZ in het clubrood: zo zie je in
   één oogopslag welke kant de onze is. */
.mr-team,
.match-team {
  color: var(--muted);
}
.mr-team.is-davoz,
.match-team.is-davoz {
  color: var(--ink);
}
/* Staan de kaartjes naast elkaar, dan krijgt de volgende match plaats
   voor twee regels: loopt een lange ploegnaam door, dan begint
   "Laatste uitslag" toch op dezelfde hoogte als in het kaartje ernaast. */
@media (min-width: 481px) {
  .wedstrijd-kaart:not(.is-hero) .match-regel,
  .wedstrijd-kaart:not(.is-hero) .match-rij,
  .wedstrijd-kaart:not(.is-hero) .score-empty {
    min-height: 2.85rem;
  }
}

/* "tegen" tussen twee ploegen die nog moeten spelen */
.match-vs {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  /* ruimte errond, anders plakt het tegen het thuis/uit-label */
  margin: 0.45rem 0;
}
/* De setstanden, gekleurd vanuit DAVOZ bekeken */
.match-sets {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  margin: 0.15rem 0 0;
  padding: 0;
}
.match-sets li {
  margin: 0;
  padding: 0.1rem 0.42rem;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.match-sets li::marker {
  content: "";
}
.match-sets li.is-win {
  background: var(--ink);
  color: var(--paper);
}
.match-sets li.is-loss {
  background: var(--surface);
  color: var(--muted);
}
.score-sets {
  display: block;
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 0.35rem;
}
.score-empty {
  font-size: 1rem;
  color: var(--text);
  margin: 0;
}

.youth-heading {
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 1.2rem;
}
.scoreboard-youth {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 0 0 2.8rem;
}
.score-card.small {
  padding: 1rem 1.1rem 0;
}
.score-card.small .score-head {
  /* zelfde negatieve marge als de binnenmarge hierboven, zodat de
     balk tot tegen de randen en tot tegen de onderkant loopt */
  margin: auto -1.1rem 0;
  padding: 0.6rem 0.8rem;
}
.score-card.small .score-head a {
  font-size: 1.1rem;
}
.score-card.small .match-team {
  font-size: 1.12rem;
}
.score-card.small .match-score {
  font-size: 1.9rem;
  padding: 0.04rem 0.55rem;
}
.score-card.small .score-sets {
  font-size: 0.78rem;
}
.score-card.small .score-empty {
  font-size: 0.9rem;
}

/* ---------- Klassement en wedstrijden (teampagina's) ----------
   Dezelfde vakken als het scorebord op de homepage, met daaronder
   het klassement in de gewone tabelstijl van de site. */

.team-standings {
  margin: 0 0 2.4rem;
}
/* De naam van de ploeg, enkel op pagina's met meer dan één ploeg */
.ts-label {
  margin-top: 2.2rem;
}
.ts-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin: 1rem 0 1.8rem;
  align-items: stretch;
}
/* De inhoud vult de vrije hoogte en staat verticaal gecentreerd, zodat
   de uitslag en de volgende wedstrijd naast elkaar gelijk uitkomen. */
.ts-card .ts-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0 1rem;
}

.ts-standings-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.ts-standings-head h3 {
  margin: 0;
}
/* De reeks als ondertitel boven het klassement */
.ts-reeks {
  font-size: 0.9rem;
  color: var(--muted);
}
.ts-empty {
  margin: 0.8rem 0 0;
  text-align: left;
}
.ts-meta {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.ts-table {
  font-size: 0.9rem;
}
.ts-table .ts-num {
  text-align: right;
  white-space: nowrap;
}
/* De ploegnaam krijgt alle plaats die de cijferkolommen overlaten */
.ts-table .ts-ploeg {
  width: 100%;
  white-space: nowrap;
}
/* De eigen ploeg krijgt de volledige rij in het merkrood, zodat de
   bezoeker ze in één oogopslag vindt. De selector is bewust zwaarder
   dan die van de even rijen hierboven, anders wint die van de strepen. */
table.davoz.ts-table tr.ts-own td {
  background: var(--ink);
  color: var(--paper);
  font-weight: 800;
}
table.davoz.ts-table tr.ts-own td b {
  color: var(--paper);
}

@media (max-width: 900px) {
  .ts-cards {
    grid-template-columns: 1fr;
  }
}
/* Op een smal scherm blijven de belangrijkste kolommen over; de tabel
   zit in .table-wrap en kan altijd nog zijwaarts schuiven. */
@media (max-width: 560px) {
  .ts-table .ts-opt {
    display: none;
  }
  .ts-table {
    font-size: 0.85rem;
  }
  .ts-table th,
  .ts-table td {
    padding: 0.5rem 0.4rem;
  }
  /* Liever een ploegnaam over twee regels dan een tabel die schuift */
  .ts-table .ts-ploeg {
    white-space: normal;
  }
}

/* Titel boven de zijbalk, zelfde stijl als de koppen in de inhoud
   maar wat kleiner, want de kolom is smaller. */
.side-head {
  margin-bottom: 1.2rem;
}
.side-head h2 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
}

/* ---------- Nieuwsberichten ---------- */

.feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.6rem;
}
.feed-head h2 {
  font-family: var(--font-display);
  font-size: 2.6rem;
  text-transform: uppercase;
  margin: 0;
}

.news-post {
  /* Geen binnenmarge onderaan: de titelbalk moet tot tegen de
     onderrand lopen, net als bij de andere kaartjes. */
  padding: 1.8rem 1.25rem 0;
  margin-bottom: 2.2rem;
  text-align: left;
}
.news-post h2,
.news-post h1 {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
/* De titel van een bericht in de lijst is de balk onderaan */
.news-post h2 {
  margin: auto -1.25rem 0;
}
.news-post h2 a {
  text-decoration: none;
}
.news-post h2 a:hover {
  color: var(--coral);
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 1.1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.post-meta .date {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  font-weight: 800;
  padding: 0.15rem 0.6rem;
}
.post-body h3 {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 1.4rem 0 0.4rem;
}
.post-body p {
  margin: 0 0 0.9rem;
}
.post-body ul {
  padding-left: 1.3rem;
}

/* Afbeeldingen in een nieuwsbericht, in dezelfde stijl als de
   teamfoto's: zwarte kader, harde schaduw, rode bijschriftbalk. */
.post-body .post-figure {
  margin: 1.6rem 0;
  background: var(--card);
}
.post-body .post-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.post-body .post-figure figcaption {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  padding: 0.6rem 0.9rem;
  border-top: 3px solid var(--ink);
  background: var(--yellow);
  color: #fff;
}
/* Een losse afbeelding zonder figure blijft ook binnen de kolom */
.post-body img {
  max-width: 100%;
  height: auto;
}
.post-cats {
  margin-top: 1.2rem;
  margin-bottom: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.cat-chip {
  display: inline-block;
  background: var(--paper);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.55rem;
  text-decoration: none;
}
.cat-chip:hover {
  background: var(--ink);
  color: var(--paper);
}

.teamnews-item {
  margin-bottom: 1.1rem;
}
.teamnews-item h3 {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  text-transform: uppercase;
}
.teamnews-item .tn-date {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.teamnews-item p {
  margin: 0.4rem 0 0.6rem;
  font-size: 0.94rem;
}
.teamnews-item a.more {
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- QR-blok ---------- */

.qr-block {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  border: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
  background: var(--surface);
}
.qr-block svg {
  width: 96px;
  height: 96px;
  flex: none;
  color: var(--ink);
}
.qr-block .qr-code {
  flex: none;
  background: #fff;
  padding: 6px;
  line-height: 0;
}
.qr-block .qr-code img,
.qr-block .qr-code canvas {
  display: block;
  width: 96px;
  height: 96px;
}
.qr-block .qr-caption {
  font-size: 0.9rem;
}

/* ---------- Tabellen ---------- */

.table-wrap {
  overflow-x: auto;
  margin: 1.2rem 0 2rem;
}
table.davoz {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  font-size: 0.95rem;
}
table.davoz th {
  background: var(--ink);
  color: var(--paper);
  text-align: left;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 0.65rem 0.9rem;
}
table.davoz td {
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
table.davoz tr:nth-child(even) td {
  background: #faf8f2;
}
table.davoz td b {
  font-weight: 800;
}

/* ---------- Roster (teampagina's) ---------- */

.team-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: 1.4rem 1.8rem;
  margin: 1.8rem 0 2.4rem;
  text-align: left;
}
.team-badge svg,
.team-badge img {
  width: auto;
  height: 84px;
  flex: none;
  /* Wit logo op het rode vlak */
  filter: brightness(0) invert(1);
}
.team-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
  margin: 1.4rem 0 2rem;
}
.team-photos figure {
  margin: 0;
  background: var(--card);
}
.team-photos img {
  display: block;
  width: 100%;
  height: auto;
}
.team-photos figcaption {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  padding: 0.6rem 0.9rem;
  border-top: 3px solid var(--ink);
  background: var(--yellow);
  color: #fff;
}
.team-badge .tb-name {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 0.95;
  color: var(--yellow);
  text-transform: uppercase;
}
.team-badge .tb-sub {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.3rem;
}

.roster {
  display: grid;
  /* breder dan vroeger: het nummerblokje neemt plaats in, en een naam
     als "Renée Van Huylenbrouck" moet op één regel passen */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.2rem;
  margin: 1.4rem 0 2rem;
}
.pos-card {
  height: 100%;
  /* smallere binnenmarge links en rechts, puur om de namen plaats te
     geven; de titelbalk onderaan schuift even ver mee naar buiten */
  --vak-rand: 0.9rem;
  padding-left: var(--vak-rand);
  padding-right: var(--vak-rand);
}
.pos-card h4 {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pos-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Elke speelster staat op een eigen wit balkje: links het nummer in
   een rood vakje (zoals een rugnummer), daarnaast de naam in het zwart.
   Het nummervakje heeft een vaste breedte, dus alle namen beginnen op
   dezelfde lijn, of het nummer nu uit één of twee cijfers bestaat. */
.pos-card ul {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  /* de balkjes lopen tot tegen de randen van het vakje */
  margin: 0 calc(-1 * var(--vak-rand)) 0.15rem;
  padding: 0 var(--vak-rand);
}
.pos-card li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  align-items: center;
  column-gap: 0.5rem;
  padding: 0.3rem 0.45rem;
  border-top: 0;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--text);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.3;
  text-align: left;
  /* een ploegnaam hoort op één regel te staan */
  hyphens: none;
  overflow-wrap: normal;
}
.pos-card .rn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.45rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 3px;
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Een vakje waar nog geen enkel nummer is ingevuld, blijft staan zoals
   vroeger: gewone namen op een lichte achtergrond. */
.pos-card:not(:has(.rn:not(:empty))) li {
  display: block;
  text-align: center;
  background: none;
  color: var(--text);
  font-weight: 600;
  padding: 0.32rem 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.pos-card:not(:has(.rn:not(:empty))) li:first-child {
  border-top: 0;
}
.pos-card:not(:has(.rn:not(:empty))) .rn {
  display: none;
}
.pos-card li:first-child {
  border-top: 0;
}

.coach-line {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius) var(--radius) 0 0;
  display: inline-block;
  font-weight: 800;
  padding: 0.55rem 1.1rem;
  margin: 0.4rem 0 1rem;
}

/* ---------- Personen (bestuur, integriteit) ---------- */

.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.3rem;
  margin: 1.6rem 0 2.2rem;
}
.person {
  height: 100%;
}
.person .p-role {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.7rem;
}
.person h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
}
.person p {
  margin: 0.15rem 0;
  font-size: 0.92rem;
}
.person a {
  font-weight: 700;
}

/* ---------- Tijdlijn (historiek) ---------- */

.timeline {
  margin: 2rem 0;
  padding-left: 1.6rem;
  border-left: 4px solid var(--ink);
}
.timeline .t-item {
  position: relative;
  margin-bottom: 1.8rem;
}
.timeline .t-item::before {
  content: "";
  position: absolute;
  left: -1.6rem;
  top: 0.45rem;
  width: 14px;
  height: 14px;
  background: var(--yellow);
  transform: translateX(-9px);
}
.timeline .t-year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--coral);
}
.timeline p {
  margin: 0.3rem 0 0;
}

/* ---------- Linklijsten ---------- */

.linklist {
  list-style: none;
  margin: 1.4rem 0 2rem;
  padding: 0;
}
.linklist li {
  margin-bottom: 0.7rem;
}
.linklist a {
  display: block;
  background: var(--card);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: 0.8rem 1.1rem;
  font-weight: 800;
  text-decoration: none;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}
.linklist a:hover {
  background: var(--surface);
  color: var(--coral);
}
.linklist a span.ll-note {
  display: block;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* ---------- Partnerlogo's (placeholder) ---------- */

.partner-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--card);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0.8rem 1.3rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  margin: 0.8rem 0 1.4rem;
}
.partner-logo .dot {
  width: 18px;
  height: 18px;
  background: var(--coral);
  border-radius: 50%;
}

/* ---------- Sidebar ---------- */

.sidebar {
  min-width: 0;
}
.side-block {
  margin-bottom: 1.8rem;
}
.side-block h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--yellow);
}
.side-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-block li {
  padding: 0.4rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}
.side-block li:first-child {
  border-top: 0;
}
.side-block a {
  text-decoration: none;
  font-weight: 700;
}
.side-block a:hover {
  color: var(--coral);
  text-decoration: underline;
}
.side-block .s-date {
  display: block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.side-social {
  display: flex;
  gap: 0.7rem;
}
.side-social a {
  flex: 1;
  display: block;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.55rem 0.4rem;
  text-decoration: none;
}
.side-social a:hover {
  background: var(--coral);
  color: var(--paper);
}
.side-fb-embed {
  margin-top: 0.9rem;
}
.side-fb-embed iframe {
  display: block;
  max-width: 100%;
}
.side-search {
  display: flex;
  gap: 0.4rem;
}
.side-search input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  font: inherit;
  background: var(--paper);
}
.side-search button {
  background: var(--yellow);
  font-weight: 800;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
}
.side-search button:hover {
  background: var(--coral);
  color: var(--paper);
}
/* In de zijbalk staan de categorieen onder elkaar en nemen ze de
   volle breedte van het blokje. Op een nieuwsbericht blijven het
   losse chipjes naast elkaar; dat is .post-cats hierboven. */
.cat-cloud {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cat-cloud .cat-chip {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  font-size: 0.78rem;
}
/* Deze regel moet zwaarder wegen dan .side-block a:hover verderop,
   anders wint daar het donkerrood en staat er rode tekst op een rode
   achtergrond. */
.side-block .cat-cloud .cat-chip:hover,
.side-block .cat-cloud .cat-chip:focus-visible {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}

/* ---------- Footer ---------- */

.site-foot {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  border-top: 0;
}
/* Basisregel voor alles wat in de voettekst staat. Zonder deze regel
   valt een link terug op het donkerrood van de rest van de site, en
   dat is precies de achtergrondkleur hier. De blokken hieronder mogen
   hier gerust van afwijken; die regels staan verderop en winnen. */
.site-foot a {
  color: var(--paper);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding: 3rem 0 2rem;
}
/* Wit, niet var(--yellow): die volgt sinds de kleurwissel het merkrood
   en dat is ook de achtergrond van de voettekst, waardoor "Snel naar"
   en "Externe links" onzichtbaar waren. */
.foot-grid h4,
.foot-sponsors h4 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 0.8rem;
}
.foot-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot-grid li {
  margin-bottom: 0.45rem;
  font-size: 0.92rem;
}
.foot-grid a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}
.foot-grid a:hover {
  color: #1a1a1a;
  text-decoration: underline;
}
.foot-brand {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--paper);
  line-height: 1;
}
.foot-brand small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.4rem;
}
.foot-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}
.foot-social a {
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 0.35rem 0.9rem;
  font-weight: 700;
  font-size: 0.85rem;
}
/* ---------- Sponsors (voettekst) ----------
   Een strook met logo's onderaan elke pagina. De logo's staan op een
   witte ondergrond, want een sponsorlogo is zelden gemaakt om op het
   clubrood te staan. */

.foot-sponsors {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding: 1.8rem 0 0.4rem;
  text-align: center;
}
.foot-sponsors h4 {
  margin-bottom: 1.1rem;
}
/* Het rooster vult zichzelf: er passen er zoveel op een rij als er
   plaats is, allemaal even groot en gecentreerd. Of er nu drie of
   twintig sponsors zijn, en op eender welk scherm.
   Flex en geen grid: zo staat ook een laatste, onvolledige rij netjes
   gecentreerd in plaats van links tegen de eerste kolom. */
.sponsor-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Elk vakje even groot, ook op een laatste, halfvolle rij. Zou het
     meegroeien, dan werden de laatste vakjes groter dan de rest.
     `min(...)` houdt het veilig op een smal scherm. */
  flex: 0 0 auto;
  width: min(290px, 100%);
  /* vaste verhouding: elk vakje is even hoog, wat de logo's ook zijn */
  aspect-ratio: 16 / 9;
  /* een beetje lucht, zodat het logo niet tegen de rand plakt */
  padding: 0.5rem;
  background: var(--paper);
  border-radius: var(--radius);
  text-decoration: none;
  overflow: hidden;
}
/* Een sponsor zonder logo toont zijn naam; die heeft wat meer nodig */
.sponsor:has(.sponsor-naam) {
  padding: 0.8rem;
}
/* Het logo vult de ruimte binnen die marge, zonder te vervormen */
.sponsor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
a.sponsor:hover {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
/* Sponsor zonder logo: dan maar de naam, in het clubrood */
.sponsor-naam {
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: break-word;
}
.sponsor-oproep {
  max-width: 34rem;
  margin: 0 auto 1.4rem;
  font-size: 0.9rem;
}


.foot-copy {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  font-size: 0.85rem;
  padding: 1.1rem 0;
  color: rgba(255, 255, 255, 0.7);
}
.foot-copy a {
  color: var(--paper);
}
.foot-copy a:hover,
.site-foot a:hover {
  color: #1a1a1a;
}
/* De omlijnde knopjes worden zwart bij hover, dus daar moet de
   tekst juist wit blijven. Deze regel staat na de vorige, anders
   wint die en krijg je zwarte tekst op een zwart vlak. */
.foot-social a:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: var(--paper);
}

/* ---------- Nieuwsarchief ---------- */

.alle-berichten {
  margin: 0 0 2.5rem;
  text-align: center;
}

.archief-filters {
  margin: 1.6rem 0 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.filter-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.filter-label {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: 0.4rem;
  min-width: 3.6rem;
}
.filter-knop {
  display: inline-block;
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}
.filter-knop:hover {
  background: var(--surface);
  color: var(--ink);
}
.filter-knop.is-actief {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.filter-knop.is-actief:hover {
  background: var(--ink-soft);
  color: var(--paper);
}
.archief-telling {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 1.4rem;
}

/* ---------- Zoekresultaten ---------- */

.search-result {
  margin-bottom: 1rem;
}
.search-result h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
}
.search-result .sr-type {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--coral);
}
.search-result p {
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- Zoeksuggesties onder het zoekveld ---------- */

.has-suggest {
  position: relative;
}
.search-suggest {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  /* moet boven de vastgezette navigatiebalk (z-index 100) blijven */
  z-index: 200;
  background: var(--paper);
  max-height: 60vh;
  overflow-y: auto;
  text-align: left;
}
.head-search .search-suggest {
  left: auto;
  right: 0;
  min-width: min(320px, calc(100vw - 2rem));
  max-width: calc(100vw - 1.5rem);
}
.search-suggest .ss-item,
.search-suggest .ss-all {
  display: block;
  padding: 0.6rem 0.9rem;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid #e7e7e7;
}
.search-suggest .ss-item:hover,
.search-suggest .ss-item:focus,
.search-suggest .ss-item.is-active,
.search-suggest .ss-all:hover,
.search-suggest .ss-all.is-active {
  background: var(--yellow);
  color: var(--paper);
  outline: none;
}
.search-suggest .ss-item:hover mark,
.search-suggest .ss-item.is-active mark {
  background: var(--ink);
  color: var(--paper);
}
.search-suggest .ss-type {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.search-suggest .ss-item:hover .ss-type,
.search-suggest .ss-item.is-active .ss-type {
  color: var(--paper);
}
.search-suggest .ss-title {
  display: block;
  font-weight: 700;
  line-height: 1.3;
}
.search-suggest .ss-all {
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 0;
  background: #f4f4f4;
}
.search-suggest .ss-empty {
  margin: 0;
  padding: 0.8rem 0.9rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- Markering van gevonden woorden ---------- */

mark {
  background: var(--yellow);
  color: var(--paper);
  padding: 0 0.12em;
}
.search-result h3 mark {
  background: transparent;
  color: var(--coral);
  padding: 0;
}
.search-count {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 1.2rem;
}
.search-loading {
  color: var(--muted);
}
.search-tips {
  font-size: 0.92rem;
  color: var(--muted);
}
.search-tips a {
  color: var(--yellow);
  font-weight: 700;
}

/* De titelbalk onderaan. De titel die al in het vak stond wordt
   met `order` naar onder gezet en breekt met een negatieve marge
   uit de binnenmarge van het vak. In de HTML verandert er niets. */
.tile h3,
.teamnews-item h3,
.side-block h3,
.person h3,
.pos-card h3,
.pos-card h4,
.search-result h3,
.news-post h2,
.score-card .score-head {
  order: 9;
  /* auto duwt de balk altijd tegen de onderkant van het vak. De marge
     is het spiegelbeeld van de binnenmarge van het vak, zodat de balk
     tot tegen de randen loopt; een vak met een afwijkende binnenmarge
     zet daarvoor --vak-rand. */
  margin: auto calc(-1 * var(--vak-rand, 1.25rem)) 0;
  padding: 0.75rem 1rem;
  background: var(--card-foot);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  border: 0;
}
.tile h3 a,
.teamnews-item h3 a,
.side-block h3 a,
.person h3 a,
.pos-card h3 a,
.pos-card h4 a,
.search-result h3 a,
.news-post h2 a,
.score-card .score-head a {
  color: inherit;
  text-decoration: none;
}
.tile h3 a,
.teamnews-item h3 a,
.side-block h3 a,
.person h3 a,
.pos-card h3 a,
.search-result h3 a,
.news-post h2 a,
.score-card .score-head a {
  color: #ffffff;
}
.tile:hover h3,
.teamnews-item:hover h3,
.search-result:hover h3,
.news-post:hover h2 {
  background: var(--ink-soft);
}

/* Alles wat op een rood vlak staat is wit. De elementen staan hier
   met naam en niet als `*`: een sterretje telt niet mee voor de
   voorrang, waardoor regels als `.prose strong` (rood) het zouden
   winnen en je rode tekst op een rood vlak kreeg. */
.callout,
.callout *,
.callout a,
.callout strong,
.callout b,
.callout em,
.callout i,
.callout h1,
.callout h2,
.callout h3,
.callout h4,
.callout h5,
.callout h6,
.team-badge,
.team-badge *,
.team-badge a,
.team-badge strong,
.coach-line,
.coach-line *,
.coach-line a,
.coach-line strong,
table.davoz th,
table.davoz th *,
table.davoz th a,
table.davoz th strong {
  color: var(--paper);
}
.callout a,
.team-badge a {
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* ---------- Responsief ---------- */

@media (max-width: 1249px) {
  /* Te smal voor drie kolommen: de uitslagen en het sociale blok
     staan dan op hun gewone plek, de hero bevat enkel tekst. */
  .hero-grid {
    grid-template-columns: 1fr;
    padding: 0 1.25rem;
  }
  .hero {
    padding: 3rem 0 3.4rem;
  }
}

@media (max-width: 1020px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 980px) {
  .hero-bg {
    background-size: auto 66%;
  }
}

@media (max-width: 700px) {
  .hero {
    min-height: clamp(420px, 66vh, 620px);
  }
  .hero-bg {
    background-size: 88% auto;
  }
  /* Smal scherm: de volledige naam wordt hier zo klein dat ze niets
     meer voorstelt. Daarom DAVOZ, over bijna de hele breedte.
     De maat staat op het woord zelf en niet op de h1: verderop
     staan nog .hero h1-regels die het anders zouden overschrijven. */
  .hero-lang {
    display: none;
  }
  .hero-kort {
    /* Uit de zijmarges van de hero breken, zodat DAVOZ niet vast
       zit aan de smalle kolom. Twee negatieve marges in plaats van
       width: 100vw, want die laatste telt een schuifbalk mee en
       duwt het woord dan scheef. 40vw laat links en rechts samen
       ongeveer een kwart lucht. */
    display: block;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    font-size: 40vw;
    line-height: 0.82;
    letter-spacing: 0;
  }
}

@media (max-width: 760px) {
  .scoreboard {
    grid-template-columns: 1fr;
  }
  .scoreboard-youth {
    grid-template-columns: repeat(2, 1fr);
  }
  .head-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
  }
  .head-search {
    width: 100%;
  }
  .head-search input {
    flex: 1;
    min-width: 0;
  }

  .nav-toggle {
    display: inline-flex;
    margin: 0.5rem 0 0.5rem 1.25rem;
  }
  .nav-inner {
    flex-wrap: wrap;
  }
  .nav-list {
    display: none;
    flex-direction: column;
    width: 100%;
    padding-bottom: 0.8rem;
  }
  .site-nav.open {
    position: fixed;
    inset: 0;
    z-index: 200;
    overflow-y: auto;
    background: var(--paper);
    animation: nav-overlay-in 0.18s ease;
  }
  @keyframes nav-overlay-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .site-nav.open {
      animation: none;
    }
  }
  .site-nav.open .nav-wide {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .site-nav.open .nav-list {
    display: flex;
  }
  body.nav-open {
    overflow: hidden;
  }
  .nav-list > li > a {
    border: 0;
    border-top: 1px solid var(--line);
    padding: 0.85rem 3rem 0.85rem 1.25rem;
  }
  .nav-list > li:first-child > a {
    border-left: 0;
  }
  .nav-list > li > a:hover,
  .nav-list > li:focus-within > a {
    background: none;
    color: var(--ink);
  }
  .nav-list > li.active > a:hover {
    background: var(--coral);
    color: var(--paper);
  }
  .drop-toggle {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 3rem;
    height: 3.1rem;
    background: none;
    border: 0;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    cursor: pointer;
  }
  .drop-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: translate(-50%, -65%) rotate(45deg);
    transition:
      background 0.14s ease,
      color 0.14s ease;
  }
  .nav-list > li.drop-open > .drop-toggle::after {
    transform: translate(-50%, -35%) rotate(-135deg);
  }
  .drop {
    display: block;
    position: static;
    box-shadow: none;
    border: 0;
    border-left: 4px solid var(--yellow);
    margin-left: 1.25rem;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav-list > li.drop-open > .drop {
    max-height: 1000px;
  }
  /* Naast elkaar is er op een telefoon geen plaats voor: de
     onderdelen van Engagement staan daar gewoon ingesprongen. */
  .drop-sub {
    display: block;
    position: static;
    min-width: 0;
    background: none;
    padding: 0;
  }
  .drop li.has-sub > a::after {
    content: "";
  }
  .drop-sub a {
    padding-left: 2.1rem;
    font-weight: 600;
    font-size: 0.84rem;
  }
  .nav-extra {
    display: none;
  }
  .site-nav.open .nav-extra {
    display: block;
    margin-top: auto;
    padding: 1.4rem 1.25rem 2rem;
    background: var(--ink);
    color: var(--paper);
  }
  .nav-extra-label {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--yellow);
    margin-bottom: 0.7rem;
  }
  .nav-extra-social {
    display: flex;
    gap: 0.8rem;
  }
  .nav-extra-social a {
    flex: 1;
    text-align: center;
    border: 2px solid var(--paper);
    color: var(--paper);
    text-decoration: none;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.6rem 0.8rem;
  }
  .nav-extra-social a:hover {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--paper);
  }

  .layout {
    padding: 2rem 1.1rem 3rem;
    gap: 2rem;
  }
  .hero {
    padding: 2.2rem 0 2.6rem;
  }
  .hero-inner {
    padding: 0.5rem 1.25rem 0.5rem;
  }
  .hero p.lead {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  .hero h1 {
    font-size: clamp(2.2rem, 8.5vw, 4.6rem);
  }
  .feed-head h2 {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
  }
  .match-score {
    font-size: 2.3rem;
  }
  .team-badge {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
  }
  .team-badge .tb-name {
    font-size: 1.7rem;
  }
  .team-badge svg,
  .team-badge img {
    height: 56px;
  }
  .team-photos {
    grid-template-columns: 1fr;
  }

  .foot-grid {
    grid-template-columns: 1fr;
  }
  .news-post {
    padding: 1.3rem 1.2rem;
  }
  .qr-block {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .container,
  .layout {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
  .scoreboard-youth {
    grid-template-columns: 1fr;
  }
  .brand-name {
    font-size: clamp(2rem, 10vw, 3.4rem);
  }
  .hero h1 {
    font-size: clamp(2rem, 11.5vw, 4rem);
    margin-bottom: 0.8rem;
  }
  .hero-kicker {
    font-size: 0.7rem;
  }
  .page-title {
    font-size: clamp(2.1rem, 9vw, 4.2rem);
  }
  .stat {
    min-width: 0;
    flex: 1 1 calc(50% - 0.5rem);
    padding: 0.6rem 0.8rem;
  }
  .score-card {
    /* geen marge onderaan: de rode balk loopt tot tegen de rand */
    padding: 1.1rem 1.1rem 0;
  }
  .score-card .score-head {
    margin: auto -1.1rem 0;
  }
  .match-score {
    font-size: 2.1rem;
    padding: 0.05rem 0.6rem;
  }
  .tile {
    padding: 1.1rem 1.1rem 1rem;
  }
}

/* ---------- Wedstrijdkaartjes: meer plaats voor de ploegnamen ----------
   Het kaartje blijft even breed; enkel de binnenmarge links en rechts
   is kleiner, zodat de namen meer ruimte krijgen. De rode titelbalk
   onderaan schuift even ver mee naar buiten, zodat hij tot tegen de
   randen blijft lopen. Staat achteraan het bestand omdat hij moet
   winnen van de algemene kaartregels (ook die voor smalle schermen). */
.score-card.wedstrijd-kaart {
  --kaart-rand: 0.7rem;
  padding-left: var(--kaart-rand);
  padding-right: var(--kaart-rand);
}
.score-card.wedstrijd-kaart .score-head {
  margin-left: calc(-1 * var(--kaart-rand));
  margin-right: calc(-1 * var(--kaart-rand));
}

/* ---------- Wedstrijdkaartjes: het hele kaartje is klikbaar ----------
   De link op de ploegnaam in de titelbalk wordt onzichtbaar uitgerekt
   over het volledige kaartje. Zo blijft het één gewone link (ook met het
   toetsenbord bereikbaar) en stuurt een klik waar dan ook op het
   kaartje je naar de teampagina. */
.score-card.wedstrijd-kaart {
  position: relative;
}
.score-card.wedstrijd-kaart .score-head a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.score-card.wedstrijd-kaart:hover .score-head {
  background: var(--ink-soft);
}
.score-card.wedstrijd-kaart:has(.score-head a:focus-visible) {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}
.score-card.wedstrijd-kaart .score-head a:focus-visible {
  outline: none;
}

/* ============================================================
   LAADSCHERM
   Een rood vlak met het logo en een balkje eronder. Het komt
   alleen op de homepagina: js/laadscherm.js staat enkel in de
   head van index.html en zet daar de klassen op <html>, voor
   de eerste verf, dus je ziet geen flits.

     html::before  het rode vlak met het spoor van de balk
     html::after   het logo
     body::before  de balk zelf

   Twee standen, zie js/laadscherm.js:

     laadscherm-kort   de eerste keer: een halve seconde, vast.
     laadscherm-wacht  daarna: blijft staan tot de pagina er is.
                       De balk kruipt afremmend naar negentig
                       procent, want hoever een pagina staat is
                       niet te meten. Zodra site.js de klasse
                       is-geladen zet, springt hij vol en
                       vervaagt alles. Het vangnet haalt het er
                       na zes seconden hoe dan ook af, zodat een
                       haperend script nooit een rood scherm
                       laat staan.
   ============================================================ */

html.laadscherm::before,
html.laadscherm::after,
html.laadscherm body::before {
  content: "";
  position: fixed;
  pointer-events: none;
}

html.laadscherm::before,
html.laadscherm::after {
  inset: 0;
}

/* Het rode vlak, met het grijze spoor van de balk erin getekend. */
html.laadscherm::before {
  z-index: 9998;
  background-color: var(--ink);
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0.28)
  );
  background-repeat: no-repeat;
  background-position: center calc(50% + 78px);
  background-size: 180px 5px;
}

/* Het logo. Het bestand is rood, dus zwart maken en omkeren geeft wit. */
html.laadscherm::after {
  z-index: 9999;
  background: url("../images/davoz-logo.png") no-repeat center calc(50% - 28px);
  background-size: auto 128px;
  filter: brightness(0) invert(1);
}

html.laadscherm body::before {
  z-index: 10000;
  top: calc(50% + 78px);
  left: calc(50% - 90px);
  width: 180px;
  height: 5px;
  background: var(--paper);
  /* Uitrekken in plaats van de breedte animeren: zo volstaat een
     enkele set keyframes voor elke schermbreedte. */
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---- De eerste keer: een halve seconde, vaste duur ---- */

html.laadscherm-kort::before,
html.laadscherm-kort::after,
html.laadscherm-kort body::before {
  animation: laadscherm-weg 0.5s ease-in forwards;
}

/* De balk staat precies vol op het moment dat de fade begint. */
html.laadscherm-kort body::before {
  animation:
    laadscherm-vol 0.38s ease-out forwards,
    laadscherm-weg 0.5s ease-in forwards;
}

/* ---- Daarna: wachten tot de pagina opgebouwd is ---- */

html.laadscherm-wacht::before,
html.laadscherm-wacht::after,
html.laadscherm-wacht body::before {
  animation: laadscherm-noodrem 6s linear forwards;
}

html.laadscherm-wacht body::before {
  animation:
    laadscherm-kruip 2.5s ease-out forwards,
    laadscherm-noodrem 6s linear forwards;
}

/* Klaar: de animaties loslaten, zodat deze waarden het overnemen. */
html.laadscherm-wacht.is-geladen::before,
html.laadscherm-wacht.is-geladen::after,
html.laadscherm-wacht.is-geladen body::before {
  animation: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s;
}

html.laadscherm-wacht.is-geladen body::before {
  transform: scaleX(1);
  transition:
    transform 0.15s ease-out,
    opacity 0.3s ease,
    visibility 0.3s;
}

/* ---- Keyframes ---- */

@keyframes laadscherm-vol {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes laadscherm-kruip {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(0.9);
  }
}

@keyframes laadscherm-weg {
  0%,
  76% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes laadscherm-noodrem {
  0%,
  94% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@media (max-width: 700px) {
  html.laadscherm::before {
    background-size: 140px 5px;
    background-position: center calc(50% + 64px);
  }
  html.laadscherm::after {
    background-size: auto 96px;
    background-position: center calc(50% - 24px);
  }
  html.laadscherm body::before {
    top: calc(50% + 64px);
    left: calc(50% - 70px);
    width: 140px;
  }
}

/* Wie beweging liever beperkt houdt, krijgt een stilstaande balk
   en geen fade bij het wegvallen. */
@media (prefers-reduced-motion: reduce) {
  html.laadscherm-kort body::before {
    transform: scaleX(1);
    animation: laadscherm-weg 0.5s ease-in forwards;
  }
  html.laadscherm-wacht body::before {
    transform: scaleX(0.9);
    animation: laadscherm-noodrem 6s linear forwards;
  }
  html.laadscherm-wacht.is-geladen::before,
  html.laadscherm-wacht.is-geladen::after,
  html.laadscherm-wacht.is-geladen body::before {
    transition: none;
  }
}

/* ============================================================
   COOKIEBALK
   Verschijnt onderaan zolang de bezoeker niets gekozen heeft.
   Weigeren en Aanvaarden krijgen bewust dezelfde knop: even
   groot, even opvallend, dezelfde kleur.
   ============================================================ */

.cookie-balk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.4rem;
  padding: 0.9rem 1.2rem;
  background: var(--ink);
  color: var(--paper);
  border-top: 3px solid var(--paper);
}

.cookie-balk p {
  margin: 0;
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--paper);
}

.cookie-balk a {
  color: var(--paper);
  text-decoration: underline;
}

.cookie-knoppen {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.cookie-knop {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.55rem 1.3rem;
  min-width: 8.5rem;
  border: 2px solid var(--paper);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.cookie-knop:hover,
.cookie-knop:focus-visible {
  background: var(--surface);
}

/* Het blokje dat in de plaats van het Facebook-venster komt
   zolang er geen toestemming is. */
.fb-vraag {
  padding: 0.9rem 1rem 1.1rem;
  text-align: center;
}

.fb-vraag p {
  margin: 0 0 0.8rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text);
}

.fb-vraag .cookie-knop {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  min-width: 0;
}

.fb-vraag .cookie-knop:hover,
.fb-vraag .cookie-knop:focus-visible {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
}

/* De knop onderaan om de keuze te herzien: oogt als de tekst
   eromheen, niet als een knop. */
.foot-cookies {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0.2rem;
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 560px) {
  .cookie-balk {
    justify-content: stretch;
    text-align: center;
  }
  .cookie-knoppen {
    width: 100%;
  }
  .cookie-knop {
    flex: 1;
    min-width: 0;
  }
}