/* =====================================================================
   Mobiel menu (#39). Alleen onder 981px, waar Divi het hamburgermenu toont.
   Open/dicht regelt includes/js/mobiel-menu.js met de klassen die Divi zelf
   ook gebruikt (.mobile_nav.opened / .closed); de hoogte van de header zet
   het script in --opsy-kop.
   ===================================================================== */

@media (max-width: 980px) {

  /* Sticky na scroll, net als op desktop. Divi geeft #page-container al
     een padding-top ter hoogte van de header (et_fixed_nav), dus de inhoud
     schuift niet onder de header. */
  .et_fixed_nav #main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  /* Ingelogd: de adminbalk is hier 46px. Tot 600px scrollt hij mee weg;
     daar schuift het script de header mee naar boven. */
  .admin-bar.et_fixed_nav #main-header {
    top: 46px;
  }

  /* Uitklapmenu: volle breedte en volle hoogte onder de header. De header
     blijft zichtbaar, met het kruisje om te sluiten. */
  #et_mobile_nav_menu .et_mobile_menu {
    position: fixed;
    top: var(--opsy-kop, 80px);
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100vh - var(--opsy-kop, 80px));
    height: calc(100dvh - var(--opsy-kop, 80px));
    margin: 0;
    padding: 16px 5% 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: none;
    display: none;
  }

  #et_mobile_nav_menu .mobile_nav.opened .et_mobile_menu {
    display: block;
    animation: opsy-menu-in .2s ease-out;
  }

  /* Grotere tikvlakken nu er ruimte is (minimaal 44px hoog). */
  #et_mobile_nav_menu .et_mobile_menu li a {
    font-size: 18px;
    padding: 12px 5%;
  }

  #et_mobile_nav_menu .et_mobile_menu li li a {
    font-size: 16px;
  }

  /* 'Aanbod' en andere kopjes zonder pagina (link '#'): geen link-uiterlijk. */
  #et_mobile_nav_menu .et_mobile_menu a[href="#"] {
    cursor: default;
    background: none;
    opacity: 1;
  }

  /* Hamburger wordt een kruisje als het menu open is (ETmodules 'M'). */
  #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: "M";
  }

  #et_mobile_nav_menu .mobile_menu_bar:focus-visible {
    outline: 2px solid var(--op-teal-700, #00776E);
    outline-offset: 2px;
  }

  /* De pagina eronder scrollt niet mee zolang het menu open is. */
  html.opsy-menu-open,
  html.opsy-menu-open body {
    overflow: hidden;
  }
}

@keyframes opsy-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #et_mobile_nav_menu .mobile_nav.opened .et_mobile_menu {
    animation: none;
  }
}