/* ============================================================
   DE KOP
   ============================================================
   Eén vaste kop voor de hele site. Er stonden er drie: de homepage en de
   tegelpagina's lieten hun kop wegscrollen en menu.js schoof daarna een
   eigen minibalk in beeld, terwijl de legal-pagina's hun kop al vastzetten.
   Twee mechanismen, drie uitvoeringen.

   Nu zet elke pagina zijn eigen kop vast. menu.js kijkt naar de positie van
   <nav> en laat zijn minibalk weg zodra die sticky of fixed is, dus die
   verdwijnt vanzelf — geen tweede kop meer.

   De achtergrond is donkergrijs op 85% dekking, met een waas erachter. Bij
   volle dekking valt de kop als een balk op de foto; met waas blijft de
   herofoto erdoorheen leesbaar zonder dat het woordmerk eronder lijdt.

   De specificiteit is bewust één stap hoger (body nav...), want index.html
   zet zijn kop in een <style> in de pagina zelf en die zou anders winnen.
   ============================================================ */

/* De hoogte staat hier, want de homepage houdt er ruimte mee vrij onder de
   vaste kop en de hoekmarkeringen van de hero beginnen eronder. */
:root{ --kop-h: 66px; }

/* Eén uitvoering voor alle koppen, naar het model van de tegelpagina's: de
   balk loopt over de volle breedte, de inhoud erin staat uitgelijnd op
   dezelfde kolom van 960 als de rest van de pagina, merk links en menu
   rechts. De homepage stond op volle breedte met het merk op 64px, de
   legal-pagina's stonden gecentreerd met het menu 160px voor de rand. */
body nav.cinema,
body nav.nav{
  position: sticky; top: 0; z-index: 90;
  background: rgba(20, 20, 22, .85);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
          backdrop-filter: blur(16px) saturate(120%);
  border-bottom: 1px solid rgba(255, 255, 255, .07);

  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; max-width: none; min-height: var(--kop-h);
  padding: 0 max(24px, calc((100% - 960px) / 2 + 24px));
}

/* De terugknop op de legal-pagina's stond absoluut tegen de rechterrand,
   waardoor space-between niets te verdelen had en het menu 160px voor de
   rand bleef hangen. In de rij dus. */
body nav.nav .nav-back{ position: static; right: auto; }

/* Op de homepage stonden de links absoluut op right:40px, dus space-between
   had daar niets te verdelen en het menu bleef 40px van de rand hangen in
   plaats van op de kolomrand. */
body nav.cinema .nav-links{
  position: static; right: auto; top: auto; transform: none;
}

/* De kop van de homepage staat binnen de vastgezette hero. Die hero heeft
   isolation:isolate en z-index 0, dus alles wat erna komt schuift eroverheen
   — ook over een sticky kop. Daarom staat hij daar als fixed, buiten de hero
   in de opmaak, en houdt .hero-wrap ruimte vrij met padding-top. */
body nav.cinema{
  position: fixed; left: 0; right: 0; top: 0;
}

/* Zonder waas zou de kop doorzichtig blijven en de tekst eronder dwars door
   het woordmerk lopen. Daar is 85% te weinig, dus dan dekkend. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  body nav.cinema,
  body nav.nav{ background: rgba(14, 14, 16, .97); }
}

/* De links en de menuknop stonden op --ink-dim. Op een dekkende zwarte kop
   was dat ruim voldoende, maar deze kop is doorzichtig: zodra er een licht
   stuk foto onder de balk door schuift zakt grijs-op-doorzichtig naar 2,5:1.
   Gemeten op de homepage en op de tegelpagina's. Lichter dus — en dat is op
   een kop ook gewoon beter: dit zijn de enige links die altijd in beeld
   staan. Rood blijft voor hover. */
body nav.cinema .nav-links a,
body nav.nav .nav-back,
body nav.cinema .jwt-menu-knop,
body nav.nav .jwt-menu-knop{
  color: #E2DFDB;
}
body nav.cinema .nav-links a:hover,
body nav.nav .nav-back:hover,
body nav.cinema .jwt-menu-knop:hover,
body nav.nav .jwt-menu-knop:hover,
body nav.cinema .jwt-menu-knop:focus-visible,
body nav.nav .jwt-menu-knop:focus-visible{
  color: var(--accent, #E8B13C);
}