/* Wat de spiegel NIET meebracht.
 *
 * De 36 stylesheets van de live site dekken alles wat je op het scherm ziet, met één
 * gat: de basisopmaak van de dialoog waarin Elementor Pro zijn popups zet. Die zit in
 * een bestand dat Elementor pas inlaadt op het moment dat een popup opent, dus hij komt
 * niet mee bij het spiegelen van de pagina.
 *
 * ⚠️ Dat gat is niet cosmetisch: het mobiele menu ís die popup. Zonder deze regels valt
 * het menu als een gewoon blok onderaan de pagina in plaats van als een paneel over het
 * scherm.
 *
 * Elke waarde hieronder is GEMETEN op bonbon-antwerp.be op 17-9-2026 bij 390 px met de
 * popup open, niet geschat. Wat de spiegel al levert staat er bewust niet in.
 */

.elementor-popup-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: flex-end;
  background-color: rgb(0 0 0 / .7);
  pointer-events: all;
}

.elementor-popup-modal .dialog-widget-content {
  position: absolute;
  inset: 0;
}

/* ⚠️ Elementor verbergt elk popupsjabloon in de pagina met
   `[data-elementor-type="popup"] { display: none }`, en zijn eigen script zette dat om
   op het moment van openen. Zonder deze regel staat het venster wel open maar is het
   leeg: gemeten 0 zichtbare menulinks tegenover 4 op live. */
.elementor-popup-modal [data-elementor-type="popup"] { display: block; }

.elementor-popup-modal .dialog-message {
  display: flex;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* De pagina eronder mag niet meescrollen zolang het menu openstaat.
   Live zet dezelfde class en komt daar op `overflow: hidden` uit. */
body.dialog-prevent-scroll { overflow: hidden; }

/* Het paneel schuift van rechts in, zoals de popup-instelling op live zegt:
   entrance_animation fadeInRight, duur 1,2 s. Die duur staat al in post-207.css. */
@keyframes bb-inRight {
  from { opacity: 0; transform: translate3d(100%, 0, 0); }
  to   { opacity: 1; transform: none; }
}
.elementor-popup-modal .dialog-widget-content.animated.fadeInRight {
  animation-name: bb-inRight;
}
@media (prefers-reduced-motion: reduce) {
  .elementor-popup-modal .dialog-widget-content.animated { animation: none; }
}


/* ── Naar de inhoud springen ──────────────────────────────────────────────────────
   Onzichtbaar tot hij focus krijgt, dan een gewone knop in de huisstijl. Iemand die met
   het toetsenbord navigeert hoeft zo niet op elke pagina door de hele kop heen. */
.bb-overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2147483001;
  padding: .75rem 1.25rem;
  background: var(--e-global-color-primary, #421419);
  color: var(--e-global-color-text, #F9F3E7);
  border-radius: 0 0 4px 0;
  font-size: .9rem;
  text-decoration: none;
}
.bb-overslaan:focus {
  left: 0;
  outline: 2px solid var(--e-global-color-text, #F9F3E7);
  outline-offset: -4px;
}


/* ── Klikbare contactgegevens in de voettekst ───────────────────────────────────
   De link erft alles van de span eromheen, zodat de voettekst er hetzelfde uitziet.
   Alleen bij hover en bij toetsenbordfocus laat hij zien dat hij klikbaar is. */
.bb-contactlink {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.bb-contactlink:hover,
.bb-contactlink:focus-visible { border-bottom-color: currentColor; }
.bb-contactlink:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }


/* ═══ HET MOBIELE MENU AFGEWERKT ════════════════════════════════════════════════
 * Thierry, 18-9-2026: *"deze menu staat niet netjes gecentreerd, ik kan ook niet
 * wegklikken er mist een kruisje of iets"*.
 *
 * ✓ Gemeten op 390x844: de vier links stonden op y=212 tot 400, dus in de bovenste helft
 *   met 440 px leegte eronder. En er zat een tweede hamburger midden bovenaan: de
 *   nav-toggle van Elementor die in het popup-sjabloon zelf zit en daar niets doet.
 */

/* Het paneel vult het scherm, dus de inhoud hoort in het midden. */
.elementor-popup-modal .dialog-widget-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  padding: clamp(4.5rem, 11vh, 6rem) 1.5rem clamp(4.5rem, 11vh, 6rem);
  box-sizing: border-box;
}

/* ⚠️ De nav-toggle binnen het popup-sjabloon weg. Buiten de popup blijft hij nodig,
   want dat is de knop waarmee je het menu opent. Vandaar de scope. */
.elementor-popup-modal .elementor-menu-toggle,
.elementor-popup-modal a.elementor-icon[href^="#elementor-action"] { display: none !important; }

/* ⚠️ Het popup-sjabloon is als MOBIEL-ONLY gebouwd.
 * ✓ Gemeten: de container draagt `elementor-hidden-desktop elementor-hidden-tablet`, en
 * op 834 px stond die dus op display:none. Het venster ging wel open, maar er viel niets
 * te zien. Op de live Elementor-site kreeg tablet in plaats daarvan een uitklapmenu, en
 * dat werd door het script van Elementor open- en dichtgeklapt. Zonder dat script had
 * tablet helemaal geen werkende navigatie meer.
 *
 * Binnen een geopend menu gelden die verbergklassen niet. Eén menu voor elk smal scherm. */
.elementor-popup-modal .elementor-hidden-desktop,
.elementor-popup-modal .elementor-hidden-tablet,
.elementor-popup-modal .elementor-hidden-mobile { display: flex !important; }

/* ⚠️ Binnen de popup is er maar één menu, op elk formaat.
 * Gemeten op 834 px: de popup ging open maar `.elementor-nav-menu--main` had hoogte 0 en
 * `.elementor-nav-menu--dropdown` stond op display:none. Elementor wisselt tussen die
 * twee op zijn eigen mobiele breekpunt, en dat wisselen deed zijn script. Zonder dat
 * script is er niets dat de juiste van de twee openzet, en op tablet viel het tussen wal
 * en schip: wél een open venster, geen zichtbare links.
 *
 * Binnen de popup hoort altijd de hoofdvariant te staan, ongeacht de breedte. */
.elementor-popup-modal .elementor-nav-menu--main,
.elementor-popup-modal .elementor-nav-menu--main > .elementor-nav-menu,
.elementor-popup-modal .elementor-nav-menu--main .elementor-nav-menu > li { display: block !important; }
.elementor-popup-modal .elementor-nav-menu--dropdown { display: none !important; }

/* De links zelf: ruimer, en een raakvlak dat de hele breedte pakt. */
.elementor-popup-modal .elementor-nav-menu { width: 100%; }
.elementor-popup-modal .elementor-nav-menu li { width: 100%; }
.elementor-popup-modal .elementor-nav-menu a.elementor-item {
  display: block;
  width: 100%;
  padding-block: 1.1rem;
  text-align: center;
}

/* Het kruisje. Rechtsboven, 48x48, waar iedereen het zoekt.
 *
 * ⚠️ `.elementor-popup-modal .bb-sluit` en niet alleen `.bb-sluit`.
 * ✓ Gemeten: `.elementor-kit-42 button { background-color: var(--e-global-color-text);
 *   border: 25px solid #fff; border-radius: 0; box-shadow: 0 0 10px }` is (0,1,1) en
 *   verslaat één klasse. Gevolg: een wit vierkant van 50x50 met een schaduw achter het
 *   kruisje, in plaats van een open cirkel. Thierry: *"die kader bij die X moet weg he"*.
 *   Datzelfde kit kaapte eerder al de FAQ-kop en de voettekstkopjes. Twee klassen = (0,2,0).
 */
.elementor-popup-modal .bb-sluit,
.bb-sluit {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  inset-inline-end: 1rem;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgb(249 243 231 / .28);
  border-radius: 50%;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.bb-sluit span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 1.5px;
  background: #F9F3E7;
  border-radius: 1px;
}
.bb-sluit span:first-child { translate: -50% -50%; rotate: 45deg; }
.bb-sluit span:last-child  { translate: -50% -50%; rotate: -45deg; }
.elementor-popup-modal .bb-sluit:hover,
.elementor-popup-modal .bb-sluit:focus-visible { border-color: #F9F3E7; background-color: rgb(249 243 231 / .08); }
.bb-sluit:focus-visible { outline: 2px solid #F9F3E7; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bb-sluit { transition: none; } }

/* Zolang het menu open staat, geen zwevers eroverheen.
 * ✓ Gemeten: de Zenchef-balk en de taalkiezer lagen op het open menu, allebei met een
 * hogere z-index dan het paneel. Een modaal scherm hoort het enige te zijn dat je ziet.
 * `dialog-prevent-scroll` staat op de body zolang de popup open is. */
body.dialog-prevent-scroll iframe[class*="ZC_sdk"],
body.dialog-prevent-scroll div[class*="ZC_sdk"],
body.dialog-prevent-scroll .gtranslate_wrapper,
body.dialog-prevent-scroll #gt_float_wrapper { display: none !important; }

.bb-menuactie {
  margin-top: clamp(2rem, 6vh, 3.5rem);
  display: flex;
  justify-content: center;
}


/* ── De kopbalk hoort bovenop de inhoud ──────────────────────────────────────────
 * 🔴 Gemeten 18-9-2026 op 834 px, en identiek op de live Elementor-site: de menuknop is
 * daar 44x44 en zichtbaar, maar `document.elementFromPoint` op het midden ervan geeft
 * `DIV.elementor-element-ec18ad8` terug, de eerste container van de pagina. De knop is
 * dus niet aan te tikken. Een programmatische `.click()` werkte wel, en juist dát verschil
 * verraadde het: het lag niet aan de afhandeling maar aan wat eroverheen ligt.
 *
 * ✓ De oorzaak: de kopbalk staat op `position: static; z-index: auto` en de containers
 * eronder op `position: relative`. Een gepositioneerd element schildert boven een statisch
 * element in dezelfde stapelcontext, ongeacht de volgorde in de HTML.
 *
 * ⚠️ Dit is een bestaand euvel van de live site, geen regressie van de spiegel. Op een
 * telefoon viel het niet op omdat de hamburger daar verder naar rechts staat, buiten het
 * bereik van de container die eroverheen ligt.
 */
header,
.elementor-location-header {
  position: relative;
  z-index: 100;
}