/* Mega menu – 1–2 kolommen: compact & gecentreerd onder trigger; 3+ kolommen: gecentreerd mega
   Gebruikt thema-vars: --ds-border, --ds-primary
*/

:root{
  --dl-container:   1420px;
  --dl-mega-radius: 10px;
  --dl-mega-shadow: 0 20px 50px rgba(15,23,42,.10);

  --dl-single-min:  240px; /* prettige min-breedte voor 1–2 kolommen */
  --dl-single-max:  420px; /* clamp + edge-guard */
}

body{ overflow-x:hidden; }

.nl-nav--mega{
  border-bottom:2px solid var(--ds-border);
  position:relative;
  z-index:1020;
}

/* ================= DESKTOP ================= */
@media (min-width:992px){

  /* basis: verborgen paneel */
  .nl-nav--mega .dropdown-menu-mega.dropdown-menu-fw{
    position:absolute;
    top:100%;
    border:none;
    border-radius:var(--dl-mega-radius);
    box-shadow:var(--dl-mega-shadow);
    overflow:hidden;
    background:#fff;
    z-index:1030;

    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(6px);
    transition:
      opacity .18s cubic-bezier(.2,.8,.2,1),
      transform .18s cubic-bezier(.2,.8,.2,1),
      visibility 0s linear .18s,
      border-color .18s cubic-bezier(.2,.8,.2,1);
    border-top:2px solid var(--ds-border);
  }

  /* ========== 3+ kolommen => containergecentreerd mega ========== */
  .nl-nav--mega .nav-item.dropdown.cols-3plus > .dropdown-menu-mega.dropdown-menu-fw{
    left:50% !important; right:auto;
    width:min(100%, var(--dl-container));
    max-width:100%;
    transform:translateX(-50%) translateY(6px);
  }
  .nl-nav--mega .nav-item.dropdown.cols-3plus.show > .dropdown-menu-mega.dropdown-menu-fw{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
    border-top-color:var(--ds-primary);
    transition-delay:0s,0s,0s,0s;
  }

  /* ========== 1–2 kolommen => gecentreerd onder de trigger ========== */
  /* overschrijf .position-static zodat absolute t.o.v. LI uitlijnt */
  .nl-nav--mega .nav-item.dropdown.position-static.cols-1,
  .nl-nav--mega .nav-item.dropdown.position-static.cols-2{
    position:relative !important;
  }

  .nl-nav--mega .nav-item.dropdown.cols-1 > .dropdown-menu-mega.dropdown-menu-fw,
  .nl-nav--mega .nav-item.dropdown.cols-2 > .dropdown-menu-mega.dropdown-menu-fw{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) translateY(6px);
    width:max-content;
    min-width:var(--dl-single-min);
    max-width:min(var(--dl-single-max), calc(100vw - 32px));
  }
  .nl-nav--mega .nav-item.dropdown.cols-1.show > .dropdown-menu-mega.dropdown-menu-fw,
  .nl-nav--mega .nav-item.dropdown.cols-2.show > .dropdown-menu-mega.dropdown-menu-fw{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
    border-top-color:var(--ds-primary);
    transition-delay:0s,0s,0s,0s;
    margin-top:8px;
  }

  /* Binnenste container in dropdown neutraliseren */
  .nl-nav--mega .dropdown-menu-mega.dropdown-menu-fw > .container-xl{
    max-width:none;
    padding-inline:1.0rem;
  }

  /* Kolomgrid (dynamisch via --cols) */
  .dropdown-menu-columns{
    display:grid;
    gap:1.25rem;
    grid-template-columns:repeat(var(--cols,4), minmax(0,1fr));
    padding-block:1.25rem;
  }
  /* 1–2 kolommen: stacked (compact) */
  .nl-nav--mega .nav-item.dropdown.cols-1 .dropdown-menu-columns,
  .nl-nav--mega .nav-item.dropdown.cols-2 .dropdown-menu-columns{ --cols:1; }
  /* 3+ kolommen: 3 of meer */
  .nl-nav--mega .nav-item.dropdown.cols-3plus .dropdown-menu-columns{ --cols:4; }

  .dropdown-menu-column .dropdown-header{
    font-size:12px; text-transform:uppercase; letter-spacing:.08em;
    color:#64748b; margin-bottom:.25rem; font-weight:700;
  }
  .dropdown-item{
    padding:.45rem .25rem; color:#0f172a; border-radius:8px;
    transition:background-color .18s cubic-bezier(.2,.8,.2,1), color .18s cubic-bezier(.2,.8,.2,1);
  }
  .dropdown-item:hover, .dropdown-item:focus{
    color:#fff; background:var(--ds-primary);
    outline:none;
  }

  /* Hover-bridge tegen gap */
  .nl-nav--mega .dropdown-menu-mega .mega-bridge{
    position:absolute; left:0; right:0; top:-14px; height:14px;
    content:""; display:block;
  }

  /* Micro-underline hoofdnav */
  .nl-nav--mega .nav-link{ position:relative; }
  .nl-nav--mega .nav-link::after{
    content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
    background:currentColor; opacity:0; transform:scaleX(.6);
    transition:transform .18s cubic-bezier(.2,.8,.2,1), opacity .18s cubic-bezier(.2,.8,.2,1);
  }
  .nl-nav--mega .nav-link:hover::after,
  .nl-nav--mega .nav-item.show > .nav-link::after{ opacity:.9; transform:scaleX(1); }

  .nl-nav--mega .nav-item.dropdown > .nav-link.dropdown-toggle::after{ display:none; }

  /* ruimte tussen knoppen */
  .nl-nav--mega .navbar-nav .nav-item{ margin-right:.5rem; }
  .nl-nav--mega .navbar-nav .nav-item:last-child{ margin-right:0; }
}

/* ================= MOBIEL ================= */
/* ================= MOBIEL (fix: toon wanneer .show op het menu staat) ================= */
@media (max-width:991.98px){
  .nl-nav--mega .navbar-collapse{ overflow: visible; }

  /* basis: static binnen de collapse; verberg via display i.p.v. opacity/visibility */
  .nl-nav--mega .dropdown-menu-mega.dropdown-menu-fw{
    position: static;
    left: auto !important;
    right: auto;
    width: 100%;
    margin-top: .25rem;
    border-radius: 10px;
    border: 1px solid var(--ds-border);
    background: #fff;
    box-shadow: none;

    /* laat Bootstrap het togglen doen */
    display: none;
    transform: none;
    transition: none;
  }
  /* zichtbaar wanneer het menu zelf .show krijgt (Bootstrap) */
  .nl-nav--mega .dropdown-menu-mega.dropdown-menu-fw.show{
    display: block;
  }

  /* sommige builds zetten .show op het <li> – vang dat ook af */
  .nl-nav--mega .nav-item.dropdown.show > .dropdown-menu-mega.dropdown-menu-fw{
    display: block;
  }

  /* nested content stacked en leesbaar */
  .dropdown-menu-columns{ display: block; padding-block: .5rem; }
  .dropdown-menu-column{ padding: .25rem .5rem; }
  .dropdown-item{ padding: .45rem .5rem; border-radius: 6px; color: #0f172a; }
  .mega-promo{ display: none; }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .nl-nav--mega .dropdown-menu-mega.dropdown-menu-fw{ transition:none !important; }
  .nl-nav--mega .nav-link::after{ transition:none !important; }
}