/* ============================================================================
   Kop, voet en knoppen — gedeeld door álle pagina's
   ============================================================================
   Dit bestand wordt óók ingeladen door /kalender, een pagina met veel eigen
   CSS die al jaren werkt. Daarom staat hier BEWUST geen enkele regel op een
   element (geen body, geen p, geen ul): alles hangt aan een klasse. Zo kan dit
   bestand niets omvergooien wat die pagina zelf al regelt.

   De reset en de typografie staan in site.css — dat laadt alleen de homepage.
   ========================================================================== */

/* Wie met het toetsenbord navigeert moet altijd kunnen zien waar hij staat. */
:focus-visible {
  outline: 2px solid var(--accent-gold, #f0b429);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--breedte);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

/* ── Knoppen ─────────────────────────────────────────────────────────────── */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px var(--sp-4);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-kop);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
  /* 44px hoog: kleiner is op een telefoon met natte handen niet te raken. */
  min-height: 44px;
}

.knop--primair {
  background: var(--accent-gold);
  color: var(--op-accent);
}

.knop--primair:hover {
  background: var(--accent-gold-soft);
}

.licht .knop--primair:hover {
  background: var(--accent-gold);
  filter: brightness(0.94);
}

.knop--rand {
  border-color: var(--line-border);
  color: var(--text-primary);
  background: transparent;
}

.knop--rand:hover {
  border-color: var(--accent-gold);
  color: var(--text-accent);
}

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ── Navigatie ───────────────────────────────────────────────────────────────
   De nav is altijd donker, ook boven een lichte pagina. Daarom staan hier
   vaste hex-waarden en geen tokens: de donkere mode is hier geen keuze maar
   een eigenschap van het onderdeel. */

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #f0b429;
  color: #0a0a0a;
  padding: 10px 16px;
  border-radius: 0 0 12px 0;
  font-weight: 700;
  text-decoration: none;
}

.overslaan:focus {
  left: 0;
}

.nav {
  background: #0a0a0a;
  color: #fff;
  border-bottom: 1px solid #33302c;
  position: sticky;
  top: 0;
  z-index: 50;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* Eén rij op een breed scherm: merk links, menu rechts. Op een telefoon mag
   de rij afbreken en zakt het menu naar een eigen regel eronder. */
.nav__balk {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-block: 8px;
  min-height: 72px;
}

.nav__balk nav {
  flex: 1 0 100%;
}

.merk {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  margin-right: auto;
}

/* De hoogte staat hier in CSS, maar breedte én hoogte staan óók als attribuut
   op de <img> (312×268). Daardoor kent de browser de verhouding vóór het
   bestand binnen is en reserveert hij meteen de juiste plek: geen verspringen
   (CLS blijft 0) ondanks dat het logo nu een stuk groter is. */
.merk img {
  height: 48px;
  width: auto;
  display: block;
  /* logo-merk.png is uitgesneden uit een afbeelding met een zwárte achtergrond
     (#000) en heeft geen doorzichtigheid; de nav is #0A0A0A. GEMETEN: op 40 px
     zag je dat verschil van vier procent niet, op 48 en 60 px wel — een net te
     donkere rechthoek rond de ballen. `lighten` neemt per kanaal de lichtste
     van beide, dus dat vlak wordt exact de navkleur en aan de ballen verandert
     niets. Vervalt zodra er een logo mét doorzichtige achtergrond ligt — zie
     site-vault/open_questions.md. */
  mix-blend-mode: lighten;
}

.merk__naam {
  display: block;
  font-family: var(--font-kop);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
}

.merk__sub {
  display: block;
  font-size: 11px;
  color: #b5afa4;
  letter-spacing: 0.05em;
  margin-top: 1px;
  line-height: 1.3;
}

/* Op een telefoon staat er onder de wordmark alleen "Vrijetijdscentrum" — dat
   is samen met "VTC De Ploeg" erboven de volledige naam, en het past naast de
   menuknop zonder dat de balk afbreekt. Vanaf 900 px komt de rest erbij. De
   naam voluit staat op de telefoon sowieso nog in de hero en in de voet. */
.merk__sub-extra {
  display: none;
}

/* Zonder JavaScript staat het menu er gewoon, opengeklapt. De knop verschijnt
   pas als het script de klasse .js zet — zo is de site nooit stuk zonder
   script, en klapt hij alleen dicht als hij ook weer open kán. */
.nav__knop {
  display: none;
  background: none;
  border: 1px solid #33302c;
  border-radius: 6px;
  color: #fff;
  font: inherit;
  font-size: 14px;
  padding: 9px 13px;
  min-height: 44px;
  cursor: pointer;
  align-items: center;
  gap: 8px;
}

.js .nav__knop {
  display: inline-flex;
}

.nav__lijst {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  margin: 0;
  padding: 0 0 16px;
  list-style: none;
}

/* Niet laten krimpen: anders knijpt de flexbox het telefoonnummer in de
   knop plat zodra het menu krap komt te zitten. */
.nav__lijst li {
  flex: 0 0 auto;
}

/* :not(.knop) is hier geen franje maar noodzaak: deze selector is specifieker
   dan .knop, dus zonder die uitzondering wint "padding: 8px 0" van de padding
   van de knop en loopt het telefoonnummer uit zijn pil. */
.nav__lijst a:not(.knop) {
  color: #b5afa4;
  text-decoration: none;
  font-size: 15px;
  display: inline-block;
  padding: 8px 0;
  white-space: nowrap;
}

.nav__lijst .knop {
  white-space: nowrap;
}

.nav__lijst a:not(.knop):hover,
.nav__lijst a:not(.knop)[aria-current='page'] {
  color: #f0b429;
}

@media (max-width: 899px) {
  /* Staat er JavaScript, dan zit het menu dicht tot je op de knop drukt.
     Staat het er niet, dan mist deze regel en staat de lijst er gewoon. */
  .js .nav__lijst {
    display: none;
  }
  .js .nav__lijst.open {
    display: flex;
  }
}

@media (max-width: 899px) {
  .nav__lijst {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid #232120;
    margin-top: 4px;
    padding-top: 8px;
  }
  .nav__lijst li + li {
    border-top: 1px solid #232120;
  }
  .nav__lijst a {
    padding: 13px 0;
    font-size: 16px;
  }
  .nav__lijst .knop {
    margin-block: 8px;
  }
}

@media (min-width: 900px) {
  .nav__balk {
    min-height: 88px;
    flex-wrap: nowrap;
  }
  .nav__balk nav {
    flex: 0 0 auto;
  }
  .merk img {
    height: 60px;
  }
  .merk__naam {
    font-size: 18px;
  }
  .merk__sub-extra {
    display: inline;
  }
  /* Vanaf hier past alles op één regel; de knop is dan overbodig. */
  .js .nav__knop {
    display: none;
  }
  .nav__lijst {
    padding-bottom: 0;
  }
}

/* ── Voettekst ───────────────────────────────────────────────────────────── */

.voet {
  background: #0a0a0a;
  color: #b5afa4;
  border-top: 1px solid #33302c;
  padding-block: 64px 40px;
  font-size: 15px;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
}

.voet a {
  color: #b5afa4;
  text-decoration: none;
}

.voet a:hover {
  color: #f0b429;
  text-decoration: underline;
}

.voet ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.voet__blokken {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .voet__blokken {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.voet h2,
.voet h3 {
  font-family: var(--font-kop);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
}

.voet li {
  padding-block: 5px;
}

.voet__naam {
  font-family: var(--font-kop);
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.voet__adres {
  margin: 8px 0 0;
  font-style: normal;
  line-height: 1.75;
}

.voet__adres a {
  color: #f0b429;
}

.voet__slot {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #232120;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 13px;
  color: #8f887e;
}

/* De bondslinks zijn een lange rij; op de telefoon mogen ze rustig aflopen. */
.voet__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.voet__links a {
  font-size: 14px;
  padding-block: 4px;
}