/* ============================================================
   EXCELLENT LIFTEN - MEGA-MENU CSS (external, cached)
   Restored 2026-04-21 na Fase 2 regressie (#284)
   Sitewide via <link rel="stylesheet" href="/mega-menu.css?v=20260421a">
   ============================================================ */

/* Nav base */
nav.primary{position:static;gap:24px}
nav.primary .menu-item{position:relative;display:inline-flex;align-items:center}
nav.primary .menu-trigger{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
nav.primary .menu-trigger .caret{font-size:10px;opacity:.75;transition:transform .2s}
nav.primary .menu-item:hover .menu-trigger .caret,
nav.primary .menu-item.open .menu-trigger .caret,
nav.primary .menu-trigger[aria-expanded="true"] .caret{transform:rotate(180deg)}
nav.primary .menu-trigger.active{color:var(--gold);border-color:var(--gold)}

/* Dropdown panel (desktop) — UNIFORM compact width (~500px target) */
nav.primary .mega-menu{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:240px;background:#0c1b36;border:1px solid rgba(232,231,228,.12);
  border-top:3px solid var(--gold);
  padding:10px 14px;display:none;opacity:0;pointer-events:none;
  box-shadow:0 24px 64px rgba(0,0,0,.55),0 0 0 1px rgba(212,175,55,.08);
  z-index:1500;transition:opacity .18s ease,transform .18s ease;
}
nav.primary .menu-item:hover > .mega-menu,
nav.primary .menu-item.open > .mega-menu,
nav.primary .menu-item:focus-within > .mega-menu{
  display:block;opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
/* FIRST menu-item (Producten, wide panel): anchor to LEFT edge of trigger */
nav.primary .menu-item:first-of-type > .mega-menu{left:0;right:auto;transform:translateX(0) translateY(6px)}
nav.primary .menu-item:first-of-type:hover > .mega-menu,
nav.primary .menu-item:first-of-type.open > .mega-menu,
nav.primary .menu-item:first-of-type:focus-within > .mega-menu{transform:translateX(0) translateY(0)}
/* LAST menu-item (Bedrijf, 260px): anchor to RIGHT edge of trigger */
nav.primary .menu-item:last-of-type > .mega-menu{left:auto;right:0;transform:translateX(0) translateY(6px)}
nav.primary .menu-item:last-of-type:hover > .mega-menu,
nav.primary .menu-item:last-of-type.open > .mega-menu,
nav.primary .menu-item:last-of-type:focus-within > .mega-menu{transform:translateX(0) translateY(0)}
/* Invisible bridge so hover does not break when mouse crosses the gap */
nav.primary .menu-item.has-sub::after{
  content:"";position:absolute;top:100%;left:-10px;right:-10px;height:14px;
}

/* Column layouts — UNIFORM WIDTH ~500px, past op viewports vanaf ~1100px */
nav.primary .mega-4col{width:min(92vw,520px);display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
nav.primary .mega-2col{width:min(92vw,480px);display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
nav.primary .mega-1col{width:240px;display:flex;flex-direction:column;gap:0}
/* Safety: prevent any horizontal scrollbar from briefly appearing when dropdown opens */
html,body{overflow-x:hidden}

nav.primary .mega-col h4{
  color:var(--gold);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 4px 0;padding-bottom:3px;
  border-bottom:1px solid rgba(212,175,55,.2);
}
nav.primary .mega-col a,
nav.primary .mega-1col a{
  display:block;padding:2px 0;font-size:12px;line-height:1.3;letter-spacing:.01em;
  text-transform:none;font-weight:500;color:var(--ink2);
  border-bottom:1px solid transparent;transition:color .15s,padding-left .15s;
}
nav.primary .mega-col a:hover,
nav.primary .mega-1col a:hover{color:var(--gold);padding-left:4px;border-bottom-color:transparent}

nav.primary .mega-sep{
  display:block;margin:5px 0 1px 0;padding-top:4px;font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(232,231,228,.45);
  border-top:1px solid rgba(232,231,228,.08);
}
nav.primary .mega-cta-col a.mega-cta{color:var(--gold);font-weight:600}
nav.primary .mega-cta-col a.mega-cta:hover{color:#fff;padding-left:4px}
nav.primary .mega-download{
  margin-top:4px;padding:5px 7px;background:rgba(212,175,55,.08);
  border:1px solid rgba(212,175,55,.25);border-radius:4px;color:#fff !important;font-size:11px;
}
nav.primary .mega-download:hover{background:rgba(212,175,55,.18)}

/* Hamburger (mobile only) */
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;padding:10px;
  margin-left:auto;order:2;
}
.nav-toggle span{
  display:block;width:26px;height:2px;background:var(--ink2);margin:5px 0;
  transition:transform .25s,opacity .25s;border-radius:2px;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--gold)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--gold)}

/* ---------- MOBILE / TABLET (=1000px): hamburger + off-canvas panel ---------- */
@media (max-width:1000px){
  .nav-toggle{display:block}
  header.site .nav{flex-wrap:wrap}
  nav.primary{
    display:none;order:3;flex-basis:100%;
    flex-direction:column;gap:0;padding:14px 4px 18px;margin-top:8px;
    border-top:1px solid rgba(232,231,228,.08);
    max-height:calc(100vh - 80px);overflow-y:auto;
  }
  nav.primary.open{display:flex}
  nav.primary .menu-item{display:block;width:100%}
  nav.primary .menu-trigger{
    display:flex;justify-content:space-between;width:100%;
    padding:14px 8px;border-bottom:1px solid rgba(232,231,228,.06) !important;
    font-size:14px;
  }
  nav.primary .menu-item.has-sub::after{display:none}
  nav.primary .mega-menu{
    position:static;transform:none;display:none;opacity:1;pointer-events:auto;
    width:100%;min-width:0;padding:10px 14px 18px;margin:0;
    background:rgba(0,0,0,.25);border:0;border-left:3px solid var(--gold);
    box-shadow:none;
  }
  nav.primary .menu-item.open > .mega-menu{display:block}
  nav.primary .mega-4col,
  nav.primary .mega-2col,
  nav.primary .mega-1col{display:flex;flex-direction:column;gap:4px;width:auto}
  nav.primary .mega-col{margin-bottom:12px}
  nav.primary .mega-col h4{margin-bottom:6px;padding-bottom:4px}
  .header-right{order:1;margin-left:auto}
}
@media (max-width:640px){
  .nav-toggle{padding:8px;margin-right:-4px}
  header.site .nav{padding:12px 16px}
  .header-right .tel{display:none}
}