/* ============================================================
   VESPA — het menuboekje achter de QR-code op tafel.

   Erft de tokens en lettertypes van styles.css. Geen lichte papierkleur:
   de zaak is donker met goud, en een cremekleurig boekje zou naast de
   website staan. Dit is dus een donker menuboek met goudopdruk.

   Drie dingen die hier gebeuren:
     - het boek zelf (bladen, rug, de pagina die omslaat in 3D)
     - de registerkaartjes die van rechts naar links verhuizen
     - de opmaak van een pagina, die de paginering in kaart.js aanstuurt

   Let op: de hoogtes hieronder bepalen hoeveel er op een pagina past.
   Wijzig je de lettergrootte of de regelafstand van .gerecht, dan verandert
   de verdeling over de pagina's mee. Dat is de bedoeling — kaart.js meet
   echt op — maar test het na op een smal scherm.
   ============================================================ */

.kaart-pagina{
  min-height:100dvh;
  display:flex; flex-direction:column;
}
@supports not (height: 100dvh){ .kaart-pagina{ min-height:100vh } }

/* ---------- kop met de keuzebalk ---------- */

.kaart-kop{
  position:relative; z-index:3;
  text-align:center;
  padding:clamp(.9rem,3vw,1.4rem) clamp(1rem,4vw,2rem) .2rem;
}
.kaart-merk{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--display); font-size:.7rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.kaart-merk::before,.kaart-merk::after{
  content:""; width:22px; height:1px; background:currentColor; opacity:.55;
}

.kaart-keuze{
  position:relative; z-index:3;
  display:flex; gap:.4rem; justify-content:flex-start;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:.7rem clamp(1rem,4vw,2rem);
}
.kaart-keuze::-webkit-scrollbar{ display:none }
.kaart-keuze .keuze{
  flex:none; white-space:nowrap;
  padding:.42rem .95rem; border-radius:999px;
  border:1px solid var(--line); background:rgba(244,234,216,.05);
  color:var(--cream); opacity:.75;
  font-size:.79rem; font-weight:600;
  transition:opacity .2s, background .2s, border-color .2s, color .2s;
}
.kaart-keuze .keuze:hover{ opacity:1; border-color:var(--line-2) }
.kaart-keuze .keuze.actief{
  background:var(--gold); border-color:var(--gold); color:var(--ink); opacity:1;
}

/* ---------- het boek ---------- */

.boek-omgeving{
  position:relative; z-index:2;
  flex:1; display:flex; flex-direction:column; justify-content:center;
  perspective:2600px;
  padding:.4rem 30px 0;
}
.boek{
  --boek-h:clamp(340px, calc(100dvh - 250px), 720px);
  position:relative;
  width:100%; max-width:420px; height:var(--boek-h);
  margin:0 auto;
  display:flex;
  transform-style:preserve-3d;
}
@supports not (height: 100dvh){ .boek{ --boek-h:clamp(340px, calc(100vh - 250px), 720px) } }

.blad{ position:relative; z-index:2; flex:1 1 100%; min-width:0 }
.boek[data-modus="spread"] .blad{ flex:1 1 50% }
.boek[data-modus="enkel"] .blad-links{ display:none }

/* de rug: alleen zichtbaar als het boekje openligt */
.boek[data-modus="spread"]::after{
  content:""; position:absolute; z-index:4; top:0; bottom:0; left:50%;
  width:34px; margin-left:-17px; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 38%, rgba(0,0,0,.55) 50%,
    rgba(0,0,0,.42) 62%, rgba(0,0,0,0) 100%);
}

/* ---------- een pagina ---------- */

.pagina{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:clamp(1rem,3.2vw,1.6rem) clamp(.95rem,3vw,1.5rem) .5rem;
  overflow:hidden;
  background:
    var(--mosaic),
    linear-gradient(160deg, #221a12 0%, #1a130c 55%, #150f09 100%);
  border:1px solid rgba(227,178,60,.16);
  box-shadow:inset 0 0 60px -20px rgba(0,0,0,.9);
}
.boek[data-modus="spread"] .blad-links .pagina{ border-radius:6px 2px 2px 6px }
.boek[data-modus="spread"] .blad-rechts .pagina{ border-radius:2px 6px 6px 2px }
.boek[data-modus="enkel"] .pagina{ border-radius:6px }

.pagina-inhoud{ flex:1 1 auto; min-height:0; overflow:hidden }
.pagina-nr{
  flex:none; padding-top:.4rem; text-align:center;
  font-family:var(--serif); font-size:.72rem; color:rgba(244,234,216,.35);
  font-variant-numeric:tabular-nums;
}

/* meetblad: dezelfde maat als een echte pagina, maar onzichtbaar */
.meetblad{
  display:none; position:absolute; top:0; bottom:0; left:0; width:100%;
  visibility:hidden; pointer-events:none; z-index:0;
}
.boek[data-modus="spread"] .meetblad{ width:50% }

/* ---------- inhoud van een pagina ---------- */

.sectie-band{
  flex:none; text-align:center;
  padding-bottom:.7rem; margin-bottom:1rem;
  border-bottom:1px solid rgba(227,178,60,.3);
}
.sectie-band .band-boven{
  font-family:var(--display); font-size:.58rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--gold); opacity:.85;
}
.sectie-band h2{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  font-family:var(--serif); font-weight:300; line-height:1.15;
  font-size:clamp(1.15rem,3.6vw,1.5rem); color:var(--cream); margin-top:.25rem;
}
.sectie-band h2 .ico-svg{ width:1.05em; height:1.05em; flex:none; color:var(--gold); opacity:.9 }
.sectie-band .band-naam{ text-wrap:balance }
/* Rechterpagina van een spread waar dezelfde rubriek doorloopt: de scheidslijn
   blijft, zodat beide pagina's op dezelfde hoogte beginnen, maar de naam treedt
   terug. Enkel opacity, dus dit verschuift niets in de opmaak. */
.sectie-band.herhaald .band-boven,
.sectie-band.herhaald h2{ opacity:.3 }

.band-ingredient .band-boven{ display:inline-flex; align-items:center; gap:.55rem }
.band-ingredient .band-boven::before,
.band-ingredient .band-boven::after{
  content:""; width:20px; height:1px; background:currentColor; opacity:.6;
}

.rubriek-kop{
  display:flex; align-items:center; gap:.5rem;
  margin:1.1rem 0 .6rem; color:var(--gold);
}
.rubriek-kop:first-child{ margin-top:0 }
.rubriek-kop .ico-svg{ width:1rem; height:1rem; flex:none; opacity:.85 }
.rubriek-kop h3{
  font-family:var(--serif); font-weight:400;
  font-size:.92rem; letter-spacing:.02em; color:var(--cream);
}
.rubriek-note{
  font-size:.72rem; font-style:italic; color:rgba(244,234,216,.5);
  margin:-.3rem 0 .6rem;
}

.gerechten{ list-style:none; display:flex; flex-direction:column; gap:.72rem }
.gerecht.kort{ margin-bottom:-.32rem }
.gerecht.op{ opacity:.5 }
.gerecht.op .g-prijs{ text-decoration:line-through }

.g-kop{ display:flex; align-items:baseline; gap:.4rem }
.g-naam{
  font-size:.86rem; font-weight:600; line-height:1.3;
  flex:0 1 auto; min-width:0;
}
.g-leader{
  flex:1 1 1rem; min-width:.7rem;
  align-self:flex-end; margin-bottom:.3em;
  border-bottom:1px dotted rgba(244,234,216,.22);
}
.g-prijs{
  flex:none; font-family:var(--serif); font-weight:600; font-size:.86rem;
  color:var(--gold); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.g-desc{
  margin-top:.16rem; font-size:.735rem; line-height:1.45;
  color:rgba(244,234,216,.55);
}
.g-herkomst{
  margin-top:.12rem; font-size:.66rem; letter-spacing:.02em;
  color:rgba(227,178,60,.62);
}
.g-op{
  margin-top:.2rem; font-size:.62rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--err);
}
.g-naam .tag{ transform:translateY(-.06em) }

/* ---------- titelpagina en binnenkant kaft ---------- */

.pagina-titel .pagina-inhoud,
.pagina-kaft .pagina-inhoud{ display:flex; align-items:center; justify-content:center }
.titelblok{ text-align:center; width:100% }
.titel-logo{
  height:clamp(52px,13vh,86px); width:auto; margin:0 auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));
}
.titel-rule{ display:flex; align-items:center; gap:.6rem; margin:1rem 0 .8rem }
.titel-rule .rule{ flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(227,178,60,.5)) }
.titel-rule .rule:last-child{ background:linear-gradient(90deg,rgba(227,178,60,.5),transparent) }
.titel-rule .orn{ width:clamp(110px,42%,190px); height:auto; flex:none; opacity:.9 }
.titel-eyebrow{
  font-family:var(--display); font-size:.68rem; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
}
.titel-status{ margin-top:.7rem; font-size:.78rem; color:rgba(244,234,216,.6) }
.titel-hint{
  margin-top:1.6rem; font-size:.7rem; font-style:italic;
  color:rgba(244,234,216,.38); max-width:20rem; margin-inline:auto;
}
/* Binnenkant van de kaft: het schutblad. Geen inhoud, alleen het ornament
   heel flauw in blinddruk — een lege cirkel las als een vergeten placeholder. */
.kaft-merk{
  width:min(74%,300px); height:auto; aspect-ratio:527/93;
  background:url('../img/ornament.png') center/contain no-repeat;
  opacity:.13;
  filter:grayscale(1) brightness(2.4);
}

/* ---------- de pagina die omslaat ---------- */

.omslaand{
  display:none;
  position:absolute; top:0; bottom:0; left:0; width:100%;
  z-index:5;
  transform-origin:left center;
  transform-style:preserve-3d;
  will-change:transform;
}
.boek[data-modus="spread"] .omslaand{ left:50%; width:50% }
.omslaand.actief{ display:block }
.omslaand.terug{ transform:rotateY(-179.9deg) }
.omslaand.draait{
  transform:rotateY(-179.9deg);
  transition:transform 620ms cubic-bezier(.42,.02,.24,1);
}
.omslaand.terug.draait{ transform:rotateY(0deg) }

.vlak{ position:absolute; inset:0; backface-visibility:hidden; overflow:hidden }
.vlak.achter{ transform:rotateY(180deg) }
/* een leeg achtervlak is de rugzijde van het blad */
.vlak.achter:empty{
  background:var(--mosaic), linear-gradient(200deg,#20180f,#150f09);
  border:1px solid rgba(227,178,60,.14); border-radius:6px;
}
/* schaduw die met het blad meedraait */
.vlak::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,0) 42%);
  opacity:0; transition:opacity 620ms;
}
.omslaand.draait .vlak::after{ opacity:1 }

/* ---------- registerkaartjes ---------- */

/* De kaartjes staan in de ruimte gekanteld, met hun buitenrand naar de kijker
   toe — zoals de tabs van een ringmap die je naar je toe buigt. De dikte komt
   van een reeks harde schaduwen in plaats van echte zijvlakken: dat leest even
   fysiek en kan niet kapot bij een rare kantelhoek.

   Wisselt een kaartje van kant, dan draait de kantelhoek mee door nul heen.
   Het middenstuk van die reis gaat achter de bladen door (registers z-index 1,
   pagina's 2), dus wat je ziet is precies het wegduiken en weer openvouwen. */
.registers{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  perspective:900px; perspective-origin:50% 45%;
}
.register{
  --reg-b:26px; --kantel:26deg; --uit:0px;
  position:absolute; pointer-events:auto;
  width:var(--reg-b); height:auto;
  padding:.5rem .18rem;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--display); font-size:.58rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:rgba(244,234,216,.78);
  background:linear-gradient(165deg,#31261a 0%,#241b12 45%,#191309 100%);
  border:1px solid rgba(227,178,60,.3);
  transform-style:preserve-3d;
  transition:left .58s var(--ease), transform .58s var(--ease),
             box-shadow .3s, color .25s, background .25s,
             border-color .25s, filter .25s;
}
.register.rechts{
  left:calc(100% - 3px);
  transform-origin:left center;
  transform:translate(var(--uit),-50%) rotateY(calc(var(--kantel) * -1));
  border-radius:0 6px 6px 0; border-left-color:transparent;
  box-shadow:1px 0 0 #100b06, 2px 0 0 #100b06, 3px 1px 0 rgba(0,0,0,.75),
             10px 10px 22px -8px rgba(0,0,0,.85);
}
.register.links{
  left:3px;
  transform-origin:right center;
  transform:translate(calc(-100% - var(--uit)),-50%) rotateY(var(--kantel));
  border-radius:6px 0 0 6px; border-right-color:transparent;
  box-shadow:-1px 0 0 #100b06, -2px 0 0 #100b06, -3px 1px 0 rgba(0,0,0,.75),
             -10px 10px 22px -8px rgba(0,0,0,.85);
}

/* aanwijzen: het kaartje vouwt naar je open en komt naar buiten */
.register:hover, .register:focus-visible{
  --kantel:7deg; --uit:7px;
  color:var(--gold);
  background:linear-gradient(165deg,#3b2d1e 0%,#2b2015 45%,#1e1610 100%);
  border-color:rgba(227,178,60,.55);
}
.register.actief{
  --kantel:14deg;
  color:var(--ink);
  background:linear-gradient(165deg,#f0c65c 0%,#e3b23c 45%,#c8902a 100%);
  border-color:var(--gold-deep);
}
.register.actief:hover, .register.actief:focus-visible{ --kantel:5deg; color:var(--ink) }

/* het moment van overspringen: kort oplichten zodat de reis opvalt */
.register.wisselt{ filter:brightness(1.45) saturate(1.15); z-index:2 }

/* ---------- bladeren ---------- */

.boek-nav{
  flex:none; display:flex; align-items:center; justify-content:center; gap:1.1rem;
  padding:.7rem 0 .3rem;
}
.nav-knop{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-2); background:rgba(244,234,216,.05);
  color:var(--cream); font-size:1.15rem; line-height:1;
  display:grid; place-items:center;
  transition:background .2s, border-color .2s, opacity .2s;
}
.nav-knop:hover:not(:disabled){ background:rgba(244,234,216,.12); border-color:var(--gold) }
.nav-knop:disabled{ opacity:.28; cursor:not-allowed }
.nav-teller{
  font-family:var(--serif); font-size:.8rem; color:rgba(244,234,216,.55);
  min-width:4.5rem; text-align:center; font-variant-numeric:tabular-nums;
}

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

.kaart-voet{
  position:relative; z-index:2; flex:none;
  background:var(--ink); border-top:1px solid var(--line);
}
.kaart-voet-inner{
  max-width:46rem; margin:0 auto;
  padding:1.1rem clamp(1.2rem,5vw,2rem) .9rem;
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  justify-content:center; align-items:center;
}
.voet-lijn{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8rem; color:rgba(244,234,216,.68);
}
.voet-lijn .ico-svg{ color:var(--gold) }
.voet-lijn a:hover,.voet-lijn a:focus-visible{ color:var(--gold) }
.voet-afhaal{ font-size:.8rem; color:rgba(244,234,216,.5) }
.voet-afhaal a{ color:var(--gold); font-weight:600 }
.voet-afhaal a:hover,.voet-afhaal a:focus-visible{ text-decoration:underline; text-underline-offset:3px }

/* ---------- opengeslagen boekje op grote schermen ---------- */

@media (min-width:900px){
  .boek-omgeving{ padding:.6rem 150px 0 }
  .boek{ max-width:1000px }
  .register{
    --reg-b:138px;
    writing-mode:horizontal-tb;
    width:var(--reg-b); padding:.42rem .7rem;
    font-size:.6rem; text-align:center;
  }
  .register.links{ text-align:right }
  .register.rechts{ text-align:left }
  .kaart-keuze{ justify-content:center }
  .g-naam{ font-size:.92rem }
  .g-prijs{ font-size:.92rem }
  .g-desc{ font-size:.775rem }
}

/* ---------- vangnet: gewone doorlopende lijst ---------- */

.als-lijst{
  flex:1; max-width:46rem; width:100%;
  margin:0 auto; padding:1.4rem clamp(1.2rem,5vw,2rem) 2rem;
}
.als-lijst .rubriek{ margin-bottom:2.2rem }
.als-lijst .rubriek-kop{
  padding-bottom:.6rem; border-bottom:1px solid rgba(227,178,60,.28);
  margin:0 0 1rem;
}
.als-lijst .rubriek-kop h3{ font-size:1.25rem }
.als-lijst .rubriek-kop .ico-svg{ width:1.25rem; height:1.25rem }
.als-lijst .gerechten{ gap:1.1rem }
.als-lijst .g-naam,.als-lijst .g-prijs{ font-size:1rem }
.als-lijst .g-desc{ font-size:.85rem }

/* ---------- minder beweging ---------- */

@media (prefers-reduced-motion:reduce){
  .omslaand{ display:none !important }
  .register{ transition:none }
  *{ animation:none !important }
}

/* ---------- afdrukken ---------- */

@media print{
  .bg,.kaart-keuze,.boek-nav,.registers,.omslaand,.site-credit{ display:none !important }
  body.kaart-pagina{ background:#fff; color:#111; display:block }
  .boek-omgeving{ padding:0; perspective:none; display:block }
  .boek{ display:block; height:auto; max-width:none }
  .blad{ position:static }
  .pagina{
    position:static; height:auto; background:none; border:0; box-shadow:none;
    break-after:page; padding:1cm;
  }
  .pagina-inhoud{ overflow:visible }
  .sectie-band h2,.rubriek-kop h3,.g-naam,.g-prijs{ color:#111 }
  .sectie-band{ border-bottom-color:#999 }
  .g-desc,.rubriek-note,.g-herkomst{ color:#444 }
  .g-leader{ border-bottom-color:#bbb }
  .kaart-voet{ background:none; border-top:1px solid #ccc }
  .voet-lijn{ color:#111 }
}