/* DHB Header — zwevende pill-header met megamenu en fullscreen mobiel menu */
.nhh-wrap{
  --nhh-accent:#FF4C00;
  --nhh-accent-2:#FF6A2A;
  --nhh-accent-3:#E8440A;
  --nhh-soft:#FF8A55;
  --nhh-dark:#141313;
  --nhh-font:'DHB Elms',ui-sans-serif,system-ui,sans-serif;
  --nhh-btn-grad:linear-gradient(135deg,var(--nhh-accent-2) 0%,var(--nhh-accent) 55%,var(--nhh-accent-3) 100%);
  --nhh-pill-bg:rgba(15,14,14,.38);
  --nhh-pill-border:rgba(255,255,255,.14);
  --nhh-top:20px;
  --nhh-side:24px;
  --nhh-maxw:1400px;
  --nhh-mega-1:#1D1D1D;
  --nhh-mega-2:#0F0E0E;
  --nb-accent:var(--nhh-accent);
  --nb-accent-2:var(--nhh-accent-2);
  --nb-accent-3:var(--nhh-accent-3);
  --nb-dark:var(--nhh-dark);
  position:relative;
  z-index:990;
  font-family:var(--nhh-font);
  /* Zonder eigen kleur erft de header die van het thema. Op de site was
     dat een grijsblauw dat in alles lekte wat zelf geen kleur zet. */
  color:#fff;
}

/* Kopkleur vastzetten.
   Koppen hier zetten alleen een lettertype en erven hun kleur van de
   wrapper. Overerving heeft geen specificiteit, dus de Elementor-kit of
   het thema wint daarvan en kleurt de koppen ineens blauw. De wrapper
   staat er dubbel in, zodat deze regel zwaarder weegt dan de kit. De
   eigen kleuren hieronder hebben de wrapper ook gekregen en winnen weer
   van deze regel. */
.nhh-wrap.nhh-wrap h1,
.nhh-wrap.nhh-wrap h2,
.nhh-wrap.nhh-wrap h3,
.nhh-wrap.nhh-wrap h4,
.nhh-wrap.nhh-wrap h5,
.nhh-wrap.nhh-wrap h6 {
	color: inherit;
}



/* Zwevend: wrap breekt uit naar volledige viewportbreedte (hoogte 0, dus geen
   scroll-impact), zodat de pill zich altijd op het scherm centreert — ook als
   de widget in een boxed of gecentreerde container staat. */
.nhh-wrap.nhh-floating{
  height:0;
  width:auto;
  max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
/* In zwevende modus mag de omliggende Elementor-sectie/container geen eigen
   hoogte innemen — anders ontstaat een lege balk boven de pagina. */
.elementor-section:has(.nhh-wrap.nhh-floating),
.e-con:has(.nhh-wrap.nhh-floating){
  padding:0!important;
  margin:0!important;
  min-height:0!important;
}
.elementor-column:has(.nhh-wrap.nhh-floating) > .elementor-widget-wrap{padding:0!important;}
.elementor-widget-dhb_header:has(.nhh-wrap.nhh-floating){margin:0!important;}
.nhh-wrap *{margin:0;padding:0;box-sizing:border-box;}
.nhh-wrap ul{list-style:none;}
.nhh-wrap a{text-decoration:none;}

/* ---------- Pill header ---------- */
.nhh-header{
  z-index:90;
  max-width:var(--nhh-maxw);
  background:var(--nhh-pill-bg);
  border:1px solid var(--nhh-pill-border);
  border-radius:999px;
  box-shadow:0 12px 40px rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  opacity:0;
  animation:nhh-drop .7s cubic-bezier(.22,.9,.3,1) .05s forwards;
}
.nhh-wrap.nhh-floating .nhh-header{
  position:absolute;
  top:var(--nhh-top);
  left:var(--nhh-side);
  right:var(--nhh-side);
  margin:0 auto;
}
.nhh-wrap:not(.nhh-floating) .nhh-header{
  position:relative;
  margin:var(--nhh-top) auto;
  width:calc(100% - 2 * var(--nhh-side));
}
.nhh-wrap.nhh-no-anim .nhh-header{opacity:1;animation:none;}
@keyframes nhh-drop{
  from{opacity:0;transform:translateY(-12px);}
  to{opacity:1;transform:none;}
}
.nhh-header-in{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px 10px 14px 26px;
}
.nhh-logo{display:inline-flex;align-items:center;flex:none;}
.nhh-logo img{
  height:var(--nhh-logo-h,48px);width:auto;display:block;max-width:none!important;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.35));
}

/* ---------- Navigatie ---------- */
.nhh-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:4px;
  list-style:none;
}
.nhh-nav > li{position:static;}
.nhh-nav > li > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14.5px;
  font-weight:500;
  white-space:nowrap;
  color:rgba(255,255,255,.85);
  padding:10px 18px;
  border-radius:999px;
  transition:color .18s ease,background-color .18s ease;
}
.nhh-nav > li > a::before{
  content:"";
  width:5px;height:5px;
  border-radius:50%;
  background:var(--nhh-accent);
  flex:none;
  opacity:0;
  margin-left:-13px;
  transition:opacity .18s ease,margin-left .18s ease;
}
.nhh-nav > li > a:hover,.nhh-nav > li:hover > a{
  color:#fff;
  background:rgba(255,255,255,.08);
}
.nhh-nav > li > a:hover::before,.nhh-nav > li:hover > a::before{opacity:1;margin-left:0;}

/* ---------- Megamenu ---------- */
.nhh-nav-chev{width:12px;height:12px;flex:none;transition:transform .2s ease;}
.nhh-nav li:hover .nhh-nav-chev{transform:rotate(180deg);}
.nhh-mega{
  position:absolute;
  top:calc(100% + 12px);
  left:0;right:0;
  transform:translateY(10px);
  background:
    radial-gradient(56% 60% at 86% -6%,color-mix(in srgb,var(--nhh-accent) 14%,transparent),transparent 66%),
    linear-gradient(180deg,var(--nhh-mega-1) 0%,var(--nhh-mega-2) 100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  box-shadow:0 40px 90px rgba(0,0,0,.5);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.nhh-mega::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--nhh-accent) 55%,transparent) 50%,transparent);
}
.nhh-mega::before{
  content:"";
  position:absolute;
  left:0;right:0;top:-14px;height:14px;
}
.nhh-nav li:hover .nhh-mega,
.nhh-nav li:focus-within .nhh-mega{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nhm-grid{display:grid;grid-template-columns:1.55fr 1fr;}
.nhh-mega.nhm-no-side .nhm-grid{grid-template-columns:1fr;}
.nhm-items{
  display:grid;grid-template-columns:1fr 1fr;
  gap:6px;padding:18px;
}
.nhm-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:14px;
  border:1px solid transparent;
  text-decoration:none;color:#fff;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease,background-color .18s ease,border-color .18s ease;
}
.nhh-nav li:hover .nhm-item,
.nhh-nav li:focus-within .nhm-item{
  opacity:1;transform:none;
  transition:opacity .32s ease var(--d,0s),transform .32s cubic-bezier(.22,.9,.3,1) var(--d,0s),background-color .18s ease,border-color .18s ease;
}
.nhm-item:hover{background:color-mix(in srgb,var(--nhh-accent) 7%,transparent);border-color:color-mix(in srgb,var(--nhh-accent) 40%,transparent);}
.nhm-ico{
  width:36px;height:36px;padding:8px;flex:none;color:var(--nhh-accent);
  border-radius:11px;
  background:color-mix(in srgb,var(--nhh-accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--nhh-accent) 16%,transparent);
  transition:background-color .18s ease,transform .18s ease;
  display:inline-flex;align-items:center;justify-content:center;
}
.nhm-ico svg{width:100%;height:100%;display:block;}
.nhm-item:hover .nhm-ico{background:color-mix(in srgb,var(--nhh-accent) 18%,transparent);transform:scale(1.06);}
.nhm-item-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.nhm-item-txt b{font-size:14px;font-weight:600;line-height:1.25;color:rgba(255,255,255,.94);transition:color .18s ease;}
.nhm-item-txt small{font-size:12px;color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nhm-item:hover .nhm-item-txt b{color:var(--nhh-accent);}
.nhm-item-arr{
  margin-left:auto;flex:none;color:var(--nhh-accent);
  opacity:0;transform:translate(-6px,4px);
  transition:opacity .18s ease,transform .18s ease;
}
.nhm-item-arr svg{width:12px;height:12px;display:block;}
.nhm-item:hover .nhm-item-arr{opacity:1;transform:none;}

/* rechterkolom (promo) */
.nhm-side{
  display:flex;flex-direction:column;gap:12px;
  padding:18px;border-left:1px solid rgba(255,255,255,.07);
}
.nhm-promo{
  position:relative;overflow:hidden;
  flex:1;display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  min-height:240px;
  padding:20px;border-radius:16px;
  background-size:cover;
  background-position:68% 30%;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 36px rgba(0,0,0,.35);
}
.nhm-promo-badge{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
  background:color-mix(in srgb,var(--nhh-accent) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--nhh-accent) 50%,transparent);
  color:var(--nhh-soft);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.nhm-promo b{font-family:var(--nhh-font);font-weight:900;font-size:19px;line-height:1.15;margin-top:auto;}
.nhm-promo p{font-size:12.5px;line-height:1.55;font-weight:500;color:rgba(255,255,255,.78);}
/* Promoknop: gedeeld DHB buttonsysteem */
.nhm-promo-btn{margin-top:4px;}

/* trustbalk onderaan megamenu */
.nhm-foot{
  display:flex;align-items:center;justify-content:center;gap:28px;
  padding:13px 24px;
  border-top:1px solid rgba(255,255,255,.07);
  background:color-mix(in srgb,var(--nhh-accent) 5%,transparent);
  font-size:12.5px;color:rgba(255,255,255,.6);
}
.nhm-foot span{display:inline-flex;align-items:center;gap:8px;}
.nhm-foot svg,.nhm-foot .nhm-foot-icon{width:14px;height:14px;color:var(--nhh-accent);flex:none;}
.nhm-foot .nhm-foot-icon svg{width:100%;height:100%;display:block;}

/* ---------- CTA's: gedeeld DHB buttonsysteem ---------- */
.nhh-header-cta{flex:none;white-space:nowrap;}

/* ---------- Hamburger + mobiele scan-knop ---------- */
.nhh-burger{
  display:none;
  width:46px;height:46px;border-radius:50%;flex:none;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;
}
.nhh-burger:hover{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.32)!important;}
/* theme-onafhankelijk: globale button-hovers buiten houden */
.nhh-wrap .nhh-burger{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.2)!important;}
.nhh-wrap .nhh-mobmenu-close,
.nhh-wrap .nhh-mobmenu-close:hover{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;}
.nhh-burger span{
  position:relative;display:block;width:18px;height:2px;border-radius:2px;
  background:#fff;
}
.nhh-burger span::before,
.nhh-burger span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;
  background:#fff;
}
.nhh-burger span::before{top:-6px;}
.nhh-burger span::after{top:6px;}
.nhh-header-scan{display:none;flex:none;}

@media (max-width:1080px){
  .nhh-nav{display:none;}
  .nhh-burger{display:inline-flex;}
  .nhh-header-cta{display:none;}
  .nhh-header-scan{display:inline-flex;}
  .nhh-header-in{gap:12px;}
}
@media (max-width:600px){
  .nhh-wrap{--nhh-top:12px;--nhh-side:14px;--nhh-logo-h:38px;}
  .nhh-header-in{padding:12px 8px 12px 18px;}
  .nhh-header-cta{padding:5px 5px 5px 16px;font-size:13.5px;}
  .nhh-header-cta .dhb-btn-icon{width:30px;height:30px;}
}
@media (max-width:380px){
  .nhh-wrap{--nhh-logo-h:32px;}
  .nhh-header-scan{padding:12px 14px;font-size:13px;}
}

/* ---------- Fullscreen mobiel menu ---------- */
.nhh-mobmenu{
  position:fixed;inset:0;z-index:999998;
  display:flex;flex-direction:column;
  padding:20px 24px calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(70% 50% at 100% 0%,color-mix(in srgb,var(--nhh-accent,#FF4C00) 14%,transparent),transparent 60%),
    linear-gradient(180deg,var(--nhh-mob-1,#1D1D1D) 0%,var(--nhh-mob-2,#0F0E0E) 100%);
  color:#fff;
  font-family:var(--nhh-font,'DHB Elms',ui-sans-serif,system-ui,sans-serif);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.nhh-mobmenu.is-open{opacity:1;visibility:visible;transition:opacity .3s ease;}
.nhh-mobmenu-top{
  display:flex;align-items:center;justify-content:space-between;
  min-height:56px;
}
.nhh-mobmenu-top img{height:40px;width:auto;display:block;max-width:none!important;}
.nhh-mobmenu-close{
  width:46px;height:46px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;cursor:pointer;
}
.nhh-mobmenu-close svg{width:17px;height:17px;}
.nhh-mobmenu-nav{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  list-style:none;gap:4px;margin:0;padding:0;
}
.nhh-mobmenu-nav a{
  display:flex;align-items:baseline;gap:16px;
  padding:13px 4px;
  text-decoration:none;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(14px);
}
.nhh-mobmenu.is-open .nhh-mobmenu-nav a{
  opacity:1;transform:none;
  transition:opacity .45s ease var(--d,0s),transform .45s cubic-bezier(.22,.9,.3,1) var(--d,0s);
}
.nhh-mobmenu-nav i{
  font-style:normal;
  font-size:13px;font-weight:500;color:var(--nhh-accent,#FF4C00);
  font-variant-numeric:tabular-nums;flex:none;
}
.nhh-mobmenu-nav b{
  font-family:var(--nhh-font,'DHB Elms',ui-sans-serif,sans-serif);
  font-weight:900;font-size:clamp(26px,7vw,34px);line-height:1.15;
}
.nhh-mobmenu-foot{
  display:flex;flex-direction:column;gap:16px;
  opacity:0;transform:translateY(14px);
}
.nhh-mobmenu.is-open .nhh-mobmenu-foot{
  opacity:1;transform:none;
  transition:opacity .45s ease .3s,transform .45s cubic-bezier(.22,.9,.3,1) .3s;
}
.nhh-mobmenu-cta{width:100%;justify-content:space-between;}
.nhh-mobmenu-contact{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:14.5px;color:rgba(255,255,255,.72);text-decoration:none;
}
.nhh-mobmenu-contact svg{width:16px;height:16px;color:var(--nhh-accent,#FF4C00);}

@media (prefers-reduced-motion:reduce){
  .nhh-wrap .nhh-header{opacity:1;animation:none;}
  .nhm-item{opacity:1;transform:none;transition:none;}
  .nhh-mobmenu,.nhh-mobmenu-nav a,.nhh-mobmenu-foot{transition:none;}
}

/* ---------- Mobiel menu: hoofditems met subitems ---------- */
.nhh-mobmenu-nav .nhm-hoofd{
  width:100%;
  display:flex;align-items:baseline;gap:16px;
  padding:13px 4px;
  background:none!important;border:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff!important;font-family:inherit;text-align:left;cursor:pointer;
  opacity:0;transform:translateY(14px);
}
.nhh-mobmenu.is-open .nhh-mobmenu-nav .nhm-hoofd{
  opacity:1;transform:none;
  transition:opacity .45s ease var(--d,0s),transform .45s cubic-bezier(.22,.9,.3,1) var(--d,0s);
}
.nhh-mobmenu-nav .nhm-chev{
  margin-left:auto;align-self:center;flex:none;
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:var(--nhh-accent,#FF4C00);
  transition:transform .3s cubic-bezier(.22,.9,.3,1),background-color .3s ease;
}
.nhh-mobmenu-nav .nhm-chev svg{width:14px;height:14px;}
.nhh-mobmenu-nav .nhm-hoofd[aria-expanded="true"] .nhm-chev{
  transform:rotate(180deg);
  background:color-mix(in srgb,var(--nhh-accent,#FF4C00) 22%,transparent);
}
/* uitklapbare sublijst */
.nhh-mobmenu-nav .nhm-sub{
  list-style:none;margin:0;padding:0;
  overflow:hidden;max-height:0;
  transition:max-height .4s cubic-bezier(.22,.61,.36,1);
}
.nhh-mobmenu-nav .nhm-heeft-sub.is-open .nhm-sub{max-height:60vh;}
.nhh-mobmenu-nav .nhm-sub a{
  display:flex;align-items:center;gap:10px;
  padding:11px 4px 11px 42px;
  font-family:var(--nhh-font,'DHB Elms',ui-sans-serif,sans-serif);
  font-weight:700;font-size:clamp(16px,4.4vw,19px);line-height:1.2;
  color:#fff!important;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
  opacity:1;transform:none;
  position:relative;
}
/* neongroen streepje voor elk subitem */
.nhh-mobmenu-nav .nhm-sub a::before{
  content:"";position:absolute;left:22px;top:50%;
  width:12px;height:2px;border-radius:2px;
  background:var(--nhh-accent,#FF4C00);
  box-shadow:0 0 8px color-mix(in srgb,var(--nhh-accent,#FF4C00) 70%,transparent);
  transform:translateY(-50%);
  transition:width .25s ease;
}
.nhh-mobmenu-nav .nhm-sub a:hover::before{width:18px;}
.nhh-mobmenu-nav .nhm-sub a:hover{color:#fff!important;opacity:.85;}
@media(prefers-reduced-motion:reduce){
  .nhh-mobmenu-nav .nhm-sub,.nhh-mobmenu-nav .nhm-chev{transition:none;}
}

/* veiligheidsscan-knoppen wat lager */
.nhh-header-scan.dhb-btn.dhb-btn{padding:8px 8px 8px 18px;}
.nhh-mobmenu-cta.dhb-btn.dhb-btn{padding:10px 10px 10px 22px;}
@media(max-width:1080px){
  .nhh-header-scan.dhb-btn.dhb-btn{padding:8px 14px;font-size:13px;}
}

/* chatknop rechtsonder blijft achter het geopende mobiele menu */
body.nhh-menu-open .nlw{
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .2s ease;
}

/* ---------- Megamenu in de header ----------
   Het megamenu (.dhbmm) vervangt bij de keuze Megamenu de eigen navigatie,
   de eigen hamburger en het eigen mobiele menu. Deze regels zetten het op
   dezelfde plek in de balk als .nhh-nav stond. */
.nhh-megamenu .dhbmm{
  margin-left:auto;
  min-width:0;
}
.nhh-megamenu .nhh-header-in{gap:18px;}

/* Het megamenu is ontworpen voor een lichte balk en zet zijn tekst op #1c1c1c.
   De DHB-header is zwart, dus daar zou het menu onzichtbaar zijn. Alleen de
   knoppen in de balk worden licht; de panelen houden hun witte achtergrond
   met donkere tekst, want die hangen los onder body.

   De knoppen krijgen hier ook de vormgeving van de oude navigatie terug. Het
   megamenu maakt ze vet en geeft bij het aanwijzen een lichtgrijze pil
   (#f3f3f3), in open toestand een bijna zwarte - allebei bedoeld voor een
   lichte balk en op deze zwarte balk lelijk. De oude navigatie deed het
   rustiger: halfvet, iets kleiner, gedempt wit, een doorschijnende pil en een
   oranje stipje dat van links naar binnen schuift. Exact dezelfde maten als
   .nhh-nav > li > a hierboven, zodat de twee naast elkaar niet verschillen. */
.nhh-megamenu .dhbmm-knop{
  position:relative;
  gap:8px;
  height:auto;
  padding:10px 18px;
  border-radius:999px;
  font-size:14.5px;
  font-weight:500;
  color:rgba(255,255,255,.85);
  background:transparent;
  transition:color .18s ease,background-color .18s ease;
}

/* Het stipje staat klaar links buiten de knop. De negatieve marge is precies
   zo groot als het stipje plus de tussenruimte, zodat de tekst niet verspringt
   op het moment dat het stipje verschijnt. */
.nhh-megamenu .dhbmm-knop::before{
  content:"";
  width:5px;height:5px;
  border-radius:50%;
  background:var(--nhh-accent,#FF4C00);
  flex:none;
  opacity:0;
  margin-left:-13px;
  transition:opacity .18s ease,margin-left .18s ease;
}

.nhh-megamenu .dhbmm-knop:hover,
.nhh-megamenu .dhbmm-item.is-open .dhbmm-knop{
  color:#fff;
  background:rgba(255,255,255,.08);
}
.nhh-megamenu .dhbmm-knop:hover::before,
.nhh-megamenu .dhbmm-item.is-open .dhbmm-knop::before{opacity:1;margin-left:0;}

.nhh-megamenu .dhbmm-knop svg{width:12px;height:12px;}
.nhh-megamenu .dhbmm-burger{color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);}
.nhh-megamenu .dhbmm-burger svg{stroke:#fff;}

/* Het megamenu klapt zelf om bij 1180px. De koptekstknoppen volgen dat
   ritme, zodat de balk niet eerst te vol en dan ineens leeg is. */
@media (max-width:1180px){
  .nhh-megamenu .nhh-header-cta{display:none;}
  .nhh-megamenu .nhh-header-scan{display:inline-flex;}
}
@media (max-width:600px){
  .nhh-megamenu .nhh-header-scan{display:none;}
}