Megamenu met uitgelichte case Nieuw

<!-- Megamenu met uitgelichte case · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="nmc">
  <div class="nmc__bar" role="navigation" aria-label="Hoofdmenu">
    <a href="#" class="nmc__logo"><span class="nmc__mark">VD</span><span class="nmc__name">Van Dijk<small>Installatietechniek</small></span></a>
    <ul class="nmc__nav">
      <li class="nmc__has"><button class="nmc__trigger" type="button" aria-expanded="false" aria-controls="nmc-mega">Diensten<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 4l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg></button></li>
      <li class="nmc__hm"><a href="#">Zakelijk</a></li>
      <li class="nmc__hm"><a href="#">Werkgebied</a></li>
      <li class="nmc__hm"><a href="#">Over ons</a></li>
    </ul>
    <div class="nmc__acts">
      <a class="nmc__storing" href="tel:+31331234567"><span>Storing?</span> 033 123 4567</a>
      <a class="nmc__cta" href="#">Offerte aanvragen</a>
    </div>
    <div class="nmc__mega" id="nmc-mega">
      <div class="nmc__cols">
        <div class="nmc__col"><span class="nmc__colh">Verwarming</span>
          <ul><li><a href="#">CV-ketel vervangen<small>Vaste prijs vanaf € 2.195</small></a></li>
          <li><a href="#">Hybride warmtepomp<small>Inclusief ISDE-aanvraag</small></a></li>
          <li><a href="#">Vloerverwarming<small>Ook in bestaande vloeren</small></a></li>
          <li><a href="#">Onderhoudscontract<small>€ 9,50 per maand</small></a></li></ul></div>
        <div class="nmc__col"><span class="nmc__colh">Sanitair</span>
          <ul><li><a href="#">Badkamer renoveren<small>Ontwerp tot oplevering</small></a></li>
          <li><a href="#">Lekkage opsporen<small>Zonder breekwerk</small></a></li>
          <li><a href="#">Ontstoppen riool<small>Binnen 4 uur ter plaatse</small></a></li></ul></div>
        <div class="nmc__col"><span class="nmc__colh">Elektra</span>
          <ul><li><a href="#">Groepenkast vervangen<small>Vanaf € 1.150</small></a></li>
          <li><a href="#">Laadpaal thuis<small>Dynamisch laden mogelijk</small></a></li>
          <li><a href="#">Zonnepanelen<small>Met 12 jaar garantie</small></a></li></ul></div>
      </div>
      <a href="#" class="nmc__case">
        <span class="nmc__img" aria-hidden="true"><span class="nmc__house"></span><span class="nmc__pump"></span><span class="nmc__badge">-41% gas</span></span>
        <span class="nmc__case-tag">Uitgelichte case</span>
        <strong class="nmc__case-h">Hybride warmtepomp in een jaren-30 woning in Amersfoort</strong>
        <span class="nmc__case-p">Familie Bakker verbruikte de eerste winter 41% minder gas, zonder nieuwe radiatoren.</span>
        <span class="nmc__case-more">Lees de case <span aria-hidden="true">→</span></span>
      </a>
    </div>
  </div>
  <div class="nmc__page">
    <span class="nmc__eyebrow">Erkend installateur · regio Amersfoort</span>
    <p class="nmc__title">Uw cv-ketel vervangen in één werkdag</p>
    <p class="nmc__lead">Vaste prijs vooraf, oude ketel gratis afgevoerd en 7 jaar garantie op de nieuwe.</p>
    <a class="nmc__storing nmc__storing--m" href="tel:+31331234567">Storing? Bel 033 123 4567</a>
  </div>
</div>
</div>

/* Megamenu met uitgelichte case · NedDev · eigen werk. */
.nmc{position:relative;width:100%;align-self:flex-start;flex:none;min-height:500px;background:#0f2a44;color:#fff;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}
.nmc *{box-sizing:border-box}
.nmc__bar{position:relative;z-index:4;display:flex;align-items:center;gap:28px;padding:14px 32px;background:#fff;color:#0f2a44}
.nmc__logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#0f2a44}
.nmc__mark{width:38px;height:38px;border-radius:4px;background:#f2c230;color:#0f2a44;display:grid;place-items:center;font-weight:800;font-size:15px;letter-spacing:-.02em}
.nmc__name{font-weight:700;font-size:16px;line-height:1.05;display:flex;flex-direction:column}
.nmc__name small{font-weight:500;font-size:11px;color:#5a6b7d}
.nmc__nav{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex:1}
.nmc__nav a,.nmc__trigger{display:inline-flex;align-items:center;gap:6px;font:500 15px 'Switzer',sans-serif;color:#0f2a44;text-decoration:none;padding:10px 12px;border-radius:4px;background:transparent;border:0;cursor:pointer}
.nmc__nav a:hover,.nmc__trigger:hover,.nmc__trigger[aria-expanded="true"]{background:#eef2f6}
.nmc__trigger svg{width:12px;height:12px;transition:transform .25s ease}
.nmc__trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.nmc__acts{display:flex;align-items:center;gap:16px}
.nmc__storing{font-size:14px;font-weight:600;color:#0f2a44;text-decoration:none;white-space:nowrap}
.nmc__storing span{color:#c0392b}
.nmc__storing--m{display:none}
.nmc__cta{background:#f2c230;color:#0f2a44;font-weight:700;font-size:14px;padding:11px 18px;border-radius:4px;text-decoration:none;white-space:nowrap;transition:background .2s ease}
.nmc__cta:hover{background:#ffd451}
.nmc__mega{position:absolute;left:0;right:0;top:100%;background:#fff;color:#0f2a44;border-top:1px solid #e3e8ee;box-shadow:0 18px 30px -18px rgba(10,25,40,.45);display:grid;grid-template-columns:1fr 300px;gap:32px;padding:26px 32px 30px;visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
.nmc.is-open .nmc__mega{visibility:visible;opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease}
.nmc__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.nmc__colh{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5a6b7d;margin-bottom:10px}
.nmc__col ul{list-style:none;margin:0;padding:0}
.nmc__col a{display:block;padding:8px 10px;margin:0 -10px;border-radius:4px;font-weight:600;font-size:15px;color:#0f2a44;text-decoration:none}
.nmc__col a small{display:block;font-weight:400;font-size:12px;color:#5a6b7d;margin-top:2px}
.nmc__col a:hover,.nmc__col a:focus-visible{background:#eef2f6}
.nmc__case{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:#0f2a44;background:#f5f7fa;border-radius:6px;padding:12px 12px 16px}
.nmc__img{position:relative;display:block;height:120px;border-radius:4px;overflow:hidden;background:linear-gradient(180deg,#bcd3e6 0%,#e6eef5 70%,#9fb48c 70%,#8ca577 100%);margin-bottom:6px}
.nmc__house{position:absolute;left:24%;bottom:30%;width:46%;height:52%;background:#a9563a;clip-path:polygon(0 42%,50% 0,100% 42%,100% 100%,0 100%)}
.nmc__house::after{content:'';position:absolute;left:38%;bottom:0;width:22%;height:40%;background:#4a2c20}
.nmc__pump{position:absolute;left:72%;bottom:30%;width:14%;height:20%;background:#f4f6f8;border:1px solid #9aa8b5;border-radius:2px;background-image:repeating-linear-gradient(90deg,#c5ced6 0 2px,transparent 2px 5px)}
.nmc__badge{position:absolute;right:8px;top:8px;background:#0f2a44;color:#f2c230;font:700 12px 'JetBrains Mono',monospace;padding:4px 7px;border-radius:2px}
.nmc__case-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#a07c00}
.nmc__case-h{font-size:15px;line-height:1.3}
.nmc__case-p{font-size:13px;line-height:1.45;color:#45576a}
.nmc__case-more{font-size:13px;font-weight:700;margin-top:2px}
.nmc__case:hover .nmc__case-more span{display:inline-block;transform:translateX(3px)}
.nmc__page{flex:1;padding:56px 32px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:linear-gradient(115deg,#0f2a44 55%,#143656 55%)}
.nmc__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#f2c230}
.nmc__title{font-size:clamp(28px,4vw,46px);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:12px 0;max-width:18ch}
.nmc__lead{font-size:16px;line-height:1.5;color:rgba(255,255,255,.75);max-width:44ch;margin:0}
@media(max-width:980px){.nmc__hm{display:none}.nmc__mega{grid-template-columns:1fr}.nmc__case{flex-direction:column}}
@media(max-width:640px){
.nmc__bar{padding:10px 14px;gap:8px;justify-content:space-between}
.nmc__nav{flex:none}
.nmc__acts{display:none}
.nmc__name small{display:none}
.nmc__mega{padding:16px 16px 20px;gap:16px;max-height:400px;overflow:auto}
.nmc__cols{grid-template-columns:1fr 1fr;gap:12px}
.nmc__col:last-child{grid-column:1/-1}
.nmc__page{padding:36px 20px}
.nmc__storing--m{display:inline-block;margin-top:18px;background:#f2c230;padding:12px 16px;border-radius:4px}}
@media(prefers-reduced-motion:reduce){.nmc__mega,.nmc__trigger svg{transition:none}}

// Megamenu met uitgelichte case · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.nmc');if(!w)return;
var t=w.querySelector('.nmc__trigger'),m=w.querySelector('.nmc__mega'),li=w.querySelector('.nmc__has'),timer=null;
var hover=window.matchMedia('(hover:hover) and (pointer:fine)');
function set(o){w.classList.toggle('is-open',o);t.setAttribute('aria-expanded',o?'true':'false');}
t.addEventListener('click',function(){set(!w.classList.contains('is-open'));});
[li,m].forEach(function(el){
  el.addEventListener('mouseenter',function(){if(!hover.matches)return;clearTimeout(timer);set(true);});
  el.addEventListener('mouseleave',function(){if(!hover.matches)return;clearTimeout(timer);timer=setTimeout(function(){set(false);},200);});
});
w.addEventListener('keydown',function(e){if(e.key==='Escape'&&w.classList.contains('is-open')){set(false);t.focus();}});
document.addEventListener('click',function(e){if(!w.contains(e.target)||(!m.contains(e.target)&&!li.contains(e.target)))set(false);});
m.addEventListener('focusout',function(e){if(e.relatedTarget&&!m.contains(e.relatedTarget)&&e.relatedTarget!==t)set(false);});
w.addEventListener('click',function(e){var a=e.target.closest('a[href="#"]');if(a)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));