/* ============================================================
   VOLLEDIGSCHERM-MENU — gedeeld door alle pagina's
   Eén implementatie voor desktop en telefoon: hetzelfde paneel,
   alleen andere maten. Kleuren komen uit de variabelen van de pagina,
   met een donkere terugval voor pagina's zonder .zone-dark.
============================================================ */

.jwt-menu-knop{
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 4px 2px; margin: 0;
  font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-dim, #9A9A9E);
  cursor: pointer; transition: color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.jwt-menu-knop:hover,
.jwt-menu-knop:focus-visible{ color: var(--accent, #E8B13C); }
.jwt-menu-knop .strepen{
  display: inline-flex; flex-direction: column; gap: 3px; width: 16px;
}
.jwt-menu-knop .strepen i{
  display: block; height: 1px; background: currentColor;
  transition: transform .25s ease, width .25s ease;
}
.jwt-menu-knop .strepen i:nth-child(1){ width: 16px; }
.jwt-menu-knop .strepen i:nth-child(2){ width: 11px; }
.jwt-menu-knop:hover .strepen i:nth-child(2){ width: 16px; }

/* ---- het paneel ---- */
.jwt-menu{
  position: fixed; inset: 0; z-index: 9999;
  background: #0A0A0B;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
.jwt-menu.open{ opacity: 1; visibility: visible; }
.jwt-menu[hidden]{ display: none; }

/* Rode hoekmarkeringen, zoals de HUD op de homepage. */
.jwt-menu::before, .jwt-menu::after{
  content:''; position: absolute; width: 26px; height: 26px;
  border-color: #E8B13C; border-style: solid; opacity: .55; pointer-events: none;
}
/* Klein en strak in de hoek. Op 22,22 viel de markering precies op het
   woordmerk; onder de kopregel kwam hij op de eerste menuregel terecht.
   Zo blijft het teken staan en raakt het niets: hij loopt tot x=24 en daar
   begint het merk. */
.jwt-menu::before{
  top: 11px; left: 11px; width: 13px; height: 13px;
  border-width: 1px 0 0 1px;
}
.jwt-menu::after{ bottom: 22px; right: 22px; border-width: 0 1px 1px 0; }

/* De kop van het paneel moet op telefoon exact op de kop van de pagina
   vallen: zelfde hoogte, zelfde zijmarge, zelfde midden. Anders springt het
   woordmerk zodra je het menu opent — en dat deed het: 2px opzij en 6px
   omlaag. De zijmarge is dezelfde berekening als in /kop.css. */
.jwt-menu-kop{
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--kop-h, 66px);
  padding: 0 max(24px, calc((100% - 960px) / 2 + 24px));
  /* De kop van de pagina heeft een rand van 1px onderaan. Bij border-box
     betekent dat een inhoudsvak van 65 in plaats van 66, en daardoor stond
     het merk daar op 25,0 en hier op 25,5 — een halve pixel sprong bij het
     openen. Dezelfde rand, maar onzichtbaar. */
  border-bottom: 1px solid transparent;
  flex: 0 0 auto;
}
/* Alleen de maat; de staalvulling komt uit /merk.css. Geen glans hier: het
   paneel is er even, een veeg die daar begint haalt het einde niet.
   De letterafstand is 0.08em, net als in de kop van de pagina — op 1px stond
   het merk in het paneel net iets strakker dan erbuiten. */
.jwt-menu-merk{
  font-size: 15px; letter-spacing: 0.08em;
  display: inline-block;
}
.jwt-menu-sluit{
  background: none; border: 0; padding: 6px; cursor: pointer;
  font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: #9A9A9E; transition: color .2s ease;
}
.jwt-menu-sluit:hover, .jwt-menu-sluit:focus-visible{ color: #E8B13C; }

.jwt-menu-lijst{
  list-style: none; margin: 0; padding: 0 clamp(22px, 5vw, 56px);
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  overflow-y: auto;
}
.jwt-menu-lijst li{
  border-bottom: 1px solid rgba(255,255,255,.07);
  opacity: 0; transform: translateY(14px);
}
.jwt-menu.open .jwt-menu-lijst li{
  animation: jwtMenuIn .42s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes jwtMenuIn{ to{ opacity: 1; transform: none; } }

.jwt-menu-lijst a{
  display: flex; align-items: baseline; gap: clamp(14px, 2.4vw, 28px);
  padding: clamp(11px, 1.7vh, 20px) 0;
  text-decoration: none; color: #FFF;
  font-family: var(--display, sans-serif); font-weight: 400;
  font-size: clamp(1.5rem, 4.4vw, 3rem); line-height: 1.06;
  letter-spacing: -0.02em;
  transition: color .2s ease, padding-left .25s cubic-bezier(.16,1,.3,1);
}
.jwt-menu-lijst a:hover,
.jwt-menu-lijst a:focus-visible{ color: #E8B13C; padding-left: 12px; }
.jwt-menu-lijst a .nr{
  font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 2px;
  color: #E8B13C; flex: 0 0 auto; min-width: 26px;
}
.jwt-menu-lijst a[aria-current="page"]{ color: #E8B13C; }
.jwt-menu-lijst a[aria-current="page"] .nr::after{ content: ' •'; }

.jwt-menu-voet{
  flex: 0 0 auto;
  padding: 20px clamp(22px, 5vw, 56px) 30px;
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  border-top: 1px solid rgba(255,255,255,.07);
}
.jwt-menu-voet a{
  font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 1.8px;
  text-transform: uppercase; color: #6E6E74; text-decoration: none;
  transition: color .2s ease;
}
.jwt-menu-voet a:hover, .jwt-menu-voet a:focus-visible{ color: #FFF; }

html.jwt-menu-vast{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  .jwt-menu{ transition: none; }
  .jwt-menu.open .jwt-menu-lijst li{ animation: none; opacity: 1; transform: none; }
  .jwt-menu-lijst a{ transition: color .2s ease; }
}

@media (max-height: 640px){
  .jwt-menu-lijst a{ font-size: clamp(1.1rem, 3.4vw, 1.6rem); padding: 8px 0; }
  .jwt-menu-kop{ padding-top: 16px; padding-bottom: 12px; }
}


/* ============================================================
   VASTE MINIBALK
   De bestaande navigatie van elke pagina blijft zoals hij is; dit is de
   ingekrompen versie die verschijnt zodra je eraan voorbij gescrold bent.
   Zo is de kop altijd bereikbaar zonder dat ik twaalf pagina's hoef te
   herbouwen, en blijft het menu overal binnen handbereik.
============================================================ */
.jwt-balk{
  position: fixed; top: 0; left: 0; right: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  /* De marges worden in het script gemeten en per pagina gezet, zodat het
     woordmerk niet opzij springt als de balk verschijnt. Elke pagina heeft
     namelijk zijn eigen kop: de homepage lijnt links uit, de andere zitten in
     een gecentreerde container. Deze waarden zijn alleen de terugval. */
  padding: 10px 40px 10px 46px;
  background: rgba(10,10,11,.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transform: translateY(-100%);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.jwt-balk.tonen{ transform: none; }
/* Alleen de maat; vorm, vulling en glans staan in /merk.css. Zelfstandig
   gedefinieerd, want .brand-name wordt op de ene pagina inline gestyled en
   op de andere door tier.css, en de balk staat overal. */
.jwt-balk-merk{
  font-size: 15px; letter-spacing: 0.09em;
  text-decoration: none;
  display: inline-block;
}
.jwt-balk .jwt-menu-knop{ color: #C2C2C8; }

@media (prefers-reduced-motion: reduce){
  .jwt-balk{ transition: none; }
}

/* ============================================================
   OP DESKTOP EEN KLEIN PANEEL, OP TELEFOON HET HELE SCHERM
============================================================ */
.jwt-menu-sluier{
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(4,5,10,.55);
  opacity: 0; visibility: hidden;
  transition: opacity .24s ease, visibility .24s;
}
.jwt-menu-sluier.open{ opacity: 1; visibility: visible; }
.jwt-menu-sluier[hidden]{ display: none; }

@media (min-width: 861px){
  .jwt-menu{
    inset: auto; top: 14px; right: 14px;
    width: 340px; max-height: calc(100vh - 28px);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 24px 70px rgba(0,0,0,.7);
    transform: translateY(-8px) scale(.985);
    transform-origin: top right;
    transition: opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1), visibility .22s;
  }
  .jwt-menu.open{ transform: none; }
  /* De hoekmarkeringen horen bij het volle scherm; in een klein paneel
     zouden ze tegen de rand aan botsen. */
  .jwt-menu::before, .jwt-menu::after{ display: none; }

  .jwt-menu-kop{ padding: 16px 20px 12px; }
  .jwt-menu-merk{ font-size: 12px; }
  .jwt-menu-sluit{ font-size: 10px; }

  .jwt-menu-lijst{ padding: 0 20px; justify-content: flex-start; }
  .jwt-menu-lijst a{
    font-size: 17px; padding: 11px 0; gap: 14px;
    font-family: var(--mono, monospace); letter-spacing: .04em;
    text-transform: uppercase;
  }
  .jwt-menu-lijst a:hover,
  .jwt-menu-lijst a:focus-visible{ padding-left: 6px; }
  .jwt-menu-lijst a .nr{ font-size: 9px; min-width: 20px; }

  .jwt-menu-voet{ padding: 14px 20px 18px; gap: 6px 16px; }
  .jwt-menu-voet a{ font-size: 9px; }

  /* Een paneel van 340px hoeft de pagina niet te vergrendelen. */
  html.jwt-menu-vast{ overflow: auto; }
}


/* Op de homepage verbergt de navigatiebalk zijn links op smalle schermen.
   Daar hing de menuknop in, dus die was op telefoon pas na 140px scrollen
   bereikbaar. De balk mag weer zichtbaar zijn; alleen de tekstlinks blijven
   verborgen, zodat de knop overblijft. */
@media (max-width: 860px){
  nav.cinema .nav-links{ display: flex !important; }
  nav.cinema .nav-links > a{ display: none; }
}

/* Kopjes boven de twee hoofdcategorieen in het menu. Geen link, alleen een
   scheiding: digital products boven, de app eronder. */
.jwt-menu-groep{
  list-style: none;
  margin: 26px 0 6px;
  font-family: var(--mono, monospace);
  font-size: 9.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.jwt-menu-lijst > li:first-child + .jwt-menu-groep{ margin-top: 22px; }