/* ===== WK 2026 Poule-calculator ===== */

/* Bridge: map the original (El Niño) design tokens to the Manta Beach
   palette so the calculator inherits theme + dark-mode automatically. */
:root {
  --gold: var(--color-primary);
  --gold-dark: var(--color-primary-dark);
  --gold-light: var(--color-primary-light);
  --text: var(--color-text);
  --text-body: var(--color-text);
  --text-muted: var(--color-text-light);
  --bg: var(--color-bg);
  --bg-alt: var(--color-bg-alt);
  --border: var(--color-bg-alt);
  --border-light: var(--color-bg-alt);
  --card-bg: var(--color-white);
  --card-shadow: rgba(0, 0, 0, 0.08);
  --always-white: #ffffff;
}

/* Hero (Manta page-hero variant: real <img> + overlay) */
.wk-hero { height: 42vh; min-height: 320px; }
.wk-hero .hero-content {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  padding: 0 1rem;
  max-width: 760px;
  transform: translateY(6vh);
}
.wk-hero .wk-hero-tagline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.1;
  margin: 0 auto .5rem;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, .55);
}
.wk-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  color: var(--color-white);
  margin-bottom: .4rem;
  text-shadow: 2px 4px 12px rgba(0, 0, 0, .4);
}
.wk-hero p {
  max-width: 640px;
  margin: 0 auto;
  text-shadow: 1px 2px 6px rgba(0, 0, 0, .4);
}
.wk-hero .wk-hero-note {
  font-size: .8rem;
  font-style: italic;
  opacity: .92;
  margin: 1.2rem auto 0;
  max-width: 640px;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, .6);
}

.wk-intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.wk-intro p { font-size: 1.05rem; }

.wk-section-title {
  text-align: center;
  margin-bottom: 1.5rem;
  font-family: var(--font-heading);
}

.wk-footnote,
.wk-thirds-intro,
.wk-bracket-intro {
  font-size: .85rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 1rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.wk-thirds-intro,
.wk-bracket-intro { margin-top: 0; margin-bottom: 1.5rem; }

/* ===== Groep-grid ===== */

.wk-groups-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .wk-groups-grid { grid-template-columns: 1fr 1fr; } }

.wk-group-card {
  background: var(--card-bg);
  box-shadow: 0 4px 15px var(--card-shadow);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 1rem 1rem 1.25rem;
}
.wk-group-card h3 {
  font-family: var(--font-heading);
  color: var(--gold);
  margin-bottom: .75rem;
  font-size: 1.25rem;
  letter-spacing: .5px;
}

/* ===== Wedstrijdrijen ===== */

.wk-fixture {
  padding: .55rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: .92rem;
}
.wk-fixture:last-child { border-bottom: none; }
/* 5-col grid: lege spacer | home | score | away | wis-knop.
   Spacer en wis-knop zijn even breed, zodat home/score/away echt
   symmetrisch zitten en de score-as exact in het midden valt. */
.wk-fixture-row {
  display: grid;
  grid-template-columns: 22px 1fr auto 1fr 22px;
  align-items: center;
  gap: .5rem;
}
.wk-fixture-spacer { width: 22px; }
.wk-fixture-home { text-align: right; padding-right: .35rem; }
.wk-fixture-away { text-align: left;  padding-left:  .35rem; }

/* Wis-knop per wedstrijd — rechts in de fixture-rij, achter het uitteam.
   De spacer links balanceert hem zodat de score in het midden blijft. */
.wk-fixture-clear {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
}
.wk-fixture.has-score .wk-fixture-clear { visibility: visible; }
.wk-fixture-clear:hover {
  background: rgba(192, 57, 43, .12);
  color: #c0392b;
}
.wk-fixture-clear:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* Gekoppeld score-blok met gestapelde +/- per kant */
.wk-score-block {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wk-step-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.wk-step-stack .wk-step-btn {
  width: 22px;
  height: 22px;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.wk-step-stack .wk-step-btn:hover:not(:disabled) {
  background: var(--bg-alt);
  color: var(--gold);
  border-color: var(--gold);
}
.wk-step-stack .wk-step-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.wk-step-stack .wk-step-btn:disabled { opacity: .3; cursor: default; }

.wk-score-pair {
  display: inline-flex;
  align-items: stretch;
  background: var(--gold);
  color: #fff;
  border-radius: 6px;
  overflow: hidden;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.wk-score-pair.is-empty { background: var(--bg-alt); color: var(--text-muted); }
/* Score komt momenteel uit de officiële uitslag (gebruiker heeft zelf nog
   niets ingevoerd); +/- blijft actief om te overrulen, 'wissen' herstelt. */
.wk-score-pair.is-official { background: var(--gold-dark); }
.wk-score-h, .wk-score-a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 6px 8px;
  font-size: 1.05rem;
}
.wk-score-sep {
  width: 1px;
  background: rgba(255,255,255,.45);
  margin: 4px 0;
}
.wk-score-pair.is-empty .wk-score-sep { background: var(--border); }

/* Meta-regel (zelf gebouwd uit losse settings: num/date/time/venue).
   De wis-knop is absoluut gepositioneerd zodat de fixture-row 3
   symmetrische kolommen heeft (home | score | away). text-align
   center valt dan automatisch op het score-blok. */
.wk-fixture-meta {
  font-size: .72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  text-align: center;
  margin-bottom: .2rem;
}
.wk-ko-num { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: .35rem; }
.wk-ko-date { /* legacy class — niet meer apart gerenderd */ }

/* Toggle + reset-knop op één lijn */
.wk-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: .5rem;
}

/* Alle drie knoppen in wk-controls krijgen ZELF deze stijl —
   onafhankelijk van .btn base-rule uit style.css om subtiele
   verschillen in hoogte/baseline te vermijden. */
.wk-controls .wk-reset-btn,
.wk-controls .wk-settings-btn,
.wk-controls .wk-print-btn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: 38px;
  box-sizing: border-box;
  background: transparent;
  border: 2px solid var(--gold);
  color: var(--gold);
  border-radius: 8px;
  width: 38px;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  white-space: nowrap;
}
.wk-controls .wk-reset-btn:hover,
.wk-controls .wk-settings-btn:hover,
.wk-controls .wk-print-btn:hover {
  background: var(--gold);
  color: #fff;
}
.wk-controls .wk-settings-btn svg,
.wk-controls .wk-print-btn svg { transition: transform .25s; }
.wk-controls .wk-settings-btn:hover svg { transform: rotate(45deg); }

/* Eigen bevestig-popup (i.p.v. browser-confirm) */
.wk-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
}
.wk-modal {
  background: var(--bg-alt, #fff);
  border-radius: 12px;
  padding: 1.6rem 1.5rem 1.25rem;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  text-align: center;
}
.wk-modal-msg {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 1.3rem;
}
.wk-modal-actions {
  display: flex;
  gap: .6rem;
  justify-content: center;
}
.wk-modal-btn {
  flex: 1;
  height: 42px;
  border-radius: 8px;
  border: 2px solid var(--gold);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.wk-modal-cancel { background: transparent; color: var(--gold); }
.wk-modal-cancel:hover { background: rgba(194,166,120,.12); }
.wk-modal-confirm { background: var(--gold); color: #fff; }
.wk-modal-confirm:hover { background: var(--gold-dark); }

/* Tekstlink naar het volledige speelschema */
.wk-schedule-link { text-align: center; margin: .9rem 0 0; }
.wk-schedule-link a { color: var(--gold); font-weight: 600; text-decoration: none; }
.wk-schedule-link a:hover { color: var(--gold-dark); }
#speelschema { scroll-margin-top: 60px; }

/* ===== Settings-knop + floating-menu ===== */

.wk-settings-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: 38px;
  vertical-align: middle;
}

.wk-settings-menu {
  position: absolute;
  top: calc(100% + .35rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  min-width: 220px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px var(--card-shadow);
  padding: .6rem .75rem;
  text-align: left;
  font-size: .9rem;
  color: var(--text);
}
.wk-set-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  cursor: pointer;
  user-select: none;
}
.wk-set-item input { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; }
.wk-set-sub {
  display: none;
  padding-left: 1.6rem;
  border-left: 2px solid var(--border-light);
  margin: .15rem 0 .3rem 0.55rem;
}
.wk-set-sub label {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem 0;
  cursor: pointer;
  font-size: .85rem;
  color: var(--text-body);
}
.wk-set-sub input { accent-color: var(--gold); width: 14px; height: 14px; cursor: pointer; }
body.wk-meta-time .wk-set-sub[data-sub="time"] { display: block; }

/* In het volledige speelschema staat het wedstrijdnummer ALTIJD aan
   (zie forceAll in renderSchedule), dus geen display-toggle meer nodig. */

/* ===== Vlaggen ===== */

.wk-flag {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 14px;
  vertical-align: -2px;
  margin-right: .35rem;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--bg-alt);
}
/* Vlag rechts van naam (thuisploeg in groep-fixtures) */
.wk-flag-right {
  margin-right: 0;
  margin-left: .35rem;
}

/* ===== +/- score-stepper ===== */

.wk-stepper {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px;
  user-select: none;
}
.wk-step-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wk-step-btn:hover:not(:disabled) { background: var(--bg-alt); color: var(--gold); }
.wk-step-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.wk-step-btn:disabled { opacity: .3; cursor: default; }

.wk-step-value {
  min-width: 1.6rem;
  padding: 0 .15rem;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.wk-stepper.is-empty .wk-step-value { color: var(--text-muted); font-weight: 400; }

/* Officiële uitslag — vaste tekst i.p.v. +/- */
.wk-locked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 .35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.wk-fixture.is-official .wk-fixture-home,
.wk-fixture.is-official .wk-fixture-away,
.wk-ko-match.is-official .wk-ko-team {
  font-weight: 700;
}
.wk-ko-pen-locked { font-weight: 600; }

/* ===== Standentabel ===== */

.wk-standings {
  margin-top: .85rem;
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.wk-standings th,
.wk-standings td {
  padding: .3rem .2rem;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
}
.wk-standings th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.wk-standings td.team {
  text-align: left;
  font-weight: 600;
}
.wk-standings td.pts { font-weight: 700; }

.wk-standings tr.qualified td  { background: rgba(194, 166, 120, .18); }
.wk-standings tr.maybe-third td { background: rgba(194, 166, 120, .08); }

/* ===== Beste nummers 3 ===== */

#wk-thirds {
  max-width: 760px;
  margin: 0 auto;
  background: var(--card-bg);
  box-shadow: 0 4px 15px var(--card-shadow);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 1rem;
}
#wk-thirds table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
#wk-thirds th, #wk-thirds td {
  padding: .45rem .3rem;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
}
#wk-thirds th { color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; }
#wk-thirds td.team { text-align: left; font-weight: 600; }
#wk-thirds tr.qualified td   { background: rgba(194, 166, 120, .18); }
#wk-thirds tr.eliminated td  { color: var(--text-muted); text-decoration: line-through; }
#wk-thirds .empty {
  text-align: center;
  color: var(--text-muted);
  padding: 1rem 0;
}

/* ===== Knockout-bracket (tree-stijl) ===== */

#wk-bracket { overflow-x: auto; padding-bottom: .5rem; }

.wk-bracket-tree {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.25rem;
  align-items: stretch;
  min-width: 2100px;
}
.wk-bt-side {
  display: flex;
  gap: 1.6rem; /* ruimte voor verbindingslijnen tussen rondes */
}
.wk-bt-side-right { flex-direction: row-reverse; }
.wk-bt-col {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
  gap: 1rem;
  min-width: 0;
}

/* Pair-wrapper: bevat twee aangrenzende kaartjes en draagt de
   verbindingslijnen naar hun gemeenschappelijke child-wedstrijd. */
.wk-bt-pair {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
  gap: .5rem;
  position: relative;
}

/* Verticale lijn die de twee kaartjes van een paar verbindt — uitspraak
   ligt op de helft tussen card-centra. */
.wk-bt-side-left  .wk-bt-pair::before,
.wk-bt-side-right .wk-bt-pair::before {
  content: '';
  position: absolute;
  top: 25%;
  bottom: 25%;
  width: 2px;
  background: var(--gold);
  opacity: .45;
  border-radius: 1px;
}
.wk-bt-side-left  .wk-bt-pair::before { right: -.7rem; }
.wk-bt-side-right .wk-bt-pair::before { left:  -.7rem; }

/* Horizontale 'arm' vanaf elk kaartje naar de verticale pair-lijn,
   plus de 'stem' vanaf het midden van de pair-lijn naar de
   volgende kolom. */
.wk-bt-side-left  .wk-bt-pair .wk-ko-match,
.wk-bt-side-right .wk-bt-pair .wk-ko-match {
  position: relative;
}
.wk-bt-side-left  .wk-bt-pair .wk-ko-match::after,
.wk-bt-side-right .wk-bt-pair .wk-ko-match::after {
  content: '';
  position: absolute;
  top: 50%;
  width: .7rem;
  height: 2px;
  background: var(--gold);
  opacity: .45;
}
.wk-bt-side-left  .wk-bt-pair .wk-ko-match::after { right: -.7rem; }
.wk-bt-side-right .wk-bt-pair .wk-ko-match::after { left:  -.7rem; }

/* Stem vanaf de pair-vertical naar het midden van de volgende kolom */
.wk-bt-side-left  .wk-bt-pair::after,
.wk-bt-side-right .wk-bt-pair::after {
  content: '';
  position: absolute;
  top: 50%;
  width: .7rem;
  height: 2px;
  background: var(--gold);
  opacity: .45;
  transform: translateY(-50%);
}
.wk-bt-side-left  .wk-bt-pair::after { right: -1.4rem; }
.wk-bt-side-right .wk-bt-pair::after { left:  -1.4rem; }
.wk-bt-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 220px;
  padding: 0 .5rem;
}
.wk-bt-label {
  font-family: var(--font-heading);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: .8rem;
  text-align: center;
}
.wk-bt-center .wk-ko-match {
  width: 100%;
  max-width: 240px;
}

/* Kaartjes binnen de tree-bracket — font matched aan groep-fixtures (.92rem) */
.wk-bracket-tree .wk-ko-match {
  font-size: .92rem;
  padding: .75rem .85rem;
  min-width: 230px;
}
/* Team-cel mag NIET afknippen — bracket toont volledige 3-letter code */
.wk-bracket-tree .wk-ko-team {
  overflow: visible;
}

/* 3-letter teamcode in bracket (FIFA-stijl) */
.wk-team-code {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Placeholder-tekst voor onbekende teams ("Winnaar wedstrijd 74") */
.wk-bracket-tree .wk-ko-team.placeholder {
  font-size: .7rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
}
.wk-bracket-tree .wk-ko-num   { font-size: .75rem; margin-bottom: .5rem; }
.wk-bracket-tree .wk-flag     { width: 22px; height: 15px; margin-right: .4rem; }
.wk-bracket-tree .wk-stepper  { padding: 1px; }
.wk-bracket-tree .wk-step-btn { width: 22px; height: 22px; font-size: .95rem; }
.wk-bracket-tree .wk-step-value { min-width: 1.3rem; font-size: 1rem; }
.wk-bracket-tree .wk-locked   {
  min-width: 26px; height: 24px;
  font-size: .95rem; padding: 0 .3rem;
}
.wk-bracket-tree .wk-ko-row   { gap: .5rem; padding: .15rem 0; }
.wk-bracket-tree .wk-ko-team  { font-weight: 600; }
.wk-bracket-tree .wk-ko-pen-radio { width: 14px; height: 14px; }

/* Mobiel: tree-layout valt terug op simpele vertikale stack */
@media (max-width: 900px) {
  .wk-bracket-tree {
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .wk-bt-side,
  .wk-bt-side-right {
    flex-direction: column;
    gap: .5rem;
  }
  .wk-bt-col { gap: .5rem; }
  .wk-bt-center { order: 99; min-width: 0; }
  /* Eén-koloms (verticale) bracket: tree-verbindingslijnen zijn zinloos
     en steken buiten de viewport → verbergen */
  .wk-bt-pair::before,
  .wk-bt-pair::after,
  .wk-bt-pair .wk-ko-match::after { display: none !important; }
}

.wk-ko-match {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: .55rem .6rem;
  box-shadow: 0 2px 6px var(--card-shadow);
  font-size: .88rem;
}
.wk-ko-num {
  font-size: .68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: .35rem;
}
.wk-ko-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .5rem;
  padding: .25rem 0;
}
.wk-ko-row + .wk-ko-row {
  border-top: 1px dashed var(--border-light);
}
.wk-ko-team {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-ko-team.placeholder { color: var(--text-muted); font-style: italic; }
.wk-ko-team.winner { font-weight: 700; color: var(--gold); }
.wk-ko-team.loser  { color: var(--text-muted); }

/* Inline strafschoppen-radio achter de score */
.wk-ko-pen-radio {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
  margin: 0;
}
.wk-ko-pen-radio:disabled {
  opacity: .15;
  cursor: default;
}

.wk-ko-match .wk-stepper { flex: 0 0 auto; }
.wk-ko-match .wk-step-btn { width: 24px; height: 24px; font-size: 1rem; }
.wk-ko-match .wk-step-value { min-width: 1.4rem; }

@media (max-width: 768px) {
  #wk-bracket {
    overflow-x: visible;
  }
}

/* ===== Volledig speelschema (chronologische lijst) ===== */

.wk-schedule {
  max-width: 900px;
  margin: 0 auto;
  font-size: .9rem;
  display: grid;
  grid-template-columns:
    2.6rem                     /* num — altijd zichtbaar in het schema */
    minmax(0, 15rem)           /* meta — datum · tijd · stad */
    minmax(7rem, 1fr)          /* home */
    4.2rem                     /* score (fixed) */
    minmax(7rem, 1fr);         /* away */
  column-gap: .55rem;
  /* Cellen tot rij-hoogte rekken, zodat hun border-bottom altijd op de
     onderkant van de rij valt (anders bv. bij wrappende speelstad een
     onderbroken streep tussen wedstrijden). Inhoud blijft per cel
     verticaal gecentreerd via eigen flex (zie .wk-sch-num/home/away/score). */
  align-items: stretch;
}
/* Op desktop zijn rij + beide regel-wrappers transparant (display:contents),
   zodat de 5 cellen directe grid-items van .wk-schedule blijven en netjes
   in kolommen uitlijnen. Op mobiel worden de regels echte (gecentreerde)
   flex-rijen — zie de @media-block. */
.wk-sch-row,
.wk-sch-line {
  display: contents;
}
.wk-sch-line > * {
  padding: .55rem 0;
  border-bottom: 1px solid var(--border-light);
  box-sizing: border-box;
}
.wk-sch-row:last-child .wk-sch-line > * { border-bottom: none; }
.wk-sch-num {
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  white-space: nowrap;
  /* Cel strekt tot rij-hoogte (lijnen blijven heel); tekst staat top
     uitgelijnd zodat 'ie op één lijn ligt met het TV-icoon op de eerste
     meta-regel, ook als de speelstad naar een tweede regel wrapt. */
  display: flex;
  align-items: flex-start;
}
.wk-sch-meta {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.25;
  /* hangende inspring t.b.v. het tv-icoon: doorlopende regels (lange
     speelsteden) lijnen uit met de datum i.p.v. onder het icoon.
     padding-left > text-indent geeft tevens wat lucht tussen de
     wedstrijdnummer-kolom en het tv-icoon. */
  padding-left: 2.5rem;
  text-indent: -1.3rem;
}
/* Tv-icoon bij wedstrijden die we uitzenden — vaste-breedte plek (ook leeg)
   zodat de datum in elke rij op dezelfde positie begint */
.wk-tv { display: inline-block; width: 1.3rem; color: #ec6608; }
/* SVG verticaal centreren met de tekst (Quicksand-metrieken laten -3px te
   hoog uitvallen t.o.v. het wedstrijdnummer). */
.wk-tv svg { vertical-align: middle; }

/* Nederland oranje uitlichten in de wedstrijden (alleen NL-pagina) */
.wk-team-nl {
  background: #ec6608;
  color: #fff;
  padding: .05em .45em;
  border-radius: 4px;
  font-weight: 700;
}
.wk-sch-home {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  text-align: right;
  min-width: 0;
}
/* Vlag rechts naast naam (mirror) — al gerenderd via teamLabelMirror */
.wk-sch-home .wk-flag { margin-right: 0; margin-left: .35rem; }
.wk-sch-away {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
}
.wk-sch-score {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: .15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  justify-content: center;
  padding: .15rem .45rem;
  background: var(--bg-alt);
  border-radius: 4px;
  /* score-cel is GEEN normale flex/block — padding bovenstaand
     vervangt de standaard .55rem 0 zodat de pill compact blijft */
}
.wk-sch-line > .wk-sch-score {
  padding: .15rem .45rem;
}
/* Home/away cijfers vaste breedte zodat het streepje in alle rijen
   op exact dezelfde positie staat → dashes verticaal uitgelijnd */
.wk-sch-sh,
.wk-sch-sa { display: inline-block; min-width: 1.2em; }
.wk-sch-sh { text-align: right; }
.wk-sch-sa { text-align: left; }
.wk-sch-dash { color: var(--text-muted); font-weight: 400; }
.wk-sch-placeholder {
  font-size: .8rem;
  font-style: italic;
  color: var(--text-muted);
}
.wk-sch-row.is-ko .wk-sch-num { color: var(--gold); }

@media (max-width: 700px) {
  /* Mobiel: twee gecentreerde regels per wedstrijd. De regel-wrappers
     worden echte flex-rijen (i.p.v. display:contents). */
  .wk-schedule { display: block; }
  .wk-sch-row {
    display: block;
    padding: .55rem .25rem;
    border-bottom: 1px solid var(--border-light);
  }
  .wk-sch-row:last-child { border-bottom: none; }
  .wk-sch-line > * { padding: 0; border: none; background: transparent; box-sizing: border-box; }
  /* Meta-regel: gecentreerd (nummer + tv + datum) */
  .wk-sch-line-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .15rem .4rem;
  }
  /* Wedstrijd-regel: grid met het streepje altijd in het midden
     (thuis rechts, score gecentreerd, uit links) → streepjes lijnen
     verticaal uit ongeacht de naamlengtes */
  .wk-sch-line-match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .5rem;
    margin-top: .2rem;
  }
  /* num inline vóór de gecentreerde meta; hangende inspring uit */
  .wk-sch-num  { overflow: visible; }
  .wk-sch-meta { padding-left: 0; text-indent: 0; text-align: center; }
  /* lege tv-plek niet meenemen zodat de meta echt centreert; bij een tv
     gelijke ruimte links (flex-gap) en rechts (marge) van het icoon */
  .wk-tv { width: auto; margin-right: .4rem; }
  .wk-tv:empty { display: none; }
  .wk-sch-score { padding: .15rem .35rem; background: var(--bg-alt); justify-self: center; }
}

/* ===== Champion-banner (boven bracket bij ingevulde finale) ===== */
.wk-champion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 auto 1.5rem;
  max-width: 540px;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  color: var(--always-white);
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,.15);
  text-align: center;
}
.wk-champion-icon { font-size: 2.2rem; line-height: 1; }
.wk-champion-text { display: flex; flex-direction: column; gap: .1rem; }
.wk-champion-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: .9;
}
.wk-champion-team {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.wk-champion-team .wk-flag {
  width: 28px;
  height: 20px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.4);
}

/* ===== Today-badge en row-highlight ===== */
.wk-today-badge {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: .4rem;
  vertical-align: 1px;
  text-transform: uppercase;
}
.wk-fixture.is-today { background: linear-gradient(180deg, rgba(194,166,120,.10), transparent); border-left: 3px solid var(--gold); padding-left: .35rem; }
.wk-ko-match.is-today { border-color: var(--gold); box-shadow: 0 2px 8px rgba(194,166,120,.25); }
.wk-sch-row.is-today .wk-sch-line > * { background: rgba(194,166,120,.08); }
/* score-pill heeft eigen achtergrond — die wint van is-today */
.wk-sch-row.is-today .wk-sch-line > .wk-sch-score { background: var(--bg-alt); }
@media (max-width: 700px) {
  /* Op mobiel zet de background op de rij zelf (regels zijn flex) */
  .wk-sch-row.is-today { background: rgba(194,166,120,.08); }
  .wk-sch-row.is-today .wk-sch-line > * { background: transparent; }
  .wk-sch-row.is-today .wk-sch-score { background: var(--bg-alt); }
}

/* Subtiele hover-state op stand-rij om tooltip-aanwezigheid te suggereren */
.wk-standings tbody tr[title] { cursor: help; }

/* ===== CTA-noot onderaan ('ook op jouw website?') ===== */
.wk-cta-note {
  margin: 2rem auto 0;
  max-width: 720px;
  text-align: center;
  font-size: .9rem;
  color: var(--text-muted);
  font-style: italic;
}
.wk-cta-note a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wk-cta-note a:hover { color: var(--gold-dark); }

/* ===== Print stylesheet ===== */
@media print {
  /* @page voor A4 met 1cm marges */
  @page { size: A4; margin: 1cm; }

  /* Verberg site-chrome, interactieve elementen, hero/intro,
     CTA en beste-3 (info zit in groepsstanden). */
  .top-bar, .navbar, .footer, .desktop-bottom-bar, .mobile-bottom-bar,
  .wk-hero, .wk-controls, .wk-fixture-clear, .wk-fixture-spacer, .wk-step-btn,
  .wk-ko-pen-radio, .theme-toggle, .nav-offerte, .hamburger,
  .wk-cta-note, .wk-intro, .wk-bracket-intro, .wk-thirds-intro,
  .wk-footnote, .wk-stepper, .wk-step-stack {
    display: none !important;
  }
  /* Met spacer+clear weg keren we terug naar 3 symmetrische cols */
  .wk-fixture-row { grid-template-columns: 1fr auto 1fr !important; }
  /* Beste-3 sectie verbergen: info zit in groepsstanden */
  #wk-thirds, #wk-thirds + p { display: none !important; }
  body { background: #fff !important; color: #000 !important; font-size: 10pt; }
  section { padding: 0 !important; }
  .container { width: 100% !important; max-width: none !important; padding: 0 !important; }

  /* Sectie-titels klein + zwart */
  .wk-section-title {
    color: #000 !important;
    font-size: 12pt !important;
    margin: 0 0 .5rem 0 !important;
    text-align: left !important;
  }

  /* ===== PAGINA 1: groepsfase ===== */
  /* 4 kolommen groep-cards zodat 12 groepen ruim op één A4 passen */
  .wk-groups-grid { grid-template-columns: repeat(4, 1fr) !important; gap: .35rem !important; }
  .wk-group-card { box-shadow: none !important; border: 1px solid #999 !important; padding: .35rem .4rem !important; break-inside: avoid; }
  .wk-group-card h3 { font-size: 9pt !important; margin: 0 0 .2rem 0 !important; color: #000 !important; }
  .wk-fixture { padding: .15rem 0 !important; font-size: 7.5pt !important; border-color: #ddd !important; }
  .wk-fixture-meta { display: none !important; }
  .wk-score-pair { background: transparent !important; color: #000 !important; box-shadow: none !important; border: 1px solid #888; min-width: 38px !important; }
  .wk-score-h, .wk-score-a { padding: 1px 4px !important; min-width: 14px !important; font-size: 8pt !important; }
  .wk-score-sep { background: #888 !important; margin: 2px 0 !important; }
  .wk-standings { margin-top: .25rem !important; font-size: 7pt !important; }
  .wk-standings th, .wk-standings td { padding: 1px 2px !important; }
  .wk-flag { width: 12px !important; height: 8px !important; margin-right: .2rem !important; box-shadow: 0 0 0 1px #888 !important; }

  /* ===== PAGINA 2: knockout-fase ===== */
  .wk-section-title.gold + #wk-champion ~ #wk-bracket,
  section:has(#wk-bracket) { page-break-before: always; }
  #wk-bracket { overflow: visible !important; }
  .wk-bracket-tree { min-width: 0 !important; gap: .25rem !important; }
  .wk-bt-side { gap: .25rem !important; }
  .wk-bt-center { min-width: 0 !important; padding: 0 .25rem !important; }
  .wk-bt-col { gap: .25rem !important; }
  .wk-ko-match,
  .wk-bracket-tree .wk-ko-match {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    padding: .15rem .25rem !important;
    font-size: 7pt !important;
    min-width: 60px !important;
    break-inside: avoid;
  }
  .wk-ko-num { font-size: 6pt !important; margin-bottom: .15rem !important; }
  .wk-ko-team { font-weight: 500 !important; }
  .wk-locked { background: transparent !important; color: #000 !important; border: 1px solid #888 !important; min-width: 14px !important; height: 14px !important; font-size: 7pt !important; padding: 0 2px !important; }
  /* Bracket-verbindingslijnen niet printen — print donker */
  .wk-bt-pair::before, .wk-bt-pair::after, .wk-bt-pair .wk-ko-match::after {
    background: #999 !important; opacity: .6 !important;
  }
  /* Champion-banner subtieler */
  .wk-champion {
    background: transparent !important; color: #000 !important;
    border: 2px solid #999 !important; box-shadow: none !important;
    padding: .35rem .75rem !important; gap: .35rem !important;
    margin: 0 auto 1rem !important; max-width: 380px !important;
  }
  .wk-champion-icon { font-size: 1.4rem !important; }
  .wk-champion-team { color: #000 !important; font-size: 1.1rem !important; }

  /* ===== PAGINA 3+: volledig speelschema ===== */
  /* Mag over twee pagina's lopen, page-break-before zodat het na de bracket begint */
  section:has(#wk-full-schedule) { page-break-before: always; }
  .wk-schedule {
    font-size: 8.5pt;
    max-width: none !important;
    grid-template-columns: 2.4rem minmax(0, 9rem) minmax(6rem, 1fr) 3.4rem minmax(6rem, 1fr) !important;
    column-gap: .4rem !important;
  }
  .wk-sch-line > * { padding: 2px 0 !important; }
  body:not(.wk-meta-num) .wk-sch-num { display: inline-flex !important; } /* op print altijd zichtbaar */
  .wk-sch-num { font-size: 7pt !important; }
  .wk-sch-meta { font-size: 7pt !important; }
  .wk-sch-score { background: transparent !important; border: 1px solid #888; padding: 1px 4px !important; min-width: 2rem !important; }

  /* Today-badge subtieler */
  .wk-today-badge { background: #000 !important; color: #fff !important; }
}

/* ===== KO-bracket: brede container + zoom-controls ===== */

/* Op groot scherm mag de KO-sectie het hele scherm gebruiken
   (de groep-cards en het schema blijven binnen de standaard
   container-breedte). */
@media (min-width: 1100px) {
  .wk-bracket-section .container {
    max-width: none;
    width: calc(100% - 2rem);
  }
}

.wk-bracket-zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  margin: 0 0 .75rem 0;
  font-size: .85rem;
  color: var(--text-body);
}
.wk-zoom-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.wk-zoom-btn:hover:not(:disabled) {
  background: var(--bg-alt);
  color: var(--gold);
  border-color: var(--gold);
}
.wk-zoom-btn:disabled { opacity: .35; cursor: default; }
.wk-zoom-level {
  display: inline-block;
  min-width: 3.2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
.wk-zoom-reset { font-size: 1rem; }

@media print { .wk-bracket-zoom { display: none !important; } }

/* ===== Responsiveness — verfijning voor smalle schermen ===== */

/* Tablet / kleine desktop (≤900px): bracket-tree stackt al verticaal
   via eerdere media query; we voegen daar de zoom-controls + wat extra
   ademruimte aan toe. */
@media (max-width: 900px) {
  .wk-bracket-zoom { font-size: .8rem; gap: .25rem; }
  .wk-bracket-zoom .wk-zoom-btn { width: 28px; height: 28px; font-size: 1rem; }
  .wk-zoom-level { min-width: 2.6rem; font-size: .8rem; }
}

/* Smartphone (≤640px) — compact maar leesbaar */
@media (max-width: 640px) {
  /* Hero: kleinere koppen, geen overflow */
  .wk-hero { min-height: 200px; height: auto; padding: 1.25rem 0; }
  .wk-hero h1 { font-size: 1.2rem; }
  .wk-hero p  { font-size: .9rem; padding: 0 1rem; }

  /* Intro-tekst beknopter */
  .wk-intro p { font-size: .95rem; }

  /* Controls (Instellingen/Printen/Alles wissen) — knoppen blijven
     volledig maar gap verkleinen zodat ze beter passen */
  .wk-controls { gap: .5rem; }
  .wk-controls .wk-reset-btn,
  .wk-controls .wk-settings-btn {
    height: 36px;
    width: 36px;
    padding: 0;
    font-size: .8rem;
  }
  .wk-settings-wrap { height: 36px; }

  /* Settings-menu mag de viewport niet overschrijden */
  .wk-settings-menu {
    min-width: 200px;
    max-width: calc(100vw - 2rem);
  }

  /* Sectie-titels iets kleiner */
  .wk-section-title { font-size: 1.6rem; }

  /* Groep-cards: compactere padding */
  .wk-group-card { padding: .75rem .65rem 1rem; }
  .wk-group-card h3 { font-size: 1.1rem; }

  /* Fixture-row: verticaal stacken op mobiel zodat lange teamnamen
     volledig zichtbaar blijven. Wis-knop absoluut rechtsboven. */
  .wk-fixture { position: relative; padding: .65rem 0; }
  .wk-fixture-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
  }
  .wk-fixture-spacer { display: none; }
  .wk-fixture-home,
  .wk-fixture-away {
    text-align: center;
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: .95rem;
    font-weight: 500;
  }
  .wk-fixture-clear {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
  }

  /* Steppers grotere tap-targets en grotere score-cijfers */
  .wk-step-stack .wk-step-btn { width: 26px; height: 26px; }
  .wk-score-h, .wk-score-a { padding: 6px 10px; min-width: 32px; font-size: 1.1rem; }

  /* Meta-regel iets ruimer als 'ie aanstaat */
  .wk-fixture-meta { margin-bottom: .35rem; }

  /* Standingstabel binnen card: kleiner font, compacter */
  .wk-standings { font-size: .72rem; }
  .wk-standings th, .wk-standings td { padding: .2rem .15rem; }
  .wk-standings td.team .wk-flag { width: 16px; height: 11px; margin-right: .25rem; }

  /* Beste-3 tabel: kleiner */
  #wk-thirds table { font-size: .75rem; }
  #wk-thirds th, #wk-thirds td { padding: .25rem .2rem; }

  /* Champion-banner kleiner */
  .wk-champion { padding: .65rem .85rem; gap: .5rem; max-width: calc(100% - 2rem); }
  .wk-champion-icon { font-size: 1.6rem; }
  .wk-champion-label { font-size: .7rem; }
  .wk-champion-team { font-size: 1.15rem; }
  .wk-champion-team .wk-flag { width: 22px; height: 15px; }

  /* CTA-noot */
  .wk-cta-note { font-size: .82rem; padding: 0 1rem; }
}

/* Extra-klein (≤380px) — alleen waar het echt knelt */
@media (max-width: 380px) {
  .wk-controls .wk-reset-btn,
  .wk-controls .wk-settings-btn,
  .wk-controls .wk-print-btn {
    padding: 0 .6rem;
    font-size: .75rem;
  }
  .wk-controls .wk-settings-btn span,
  .wk-controls .wk-print-btn span { display: none; } /* alleen icoon op zeer smal */
  /* NL-pill compacter + kleinere schema-tekst zodat 'Nederland' in de
     smalle schema-cellen past op zeer smalle schermen */
  .wk-team-nl { padding: .05em .25em; }
  .wk-schedule { font-size: .74rem; }
}

/* ===== Manta hero responsive fix (img-based page-hero) ===== */
@media (max-width: 700px) {
  .wk-hero { height: auto; min-height: 300px; padding: 2.5rem 0; }
  .wk-hero .hero-content { transform: none; }
}