/* ============================================================
   Thema "nacht" — de hele site als een donkere filmzaal.
   Laadt alleen wanneer dit thema actief is, bovenop site.css.
   Het ivoren thema blijft ongemoeid in site.css staan.
   ============================================================ */

body.thema-nacht {
  --nacht: #0D0F0E;
  --nacht-zacht: #141715;
  --nacht-diep: #090B0A;

  --wit: #141715;
  --ivoor-diep: #1C201E;
  --tekst: #F3EFE7;
  --tekst-zacht: rgba(243, 239, 231, 0.58);
  --tekst-licht: rgba(243, 239, 231, 0.76);
  --champagne-diep: #C6B28E;
  --haarlijn: rgba(198, 178, 142, 0.26);
  --haarlijn-donker: rgba(198, 178, 142, 0.26);
  --inkt-rand: rgba(243, 239, 231, 0.12);

  color-scheme: dark;
  background: var(--nacht);
  color: var(--tekst);
}

/* ---------- Vlakken ---------- */

body.thema-nacht .op-licht { background: var(--nacht); color: var(--tekst); }
body.thema-nacht .op-wit { background: var(--nacht-zacht); color: var(--tekst); }
body.thema-nacht .op-diep { background: var(--nacht-zacht); color: var(--tekst); }
body.thema-nacht .op-donker { background: var(--nacht-diep); color: var(--tekst); }

body.thema-nacht main > section + section { border-top: 1px solid rgba(243, 239, 231, 0.07); }

body.thema-nacht h1,
body.thema-nacht h2,
body.thema-nacht h3,
body.thema-nacht h4 { color: var(--ivoor); }

body.thema-nacht .kop-klein { color: var(--champagne); }
body.thema-nacht .lood { color: var(--tekst-licht); }

/* Grote koppen mogen hier lichter en luchtiger staan. */
body.thema-nacht h1 { font-weight: 300; letter-spacing: -0.01em; }
body.thema-nacht h2 { font-weight: 300; letter-spacing: -0.008em; }

/* ---------- Koptekst ---------- */

body.thema-nacht .kop { background: var(--nacht-diep); border-bottom-color: rgba(243, 239, 231, 0.08); }

@media (min-width: 861px) {
  body.thema-nacht.heeft-hero .kop.is-vast {
    background: rgba(9, 11, 10, 0.88);
    border-bottom-color: rgba(243, 239, 231, 0.1);
  }
}

/* ---------- Hero: gecentreerd, met vignet ---------- */

body.thema-nacht .hero__binnen {
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: clamp(38rem, 94vh, 58rem);
}

body.thema-nacht .hero--kort .hero__binnen { min-height: clamp(26rem, 64vh, 38rem); }

body.thema-nacht .hero h1 { max-width: 20ch; }
body.thema-nacht .hero .lood, body.thema-nacht .hero__lood { margin-left: auto; margin-right: auto; }
body.thema-nacht .hero .knoppen { justify-content: center; }
body.thema-nacht .hero .kop-klein { justify-content: center; }

body.thema-nacht .hero .kop-klein::after {
  content: "";
  width: clamp(1.5rem, 3vw, 2.75rem);
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex: none;
}

body.thema-nacht .hero__beeld {
  opacity: 0.6;
  filter: contrast(1.08) saturate(0.9);
}

body.thema-nacht .hero__verloop {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(13, 15, 14, 0.12) 0%, rgba(13, 15, 14, 0.62) 58%, rgba(13, 15, 14, 0.95) 100%),
    linear-gradient(to top, rgba(13, 15, 14, 0.96) 0%, rgba(13, 15, 14, 0.35) 38%, rgba(13, 15, 14, 0.4) 100%);
}

body.thema-nacht .hero__disciplines { color: rgba(243, 239, 231, 0.62); }

/* ---------- Knoppen: champagne als hoofdaccent ---------- */

body.thema-nacht .knop {
  border-color: rgba(243, 239, 231, 0.4);
  color: var(--ivoor);
  background: transparent;
}

body.thema-nacht .knop:hover {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--nacht);
}

body.thema-nacht .knop--licht {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--nacht);
}

body.thema-nacht .knop--licht:hover {
  background: transparent;
  border-color: var(--champagne);
  color: var(--champagne);
}

body.thema-nacht .op-licht .knop--lijn,
body.thema-nacht .op-wit .knop--lijn,
body.thema-nacht .op-diep .knop--lijn,
body.thema-nacht .op-donker .knop--lijn,
body.thema-nacht .hero .knop--lijn {
  border-color: rgba(243, 239, 231, 0.4);
  color: var(--ivoor);
  background: transparent;
}

body.thema-nacht .op-licht .knop--lijn:hover,
body.thema-nacht .op-wit .knop--lijn:hover,
body.thema-nacht .op-diep .knop--lijn:hover,
body.thema-nacht .op-donker .knop--lijn:hover,
body.thema-nacht .hero .knop--lijn:hover {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--nacht);
}

body.thema-nacht .tekstlink { color: var(--ivoor); border-bottom-color: var(--champagne); }
body.thema-nacht .tekstlink:hover { color: var(--champagne); }

/* ---------- Beeld ---------- */

body.thema-nacht .discipline img { opacity: 0.74; filter: contrast(1.05) saturate(0.95); }
body.thema-nacht .discipline:hover img { opacity: 0.95; }
body.thema-nacht .galerij figure { background: var(--nacht-zacht); }
body.thema-nacht .galerij img { filter: contrast(1.04) saturate(0.95); }
body.thema-nacht .film__speler { background: var(--nacht-diep); }
body.thema-nacht .film__titel { color: var(--ivoor); }
body.thema-nacht .film__label { color: var(--champagne); }

/* ---------- Tellers ---------- */

body.thema-nacht .teller__getal { color: var(--champagne); }
body.thema-nacht .teller__label { color: var(--tekst-licht); }

/* ---------- Klantreacties ---------- */

body.thema-nacht .reactie { border-top-color: var(--haarlijn); }
body.thema-nacht .reactie blockquote { color: var(--ivoor); }
body.thema-nacht .reactie figcaption { color: var(--ivoor); }
body.thema-nacht .reactie__soort { color: var(--champagne); }

/* ---------- Pakketten en uitbreidingen ---------- */

body.thema-nacht .pakket,
body.thema-nacht .upgrade { border-top-color: var(--haarlijn); }
body.thema-nacht .pakket--populair { border-top-color: var(--champagne); }
body.thema-nacht .pakket__vlag { color: var(--champagne); }
body.thema-nacht .pakket__prijs,
body.thema-nacht .upgrade__prijs { color: var(--ivoor); }
body.thema-nacht .pakket li { border-bottom-color: rgba(243, 239, 231, 0.1); color: var(--tekst-licht); }
body.thema-nacht .pakket li::before { background: var(--champagne); }
body.thema-nacht .pakket__noot,
body.thema-nacht .upgrade__noot { color: var(--tekst-zacht); }

/* ---------- Locaties ---------- */

body.thema-nacht .locaties li { border-bottom-color: rgba(243, 239, 231, 0.14); color: var(--tekst-licht); }

/* ---------- Formulieren ---------- */

body.thema-nacht .veld label { color: var(--tekst-zacht); }

body.thema-nacht .veld input,
body.thema-nacht .veld select,
body.thema-nacht .veld textarea {
  background: transparent;
  color: var(--ivoor);
  border-bottom-color: rgba(243, 239, 231, 0.26);
}

body.thema-nacht .veld input::placeholder,
body.thema-nacht .veld textarea::placeholder { color: rgba(243, 239, 231, 0.35); }

body.thema-nacht .veld select option { color: #2B302C; background: #F3EFE7; }

body.thema-nacht .veld input:focus,
body.thema-nacht .veld select:focus,
body.thema-nacht .veld textarea:focus { border-bottom-color: var(--champagne); }

body.thema-nacht .melding { color: var(--ivoor); background: rgba(108, 124, 105, 0.16); }
body.thema-nacht .melding--fout { background: rgba(164, 54, 47, 0.16); }
body.thema-nacht .veldfout { color: #F0A9A2; }

/* ---------- Contactgegevens ---------- */

body.thema-nacht .gegevens dt { color: var(--champagne); }
body.thema-nacht .gegevens dd { color: var(--ivoor); }

/* ---------- Voettekst ---------- */

body.thema-nacht .voet { background: var(--nacht-diep); color: var(--tekst-licht); }
body.thema-nacht .voet__rooster { border-bottom-color: rgba(243, 239, 231, 0.1); }

/* ---------- Knoppen: de vulling loopt in champagne binnen ---------- */

body.thema-nacht .knop::before { background: var(--champagne); }

body.thema-nacht .knop:hover {
  background: transparent;
  border-color: var(--champagne);
  color: var(--nacht);
}

body.thema-nacht .knop--licht::before { background: var(--nacht); }

body.thema-nacht .knop--licht:hover {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--champagne);
}

body.thema-nacht .op-licht .knop--lijn::before,
body.thema-nacht .op-wit .knop--lijn::before,
body.thema-nacht .op-diep .knop--lijn::before,
body.thema-nacht .op-donker .knop--lijn::before,
body.thema-nacht .hero .knop--lijn::before { background: var(--champagne); }

body.thema-nacht .op-licht .knop--lijn:hover,
body.thema-nacht .op-wit .knop--lijn:hover,
body.thema-nacht .op-diep .knop--lijn:hover,
body.thema-nacht .op-donker .knop--lijn:hover,
body.thema-nacht .hero .knop--lijn:hover {
  background: transparent;
  border-color: var(--champagne);
  color: var(--nacht);
}