/*
 * De onderdelen die op meerdere pagina's terugkomen: balk, menu, knoppen, de
 * lopende band, kaarten, tabellen, prijskaarten, vragen en de voet.
 */

/* --- de balk bovenaan ---------------------------------------------------- */

.balk {
  position: sticky;
  top: 0;
  z-index: var(--laag-nav);
  background: rgb(15 23 42 / 88%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lijn);
}

.balk-binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r4);
  min-height: 4.25rem;
}

/*
 * Geen gap hier, maar een marge op het icoon. In een flexcontainer wordt losse
 * tekst een eigen anoniem item, dus een gap komt óók tussen "darttoernooi" en
 * <b>.app</b> te staan — en dan leest het merk als twee woorden.
 */
.merk {
  display: inline-flex;
  align-items: center;
  font-family: var(--kop);
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wit);
  white-space: nowrap;
}

.merk svg {
  width: 26px;
  height: 26px;
  margin-right: var(--r2);
  flex: none;
}

.merk b {
  color: var(--oranje-fel);
  font-weight: inherit;
}

.wegwijzer {
  display: flex;
  align-items: center;
  gap: var(--r1);
}

.wegwijzer a {
  padding: var(--r2) var(--r3);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--zacht);
  border-radius: var(--rond);
  transition: color var(--snel) ease;
  white-space: nowrap;
}

.wegwijzer a:hover {
  color: var(--wit);
}

/* De huidige pagina krijgt een streep, niet alleen een kleur. */
.wegwijzer a[aria-current='page'] {
  color: var(--wit);
  box-shadow: inset 0 -3px 0 var(--oranje);
}

.balk-knoppen {
  display: flex;
  align-items: center;
  gap: var(--r2);
}

/* --- taalwisselaar ------------------------------------------------------- */

/*
 * Drie letterparen naast elkaar. Bewust geen uitklapmenu: bij drie talen is een
 * lijst die opengaat meer werk dan de keuze zelf. De huidige taal blijft klikbaar
 * en gemarkeerd, zodat de wisselaar er op elke taal hetzelfde uitziet.
 */
.talen {
  display: flex;
  align-items: center;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  overflow: hidden;
}

.talen a {
  padding: var(--r2) var(--r3);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--grijs);
  /* 44px is de ondergrens voor een aanraakdoel; deze wisselaar blijft ook op
     een telefoon zichtbaar, anders dan de rest van de balk. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition:
    color var(--snel) ease,
    background-color var(--snel) ease;
}

.talen a + a {
  border-left: 1px solid var(--lijn);
}

.talen a:hover {
  color: var(--wit);
  background: var(--ink-kaart);
}

.talen a[aria-current='true'] {
  color: var(--oranje-tekst);
  background: var(--oranje);
}

.menu-talen {
  margin-top: var(--r8);
}

.menu-talen .talen a {
  min-height: 48px;
  padding-inline: var(--r6);
  font-size: 1rem;
}

.voet-onder .talen {
  border-color: var(--lijn);
}

.menuknop {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--lijn-fel);
  border-radius: var(--rond);
  color: var(--wit);
  cursor: pointer;
}

.menuknop svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 1000px) {
  .wegwijzer,
  .balk-knoppen .knop {
    display: none;
  }

  .menuknop {
    display: inline-flex;
  }
}

/* --- het uitklapmenu op een telefoon ------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--laag-menu);
  background: var(--ink);
  padding: var(--r6) 0 var(--r12);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.menu[hidden] {
  display: none;
}

.menu-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--r8);
}

.menu nav {
  display: flex;
  flex-direction: column;
}

.menu nav a {
  font-family: var(--kop);
  font-size: clamp(1.5rem, 7vw, 2.25rem);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wit);
  padding: var(--r3) 0;
  border-bottom: 1px solid var(--lijn);
}

.menu nav a[aria-current='page'] {
  color: var(--oranje-fel);
}

.menu .knop {
  margin-top: var(--r8);
  align-self: flex-start;
}

/* --- knoppen ------------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--r2);
  min-height: 48px;
  padding: var(--r3) var(--r6);
  font-family: var(--tekst);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--rond);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--snel) ease,
    border-color var(--snel) ease,
    color var(--snel) ease;
}

/* Groen is de kleur van het product; elke echte actie draagt hem. */
.knop--hoofd {
  background: var(--groen);
  border-color: var(--groen);
  color: var(--groen-tekst);
}

.knop--hoofd:hover {
  background: #45c65a;
  border-color: #45c65a;
}

.knop--rand {
  background: transparent;
  border-color: var(--lijn-fel);
  color: var(--wit);
}

.knop--rand:hover {
  border-color: var(--oranje);
  color: var(--oranje-fel);
}

.knop--klein {
  min-height: 42px;
  padding: var(--r2) var(--r4);
  font-size: 0.9375rem;
}

.knoppenrij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r3);
  margin-top: var(--r8);
}

/* --- de lopende band ----------------------------------------------------- */

/*
 * Het rumoer van de zaal, in één streep. De uitslagen zijn echt en komen uit
 * toernooi.json. Het is herhaling ter versiering, dus voor een schermlezer is er
 * niets te halen: aria-hidden. Wie beweging heeft uitgezet krijgt de band stil,
 * met de eerste helft gewoon leesbaar.
 */
.band {
  --tempo: 46s;
  position: relative;
  display: flex;
  overflow: hidden;
  border-block: 1px solid var(--lijn);
  background: var(--ink-diep);
  padding-block: var(--r3);
  user-select: none;
  /* JavaScript vult deze band pas na het laden. Zonder gereserveerde hoogte
     verspringt alles eronder zodra hij vult — en hij staat hoog op de pagina. */
  min-height: 3rem;
}

.band-spoor {
  display: flex;
  align-items: center;
  gap: var(--r8);
  padding-right: var(--r8);
  flex: none;
  min-width: 100%;
  animation: schuif var(--tempo) linear infinite;
}

.band:hover .band-spoor {
  animation-play-state: paused;
}

.band-item {
  display: inline-flex;
  align-items: center;
  gap: var(--r3);
  font-family: var(--kop);
  font-size: 0.9375rem;
  text-transform: uppercase;
  color: var(--zacht);
  white-space: nowrap;
}

.band-item::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--oranje);
  transform: rotate(45deg);
  flex: none;
}

.band-item b {
  color: var(--wit);
  font-weight: inherit;
}

.band-item .uitslag {
  color: var(--oranje-fel);
  font-variant-numeric: tabular-nums;
}

@keyframes schuif {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .band-spoor {
    animation: none;
  }
}

/* --- kaarten ------------------------------------------------------------- */

.rooster {
  display: grid;
  gap: var(--r6);
}

.rooster--2 {
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.rooster--3 {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.kaart {
  background: var(--ink-kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-groot);
  padding: var(--r6);
}

.kaart h3 {
  margin-bottom: var(--r3);
}

.kaart p {
  color: var(--zacht);
}

.kaart-teken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--r4);
  border-radius: var(--rond);
  background: rgb(234 88 12 / 14%);
  color: var(--oranje-fel);
}

.kaart-teken svg {
  width: 24px;
  height: 24px;
}

/* --- genummerde stappen --------------------------------------------------- */

/*
 * Nummers alleen hier: een dartavond ís een volgorde. Namen invoeren gaat vóór
 * poules maken, en de finale komt na de halve. Elders op de site zijn de blokken
 * gelijkwaardig en staat er dus geen nummer bij.
 */
/*
 * De stappen krijgen een eigen, smallere breedte. De tekst erin is toch al op
 * leesbare regellengte begrensd, en zonder deze grens lopen de scheidingslijnen
 * door tot de volle 1200 px terwijl de tekst halverwege ophoudt — dat leest als
 * een kolom die vergeten is.
 */
.stappen {
  max-width: 54rem;
}

.stap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--r6);
  padding-block: var(--r8);
  border-top: 1px solid var(--lijn);
}

.stap:last-child {
  border-bottom: 1px solid var(--lijn);
}

.stap-nummer {
  font-family: var(--kop);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 0.9;
  color: var(--oranje);
  font-variant-numeric: tabular-nums;
}

.stap h3 {
  margin-bottom: var(--r3);
}

.stap p {
  color: var(--zacht);
  max-width: 60ch;
}

.stap p + p {
  margin-top: var(--r3);
}

.stap-detail {
  margin-top: var(--r4);
  padding: var(--r3) var(--r4);
  border-left: 3px solid var(--groen);
  background: rgb(55 176 74 / 8%);
  font-size: 0.9375rem;
  color: var(--zacht);
}

@media (max-width: 640px) {
  .stap {
    grid-template-columns: 1fr;
    gap: var(--r3);
  }
}

/* --- grote getallen ------------------------------------------------------- */

.getallen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--r8) var(--r6);
}

.getal .waarde {
  display: block;
  font-family: var(--kop);
  font-size: clamp(2.75rem, 6.5vw, 4.5rem);
  line-height: 0.9;
  color: var(--wit);
  font-variant-numeric: tabular-nums;
}

/* De eenheid achter een getal: kleiner en in de accentkleur, zodat "5 min" één
   ding blijft in plaats van twee even zware woorden. */
.getal .waarde em {
  font-style: normal;
  font-size: 0.42em;
  margin-left: 0.18em;
  color: var(--oranje);
}

.getal .wat {
  display: block;
  margin-top: var(--r3);
  font-size: 0.9375rem;
  color: var(--grijs);
  max-width: 22ch;
}

/* --- vragen --------------------------------------------------------------- */

.vraag {
  border-bottom: 1px solid var(--lijn);
}

.vraag summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r4);
  padding: var(--r6) 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.0625rem;
  list-style: none;
}

.vraag summary::-webkit-details-marker {
  display: none;
}

/*
 * De vraag zit in een <h3> binnen de <summary>. Dat is puur voor de
 * documentstructuur — zoekmachines en schermlezers zien de vragen zo als
 * koppen — en mag visueel niets veranderen. Vandaar dat hij zijn kopopmaak
 * hier weer inlevert.
 */
.vraag summary h3 {
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  margin: 0;
}

.vraag summary::after {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--oranje);
  border-bottom: 2px solid var(--oranje);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--normaal) var(--boog);
}

.vraag[open] summary::after {
  transform: rotate(-135deg) translate(-4px, -4px);
}

.vraag-tekst {
  padding-bottom: var(--r6);
  color: var(--zacht);
  max-width: 68ch;
}

.vraag-tekst p + p {
  margin-top: var(--r3);
}

/* --- prijskaarten --------------------------------------------------------- */

.prijzen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--r4);
  align-items: start;
}

.prijskaart {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ink-kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-groot);
  padding: var(--r6);
}

/* Eén pakket is de aanbeveling; die krijgt de rand en de rest niet. */
.prijskaart--uitgelicht {
  border-color: var(--groen);
  box-shadow: 0 0 0 1px var(--groen);
}

.prijskaart-merk {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--r4);
  padding: 0.15em 0.6em;
  border-radius: var(--rond);
  background: var(--groen);
  color: var(--groen-tekst);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.prijskaart h3 {
  font-size: 1.125rem;
  margin-bottom: var(--r2);
}

.prijskaart .bedrag {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-block: var(--r4);
  font-family: var(--kop);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.prijskaart .bedrag span {
  font-family: var(--tekst);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--grijs);
  text-transform: none;
}

.prijskaart .waarvoor {
  color: var(--zacht);
  font-size: 0.9375rem;
  min-height: 3rem;
}

.lijstje {
  list-style: none;
  margin: var(--r6) 0 var(--r6);
  padding: 0;
  display: grid;
  gap: var(--r3);
  font-size: 0.9375rem;
  color: var(--zacht);
}

.lijstje li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--r3);
  align-items: start;
}

.lijstje svg {
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
  flex: none;
  color: var(--groen);
}

.lijstje li[data-uit] {
  color: var(--grijs);
}

.lijstje li[data-uit] svg {
  color: var(--grijs);
}

.prijskaart .knop {
  margin-top: auto;
  width: 100%;
}

/* --- tabel ---------------------------------------------------------------- */

.tabelhouder {
  overflow-x: auto;
  border: 1px solid var(--lijn);
  border-radius: var(--rond-groot);
}

.vergelijking {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 40rem;
}

.vergelijking th,
.vergelijking td {
  padding: var(--r3) var(--r4);
  text-align: center;
  border-bottom: 1px solid var(--lijn);
}

.vergelijking thead th {
  background: var(--ink-diep);
  font-family: var(--kop);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wit);
}

.vergelijking th[scope='row'] {
  text-align: left;
  font-weight: 500;
  color: var(--zacht);
}

.vergelijking tbody tr:last-child th,
.vergelijking tbody tr:last-child td {
  border-bottom: 0;
}

.ja {
  color: var(--groen);
  font-weight: 700;
}

.nee {
  color: var(--grijs);
}

/* --- wachtlijst ----------------------------------------------------------- */

.aanmelding {
  background: var(--ink-kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-groot);
  padding: clamp(var(--r6), 4vw, var(--r12));
}

.formulier {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r3);
  margin-top: var(--r8);
}

.formulier input {
  flex: 1 1 18rem;
  min-height: 52px;
  padding: var(--r3) var(--r4);
  font: inherit;
  color: var(--wit);
  background: var(--ink-diep);
  border: 2px solid var(--lijn-fel);
  border-radius: var(--rond);
}

.formulier input::placeholder {
  color: var(--grijs);
}

.formulier input:focus-visible {
  border-color: var(--groen);
  outline: none;
}

.formulier .knop {
  min-height: 52px;
}

/* Het honeypot-veld: uit beeld, niet uit het document. */
.lokaas {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.melding {
  margin-top: var(--r4);
  min-height: 1.5em;
  font-size: 0.9375rem;
}

.melding[data-soort='fout'] {
  color: var(--amber);
}

.melding[data-soort='goed'] {
  color: var(--groen);
}

/* --- voet ----------------------------------------------------------------- */

.voet {
  border-top: 1px solid var(--lijn);
  background: var(--ink-diep);
  padding-block: var(--r12) var(--r8);
}

.voet-rooster {
  display: grid;
  grid-template-columns: minmax(14rem, 1.5fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--r8);
}
/*
 * De voet had vier kolommen met een harde ondergrens — 14rem plus drie keer
 * 9rem — en die passen bij elkaar niet in de breedte van een telefoon. Het
 * gevolg was een horizontale scrollbalk op élke pagina, veroorzaakt door het
 * onderste blok, de plek waar je hem het laatst zoekt. Onder elkaar dus.
 *
 * Deze regel staat met opzet ná de regel hierboven en niet bij de andere
 * mediaregels verderop: de specificiteit is gelijk, dus de volgorde in het
 * bestand beslist. Andersom verliest hij zonder dat er iets over klaagt.
 */
@media (max-width: 640px) {
  .voet-rooster {
    grid-template-columns: 1fr;
    gap: var(--r6);
  }
}

.voet h3 {
  font-family: var(--tekst);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grijs);
  margin-bottom: var(--r4);
}

.voet ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--r3);
}

.voet a {
  color: var(--zacht);
  text-decoration: none;
  font-size: 0.9375rem;
}

.voet a:hover {
  color: var(--wit);
}

.voet-onder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r3) var(--r8);
  justify-content: space-between;
  margin-top: var(--r12);
  padding-top: var(--r6);
  border-top: 1px solid var(--lijn);
  font-size: 0.875rem;
  color: var(--grijs);
}
/* --- uitslagtabellen ------------------------------------------------------ */
/*
 * De poulestanden en het knock-outschema staan als echte tabel in de HTML en
 * niet alleen in de beamerdemo. Zie site/tabellen.mjs voor het waarom: de
 * crawlers van de taalmodellen tekenen geen JavaScript.
 */
.tabelrooster {
  display: grid;
  /*
   * 28rem en niet 20rem: bij 20 paste er op een breed scherm een derde kolom
   * bij, en dan werd elke tabel zo smal dat je in alle vier apart moest
   * scrollen om de puntenkolom te zien. Twee naast elkaar past precies.
   */
  /*
   * De min() is niet optioneel: zonder hem is 28rem een harde ondergrens en
   * duwt het rooster op een telefoon de hele pagina 78px breder. De tabel mag
   * scrollen, de pagina niet.
   */
  grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
  gap: var(--r6);
  margin-top: var(--r8);
}
.uitslagtabel {
  /* Smaller dan de vergelijkingstabel: zes korte kolommen in plaats van vijf brede. */
  min-width: 22rem;
  font-variant-numeric: tabular-nums;
}
/*
 * Krappere kolommen dan de vergelijkingstabel. Met de ruime padding paste een
 * poule van vier tabellen naast elkaar net niet, en dan moest de lezer in elk
 * van de vier apart scrollen om de punten te zien — de enige kolom die telt.
 * De kolomnamen blijven voluit staan: "Legssaldo" is voor een tekstextractor
 * bruikbaar en "+/−" niet.
 */
.uitslagtabel th,
.uitslagtabel td {
  padding: var(--r3) var(--r2);
}
.uitslagtabel thead th {
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}
.uitslagtabel caption {
  padding: var(--r4) var(--r4) var(--r3);
  font-family: var(--kop);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--zacht);
  text-align: left;
}
.uitslagtabel td {
  color: var(--zacht);
}
.uitslagtabel td b {
  color: var(--wit);
}
/* Wie doorging. De rij krijgt een streep in plaats van een vlak: een gevulde
   rij zou met vier tabellen naast elkaar een dambord opleveren. */
.uitslagtabel .is-door th[scope='row'] {
  color: var(--wit);
  box-shadow: inset 3px 0 0 var(--groen);
}
/* Zichtbaar in de HTML, onzichtbaar op het scherm: de tabel zegt zelf wie er
   doorging, zodat een tekstextractor de betekenis van de streep meekrijgt. */
.door {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.uitslagtabel .partij {
  text-align: left;
  color: var(--wit);
}
.einduitslag {
  list-style: none;
  margin: var(--r6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--r3);
}
.einduitslag li {
  display: flex;
  align-items: baseline;
  gap: var(--r2);
  padding: var(--r3) var(--r4);
  background: var(--ink-kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond-groot);
  color: var(--wit);
}
.einduitslag .plaats {
  font-family: var(--kop);
  color: var(--groen);
}
/* --- adresblok ------------------------------------------------------------ */
.adres {
  font-style: normal;
  color: var(--zacht);
  line-height: 1.7;
  margin: var(--r4) 0;
}
/* --- de balk op een smalle telefoon --------------------------------------- */
/*
 * Op 390px liep de bovenbalk over: merk, taalwisselaar en menuknop passen bij
 * elkaar niet in 350px, en de pagina kreeg daardoor een horizontale scrollbalk
 * — op élke pagina. Het merk staat op `nowrap` (terecht: afgebroken leest het
 * als twee woorden), dus er moet ruimte af in plaats van bij.
 *
 * De taalwisselaar blijft staan en houdt zijn 44px aanraakhoogte. Dat is een
 * eerdere afweging: op een telefoon is dat het enige zichtbare bewijs dat de
 * site ook in jouw taal bestaat.
 */
@media (max-width: 480px) {
  .balk-binnen {
    gap: var(--r2);
  }
  /*
   * Meeschalen in plaats van één vaste stap: het merk verschilt per domein in
   * lengte — DARTTOURNAMENT.APP is drie tekens langer dan DARTTURNIER.APP — en
   * één maat die voor het Nederlands past, loopt in het Engels alsnog over.
   */
  .merk {
    font-size: clamp(0.75rem, 3.2vw, 1.0625rem);
  }
  .merk svg {
    width: 20px;
    height: 20px;
    margin-right: var(--r1);
  }
  .balk .talen a {
    padding-inline: var(--r1);
    font-size: 0.75rem;
  }
}