/* HAF mobiel menu — drill-down drawer (2026-08-26)
   ------------------------------------------------------------------
   ALLES staat in @media (max-width:980px). Boven die grens bestaat er
   geen enkele regel uit dit bestand, dus de desktop kan niet geraakt
   worden. 980px is dezelfde grens die haf-mega.js gebruikt om de
   desktop-hoverlogica NIET te binden.

   Opbouw: één schermvullende lade met twee niveaus. Niveau 1 is de
   sectielijst, niveau 2 schuift eroverheen met de inhoud van het
   bijbehorende megamenu-paneel. Zie haf-mobile.js.
   Huiskleuren: #171d2e blauw, #ffab38 accent, #bf1f4b kolomkoppen.
------------------------------------------------------------------ */
@media (max-width: 980px) {

  /* Divi's eigen mobiele uitklapmenu vervangen we volledig. */
  .et_mobile_menu { display: none !important; }

  /* Boven Popup Maker (z-index 1999999999) en de Divi-header (1000000):
     een geopend menu hoort de bovenste laag te zijn. */
  .hafm-scrim {
    position: fixed; inset: 0; z-index: 2000000000;
    background: rgba(9, 13, 24, .55);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
  }
  .hafm-scrim.hafm-open { opacity: 1; visibility: visible; }

  .hafm {
    position: fixed; inset: 0; z-index: 2000000001;
    display: flex; flex-direction: column;
    background: #fff;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .34s cubic-bezier(.22,.75,.25,1), visibility .34s;
    font-family: inherit;
  }
  .hafm.hafm-open { transform: none; visibility: visible; }

  /* ── vaste balk bovenin ─────────────────────────────────────── */
  .hafm-bar {
    flex: 0 0 auto; position: relative;
    display: flex; align-items: center; gap: 4px;
    height: 62px; padding: 0 6px 0 14px;
    background: #171d2e; color: #fff;
  }
  .hafm-titel {
    flex: 1 1 auto; min-width: 0;
    font-size: 15px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .hafm-bar button {
    flex: 0 0 auto; width: 48px; height: 48px;
    display: grid; place-items: center;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: #fff; border-radius: 8px;
  }
  .hafm-bar button:active { background: rgba(255,255,255,.12); }
  .hafm-bar svg { width: 22px; height: 22px; fill: none;
    stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .hafm-terug { margin-left: -8px; }
  .hafm-terug[hidden] { display: none; }

  /* ── de twee niveaus ────────────────────────────────────────── */
  .hafm-panes { position: relative; flex: 1 1 auto; overflow: hidden; }
  .hafm-pane {
    position: absolute; inset: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 6px 0 40px;
    background: #fff;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22,.75,.25,1);
  }
  .hafm-pane[data-niveau="root"] { transform: none; }
  .hafm-pane.hafm-actief { transform: none; }
  /* de rootlijst schuift een stukje mee naar links: geeft diepte */
  .hafm-panes.hafm-diep .hafm-pane[data-niveau="root"] { transform: translateX(-22%); }

  /* ── niveau 1: sectierijen ──────────────────────────────────── */
  .hafm-rij {
    display: flex; align-items: center; width: 100%;
    gap: 12px; padding: 17px 18px;
    background: none; border: 0; border-bottom: 1px solid #eceef2;
    font-family: inherit; font-weight: 600; font-size: 17px; line-height: 1.25; color: #171d2e; text-align: left;
    text-decoration: none; cursor: pointer;
  }
  .hafm-rij:active { background: #f5f6f9; }
  .hafm-rij span { flex: 1 1 auto; }
  .hafm-rij svg { width: 18px; height: 18px; flex: 0 0 auto;
    fill: none; stroke: #9aa2b4; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round; }
  .hafm-rij.hafm-accent {
    margin: 14px 18px 0; width: calc(100% - 36px); border-radius: 10px;
    background: #bf1f4b; color: #fff; border-bottom: 0;
    justify-content: center; padding: 16px;
  }
  .hafm-rij.hafm-accent svg { stroke: #fff; }

  /* ── niveau 2: paneelinhoud ─────────────────────────────────── */
  .hafm-overzicht {
    display: flex; align-items: center; gap: 8px;
    margin: 4px 18px 2px; padding: 13px 0;
    font-family: inherit; font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase;
    color: #bf1f4b; text-decoration: none; border-bottom: 1px solid #eceef2;
  }
  .hafm-pane .haf-mega-col { padding: 20px 18px 4px; }
  .hafm-pane .haf-mega-col h3 {
    margin: 0 0 12px; padding: 0;
    font-family: inherit; font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .12em;
    text-transform: uppercase; color: #bf1f4b;
  }
  .hafm-pane .haf-menu-links { list-style: none; margin: 0; padding: 0; }
  .hafm-pane .haf-menu-links li { margin: 0; padding: 0; }
  .hafm-pane .haf-menu-links a {
    display: block; padding: 12px 0; text-decoration: none;
    border-bottom: 1px solid #f0f1f5;
  }
  .hafm-pane .haf-menu-links li:last-child a { border-bottom: 0; }
  .hafm-pane .haf-link-inner { display: block; }
  .hafm-pane .haf-link-inner strong {
    display: block; font-family: inherit; font-weight: 600; font-size: 16px; line-height: 1.3; color: #171d2e;
  }
  .hafm-pane .haf-link-inner strong + span {
    display: block; margin-top: 2px;
    font-family: inherit; font-weight: 400; font-size: 13.5px; line-height: 1.45; color: #6b7488;
  }
  .hafm-pane .haf-menu-links a:active .haf-link-inner strong { color: #bf1f4b; }

  .hafm-pane .haf-mega-card {
    margin: 22px 18px 0; padding: 22px;
    background: #171d2e; border-radius: 12px; color: #fff;
  }
  .hafm-pane .haf-mega-card h3 {
    margin: 0 0 8px; font-family: inherit; font-weight: 700; font-size: 18px; line-height: 1.25; color: #fff;
  }
  .hafm-pane .haf-mega-card p {
    margin: 0 0 16px; font-family: inherit; font-weight: 400; font-size: 14px; line-height: 1.6; color: #c3c9d6;
  }
  .hafm-pane .haf-cta-btn {
    display: block; text-align: center; padding: 14px 18px;
    background: #ffab38; color: #171d2e; border-radius: 8px;
    font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1.2; text-decoration: none;
  }

  /* geen achtergrondafbeeldingen of kolomrasters uit het desktoppaneel */
  .hafm-pane .haf-mega-panel { display: block; background: none; }

  /* pagina niet meescrollen achter de lade */
  body.hafm-vast { overflow: hidden; }

  @media (prefers-reduced-motion: reduce) {
    .hafm, .hafm-pane, .hafm-scrim { transition: none; }
    .hafm-panes.hafm-diep .hafm-pane[data-niveau="root"] { transform: none; }
  }
}

/* Boven 980px bestaat de lade niet; hard uitzetten voor het geval een
   oude open-state blijft hangen bij het draaien van het toestel. */
@media (min-width: 981px) {
  .hafm, .hafm-scrim { display: none !important; }
}