/* De menukaart-viewer, naar het model van Cobra House.
 *
 * ⚠️ Twee dingen die op 17-9-2026 stuk waren en waarom ze nu anders staan.
 *
 * 1. DE HOOGTE STUURT, NIET DE BREEDTE. De eerste versie zette `flex: 0 0 min(86%, 560px)`
 *    op het beeld. Chrome negeert een flex-basis die een percentage in een min() draagt en
 *    valt terug op de eigen breedte van het beeld: gemeten 1059 px breed en 1600 px hoog,
 *    één blad dat de hele pagina vulde. Thierry: "bombastisch en niet zoals cobra house".
 *    Cobra zet de bladen op één schermhoogte en laat er twee naast elkaar staan. Dat doet
 *    dit bestand nu ook: de hoogte is de maat, de breedte volgt uit de verhouding.
 *
 * 2. SPECIFICITEIT. `.elementor-kit-42 button` (0,1,1) wint van `.bb-kaart__knop` (0,1,0),
 *    dus de bordeaux knoppen werden crème en 82x66 in plaats van 48x48. Elke regel die
 *    tegen de kit in moet, staat daarom onder `.bb-kaart ...` geschreven.
 */

.bb-menu {
  --bb-blad-h: min(76vh, 860px);
  --bb-gat: 1.5rem;
  /* A4 staand. Vast, want exporteer.py snijdt elk blad op het paginavlak uit en
     controleert dat ze allemaal even groot zijn. */
  --bb-verhouding: 0.707;
  /* Eén afrondingswaarde voor de hele kaart, zodat blad, knopvak en vergrootvenster
     dezelfde hoek hebben. Cobra House rondt zijn bladen ook af. */
  --bb-rond: 12px;
  --bb-blad-b: calc(var(--bb-blad-h) * var(--bb-verhouding));
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* ⚠️ TWEE BLADEN NAAST ELKAAR, NOOIT MEER.
   Met alleen een hoogtegrens bepaalt de schermbreedte hoeveel er passen: op 1440 waren
   het er drie, op het scherm van Thierry vier. Thierry: "het moeten 2 pagina's naast
   elkaar zijn en geen 4". Daarom is de KAART zelf precies twee bladen breed en staat hij
   gecentreerd, zoals bij Cobra House. De rest schuift eronderdoor. */
.bb-kaart {
  position: relative;
  max-width: calc(2 * var(--bb-blad-b) + var(--bb-gat));
  margin-inline: auto;
}

.bb-kaart__spoor {
  display: flex;
  gap: var(--bb-gat);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Geen zijpadding meer: de kaart is zelf al precies twee bladen breed, dus het
     eerste blad hoort tegen de linkerrand van die kaart te staan. */
  padding: .25rem 0;
  scroll-padding-left: 0;
}
.bb-kaart__spoor::-webkit-scrollbar { display: none; }
.bb-kaart__spoor:focus-visible {
  outline: 2px solid var(--e-global-color-primary, #421419);
  outline-offset: 6px;
}

/* Twee grenzen, geen vaste maat. Het blad wordt zo groot als het mag van de hoogte én
   van de breedte, en behoudt zijn verhouding.
   ⚠️ Een vaste `height` alleen ging mis op mobiel: 620 px hoog gaf bij verhouding 0,66
   een blad van 410 px breed in een scherm van 390 px, dus het liep aan beide kanten
   van het scherm af. Met max-height én max-width past het altijd. */
/* Elk blad zit in een knop, zodat het met muis, toets en schermlezer te vergroten is.
   De knop mag zelf geen enkele opmaak meebrengen; de kit zet anders een achtergrond
   en padding op alles wat een <button> is. */
.bb-kaart .bb-kaart__vak {
  flex: 0 0 auto;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  scroll-snap-align: start;
  max-width: calc((100% - var(--bb-gat)) / 2);
  line-height: 0;
  border-radius: var(--bb-rond, 12px);
  box-shadow: 0 10px 30px rgb(0 0 0 / .18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.bb-kaart .bb-kaart__vak:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgb(0 0 0 / .24); }
.bb-kaart .bb-kaart__vak:focus-visible { outline: 2px solid var(--e-global-color-primary, #421419); outline-offset: 4px; }

.bb-kaart .bb-kaart__blad {
  display: block;
  width: auto;
  height: auto;
  max-height: var(--bb-blad-h);
  max-width: 100%;
  background: #fff;
  border-radius: var(--bb-rond, 12px);
}

.bb-kaart .bb-kaart__knop {
  position: absolute;
  top: calc(50% + 1rem);
  translate: 0 -50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background-color: var(--e-global-color-primary, #421419);
  color: var(--e-global-color-text, #F9F3E7);
  box-shadow: 0 4px 14px rgb(0 0 0 / .2);
  transition: opacity .2s ease, transform .2s ease;
}
.bb-kaart .bb-kaart__knop:hover { transform: scale(1.06); }
.bb-kaart .bb-kaart__knop[disabled] { opacity: .25; cursor: default; transform: none; }
.bb-kaart .bb-kaart__knop svg { width: 1.1rem; height: 1.1rem; display: block; }
/* Net buiten de kaart waar dat past, anders op de witmarge van het blad. Sinds de
   bladen op het paginavlak worden uitgesneden ligt daar echte witruimte, dus een knop
   valt er nooit meer op een gerecht. */
.bb-kaart__knop--vorige { left: -1.25rem; }
.bb-kaart__knop--volgende { right: -1.25rem; }
@media (min-width: 1280px) {
  .bb-kaart__knop--vorige { left: -4rem; }
  .bb-kaart__knop--volgende { right: -4rem; }
}
.bb-kaart .bb-kaart__knop:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.bb-kaart__teller {
  margin: 1rem 0 0;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--e-global-color-primary, #421419);
  opacity: .6;
}

/* ⚠️ Op mobiel gaan de pijlen ONDER de kaart staan, niet erover.
   Een blad van 320 px in een scherm van 390 px laat links en rechts te weinig over, dus
   de ronde knoppen kwamen bovenop de gerechten te liggen. Op de pagina waar iemand juist
   wil lezen wat er te eten is, is dat de slechtste plek die er is. */
@media (max-width: 767px) {
  .bb-menu { --bb-blad-h: min(66vh, 600px); --bb-gat: 1rem; }
  .bb-kaart { max-width: none; }

  .bb-kaart {
    display: grid;
    /* minmax(0,1fr) en niet 1fr: anders duwt de hint de middenkolom breder dan het
       scherm en loopt hij links en rechts van de pagina af in plaats van af te breken. */
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "spoor spoor  spoor"
      "vorig teller volgend";
    align-items: center;
    row-gap: .75rem;
  }
  .bb-kaart__spoor {
    grid-area: spoor;
    padding-inline: 1rem;
    scroll-padding-left: 1rem;
  }
  .bb-kaart__knop--vorige { grid-area: vorig; }
  .bb-kaart__knop--volgende { grid-area: volgend; }
  .bb-kaart__teller { grid-area: teller; margin: 0; }

  .bb-kaart .bb-kaart__vak { max-width: min(88vw, 480px); }
  .bb-kaart .bb-kaart__knop {
    position: static;
    translate: none;
    inset: auto;
    /* 44px is de ondergrens voor een raakvlak op een telefoon. Op 40 gemeten, dus
       een vinger raakt net zo vaak ernaast als erop. */
    width: 2.75rem;
    height: 2.75rem;
    justify-self: center;
    margin-inline: 1rem;
  }
}

/* iOS zet :focus-visible ook bij een gewone tik. Verzachten, niet weghalen.
   → patterns/ios-zet-focus-visible-ook-bij-een-tik */
@media (hover: none) and (pointer: coarse) {
  .bb-kaart .bb-kaart__knop:focus-visible { outline-color: rgb(249 243 231 / .5); }
  .bb-kaart .bb-kaart__knop:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-kaart__spoor { scroll-behavior: auto; }
  .bb-kaart .bb-kaart__knop { transition: none; }
}


/* ── Eén blad schermvullend ──────────────────────────────────────────────────────
   Twee bladen naast elkaar houdt een A4 op ongeveer 700 px hoog, en dan worden de
   ingredientenregels onder de gerechten krap. Hier leest iemand één pagina op volle
   hoogte. Alles staat onder `.bb-groot`, want de Elementor-kit zet anders zijn eigen
   achtergrond en padding op elke <button>. */
.bb-groot {
  position: fixed;
  inset: 0;
  /* Boven de zwevende Zenchef-widget. Die staat op een hoge z-index en dekte anders
     de rechterhelft van een vergrote menupagina af. */
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 2vw, 2rem);
  padding: clamp(.75rem, 3vw, 2.5rem);
  background: rgb(20 6 8 / .92);
  animation: bb-vervagen .18s ease-out;
}
.bb-groot[hidden] { display: none; }

.bb-groot .bb-groot__blad {
  max-width: min(100%, calc((100vh - 6rem) * var(--bb-verhouding, 0.707)));
  max-height: calc(100vh - 6rem);
  width: auto;
  height: auto;
  background: #fff;
  border-radius: var(--bb-rond, 12px);
  box-shadow: 0 20px 60px rgb(0 0 0 / .5);
}

.bb-groot .bb-groot__knop,
.bb-groot .bb-groot__sluit {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background-color: rgb(255 255 255 / .12);
  color: #F9F3E7;
  transition: background-color .2s ease, opacity .2s ease;
}
.bb-groot .bb-groot__knop:hover,
.bb-groot .bb-groot__sluit:hover { background-color: rgb(255 255 255 / .24); }
.bb-groot .bb-groot__knop[disabled] { opacity: .2; cursor: default; }
.bb-groot .bb-groot__knop svg,
.bb-groot .bb-groot__sluit svg { width: 1.2rem; height: 1.2rem; display: block; }
.bb-groot .bb-groot__sluit { position: absolute; top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); }

.bb-groot__teller {
  position: absolute;
  bottom: clamp(.75rem, 2vw, 1.5rem);
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: rgb(249 243 231 / .7);
}

/* De pagina eronder mag niet meescrollen zolang een blad vergroot is. */
body.bb-vast { overflow: hidden; }

@media (max-width: 767px) {
  /* Op een telefoon is er geen ruimte naast het blad: vegen doet het werk en de
     pijlen staan onderaan, net als bij de kaart zelf. */
  .bb-groot { flex-wrap: wrap; align-content: center; padding-bottom: 4.5rem; }
  .bb-groot .bb-groot__knop { position: absolute; bottom: 2.75rem; }
  .bb-groot .bb-groot__knop--vorige { left: 20%; }
  .bb-groot .bb-groot__knop--volgende { right: 20%; }
  .bb-groot .bb-groot__blad { max-height: calc(100vh - 9rem); }
  .bb-groot__teller { bottom: 3.6rem; }
}

@keyframes bb-vervagen { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .bb-groot { animation: none; }
  .bb-kaart .bb-kaart__vak { transition: none; }
  .bb-kaart .bb-kaart__vak:hover { transform: none; }
}