/* Mobiel uitklapmenu: paneel groeit voorbij het scherm.

   _MENU_MOBIEL_20261028

   Gemeten op https://phrona.dev/ met headless Chromium (390x844):
   het uitgeklapte paneel is 1185px hoog in een venster van 844px, heeft geen
   eigen scroll, en de onderste vier hoofditems (Prijzen, Account aanmaken,
   Documentatie, Over ons) zijn onbereikbaar. Ook niet door te scrollen: het
   paneel scrollt niet mee met de pagina.

   Oorzaak: in style.css staat binnen @media (max-width: 1023px)
   `.nav { position: absolute; inset: 100% 0 auto; ... }` zonder max-height en
   zonder overflow. Het paneel groeit dus mee met de inhoud en verdwijnt achter
   de onderkant van het scherm.

   Deze regel begrenst het paneel tot het venster en geeft het een eigen scroll.
   De hoogte van de sticky header komt uit de bestaande variabele --header-h
   (77px), niet uit een hard getal.

   Gemeten resultaat na toepassing (390x844): paneel 767px, past binnen 844px,
   interne scroll ja, "Account aanmaken" in beeld en aanklikbaar.
   Ook gemeten op 390x700, 390x600, 768x1024 en 1023x800: overal past het paneel
   en is elk item bereikbaar.

   WAAROM HIER EN NIET IN style.css: het theme is van Sluggy en die werkt er op
   dit moment in. Deze CSS wordt door de plugin ingeladen en raakt niets anders
   aan dan het uitgeklapte menu onder 1024px. Zodra Sluggy het overneemt in
   style.css kan dit bestand weg. */

@media (max-width: 1023px) {
  .nav.is-open {
    max-height: calc(100dvh - var(--header-h, 77px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}