/* Internet Hotspot — megamenu (desktop: paneel over volle breedte · mobiel: uitklaplijst) */

/* ── Algemeen ─────────────────────────────────────────────────────────── */
#hdr{z-index:60} /* boven andere <header>-elementen op de pagina (bijv. .svc-hero op dienstpagina's) */
.has-mm{position:static}
.mm-caret{width:10px;height:10px;margin-left:5px;vertical-align:1px;transition:transform .3s}
.mm-tg,.mm-mob{display:none}
.mm-scrim{position:absolute;left:0;right:0;top:100%;height:100vh;background:rgba(22,19,31,.28);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s;z-index:-1}
.mm-scrim.on{opacity:1;visibility:visible}
#inzicht,#waarom{scroll-margin-top:100px}

/* ── Desktop ──────────────────────────────────────────────────────────── */
@media (min-width:901px){
  .has-mm.mm-open>.mm-top{color:var(--purple);background:var(--purple-soft)}
  .has-mm.mm-open .mm-caret{transform:rotate(180deg)}

  .mm-panel{position:absolute;left:0;right:0;top:100%;z-index:2;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 40px 80px rgba(22,19,31,.12);
    opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1),visibility .25s}
  .has-mm.mm-open .mm-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}

  /* reset van de gewone menulink-stijl binnen het paneel */
  .nav-links .mm-panel :where(a:not(.btn)){display:block;padding:0;border-radius:0;white-space:normal;font-size:inherit;font-weight:inherit;color:inherit;background:none}
  .nav-links .mm-panel .btn{padding:11px 18px;border-radius:100px;font-size:.88rem;font-weight:600;white-space:nowrap;display:inline-flex}
  .nav-links .mm-panel .btn-primary{color:#fff}
  .nav-links .mm-panel .btn-primary:hover{background:var(--purple-2);color:#fff}
  .nav-links .mm-panel .btn-white{color:var(--ink);background:#fff}
  .nav-links .mm-panel .btn-white:hover{background:#fff;color:var(--ink)}

  .mm-in{display:grid;gap:26px;padding-top:32px;padding-bottom:26px}
  .mm-in.mm-wide{grid-template-columns:1fr 2.8fr}
  .mm-in.mm-thirds{grid-template-columns:1.05fr 1.4fr 1.4fr;align-items:center}

  .mm-intro .eyebrow{font-size:.7rem}
  .mm-intro .mm-h{font-family:var(--display);font-weight:700;letter-spacing:-.03em;font-size:1.6rem;line-height:1.1;margin:12px 0 10px;color:var(--ink)}
  .mm-intro p{color:var(--ink-soft);font-size:.92rem;line-height:1.55}
  .mm-btn{margin-top:18px}
  .mm-btn svg{width:15px;height:15px}
  .mm-hint{display:block;margin-top:12px;font-size:.78rem;color:var(--ink-dim)}
  .mm-rating{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:.8rem;color:var(--ink-dim);line-height:1.4}
  .mm-rating b{color:var(--ink)}
  .mm-stars{color:#f5a623;letter-spacing:1px;font-size:.95rem;white-space:nowrap}

  /* lijst-items (diensten, kassaleveranciers) */
  .mm-svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 14px;align-content:start}
  .nav-links .mm-panel .mm-item{position:relative;display:flex;gap:14px;align-items:center;padding:11px 40px 11px 12px;border-radius:14px;transition:background .2s}
  .nav-links .mm-panel .mm-item:hover{background:var(--purple-tint)}
  .mm-ic{width:42px;height:42px;border-radius:12px;background:var(--purple-soft);color:var(--purple);display:grid;place-items:center;flex-shrink:0}
  .mm-ic svg{width:20px;height:20px}
  .mm-item b{display:block;font-size:.96rem;color:var(--ink);font-weight:600}
  .mm-item small{display:block;color:var(--ink-dim);font-size:.84rem;line-height:1.4;margin-top:2px}
  .mm-ar{position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--purple);opacity:.35;transition:opacity .2s,transform .25s}
  .mm-ar svg{width:16px;height:16px;display:block}
  .mm-item:hover .mm-ar{opacity:1;transform:translateX(3px)}
  .nav-links .mm-panel .mm-item.mm-hl{background:#E6F4EC}
  .nav-links .mm-panel .mm-item.mm-hl:hover{background:#d8efe2}
  .mm-hl .mm-ic{background:#fff;color:#1F8A5B}
  .mm-hl .mm-ar{color:#1F8A5B}

  /* kaarten (over ons) */
  .nav-links .mm-panel .mm-card{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:20px;transition:border-color .25s,box-shadow .3s,transform .3s}
  .nav-links .mm-panel .mm-card:hover{border-color:rgba(73,61,156,.3);box-shadow:var(--shadow);transform:translateY(-3px)}
  .mm-ph{display:block;height:140px;border-radius:14px;overflow:hidden;background:var(--cream);position:relative}
  .mm-ph img{width:100%;height:100%;object-fit:cover}
  .mm-card b{display:flex;align-items:center;gap:10px;font-size:1.1rem;color:var(--ink);margin-bottom:6px}
  .mm-card small{display:block;color:var(--ink-soft);font-size:.88rem;line-height:1.5}
  .mm-go{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-weight:600;font-size:.86rem;color:var(--purple)}
  .mm-go svg{width:14px;height:14px;transition:transform .3s}
  .mm-card:hover .mm-go svg,.mm-case:hover .mm-go svg{transform:translateX(4px)}
  .mm-tag{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:100px;background:#E6F4EC;color:#1F8A5B}
  .mm-mvo .mm-ph{background:radial-gradient(circle at 50% 40%,#173f55,#071722 70%)}
  .mm-globe{position:absolute;left:50%;top:50%;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;background:#0d2a3a center/auto 176% no-repeat;box-shadow:0 0 40px rgba(80,180,255,.35)}
  .has-mm.mm-open .mm-globe{background-image:url(https://images.unsplash.com/photo-1614730321146-b6fa6a46bcb4?w=400&q=70&auto=format)} /* pas laden als het menu opengaat */

  /* klantcases */
  .mm-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-content:start}
  .nav-links .mm-panel .mm-case{padding:10px 10px 16px;border:1px solid var(--line);border-radius:18px;transition:border-color .25s,box-shadow .3s,transform .3s}
  .nav-links .mm-panel .mm-case:hover{border-color:rgba(73,61,156,.3);box-shadow:var(--shadow);transform:translateY(-3px)}
  .mm-ci{display:block;height:140px;border-radius:12px;overflow:hidden;background:var(--cream);margin-bottom:12px}
  .mm-ci img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
  .mm-case:hover .mm-ci img{transform:scale(1.05)}
  .mm-case b{display:block;font-size:.96rem;color:var(--ink);padding:0 6px}
  .mm-case small{display:block;color:var(--ink-dim);font-size:.84rem;line-height:1.4;padding:4px 6px 0}
  .mm-case .mm-go{margin-left:6px}

  /* kassaleveranciers */
  .mm-kas-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:stretch}
  .mm-kas-list{display:grid;gap:4px;align-content:start}
  .mm-kas-cta{position:relative;overflow:hidden;background:var(--purple);color:#fff;border-radius:20px;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  .mm-kas-cta::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);pointer-events:none}
  .mm-kas-cta b{font-family:var(--display);font-size:1.3rem;letter-spacing:-.02em;line-height:1.15}
  .mm-kas-cta small{color:rgba(255,255,255,.82);font-size:.88rem;line-height:1.5;margin-bottom:6px}
  .nav-links .mm-panel .mm-login{font-size:.82rem;color:rgba(255,255,255,.85);margin-top:6px}

  .mm-foot{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:14px;padding-bottom:14px;font-size:.84rem;color:var(--ink-dim)}
  .nav-links .mm-panel .mm-foot a{display:inline;color:var(--purple);font-weight:600}
}

/* compacte desktop (smalle laptops / tablet liggend) */
@media (min-width:901px) and (max-width:1180px){
  .mm-in.mm-wide,.mm-in.mm-thirds{grid-template-columns:1fr}
  .mm-intro{display:grid;grid-template-columns:auto 1fr;column-gap:24px;align-items:center}
  .mm-intro .eyebrow,.mm-intro .mm-h{grid-column:1/-1}
  .mm-intro p{grid-column:1/-1}
  .mm-btn{margin-top:12px}
  .mm-hint,.mm-rating{margin-top:12px}
  .mm-ci{height:110px}
  .mm-in.mm-thirds .mm-card{grid-template-columns:110px 1fr}
  .mm-in.mm-thirds{grid-template-columns:1fr 1fr}
  .mm-in.mm-thirds .mm-intro{grid-column:1/-1}
  .mm-ph{height:110px}
  .mm-caret{margin-left:3px}
}
@media (min-width:901px) and (max-height:760px){
  .mm-panel{max-height:calc(100vh - 90px);overflow-y:auto}
}

/* ── Mobiel ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .nav-menu.open{max-height:calc(100vh - 78px);overflow-y:auto}
  .mm-panel,.mm-caret,.mm-scrim{display:none}
  .nav-links .has-mm{display:grid;grid-template-columns:1fr 48px;align-items:center;border-bottom:1px solid var(--line)}
  .nav-links .has-mm>.mm-top{border-bottom:none}
  .nav-links li.has-mm:last-child>.mm-top{border-bottom:none}
  .mm-tg{display:grid;place-items:center;width:44px;height:44px;border:0;background:var(--cream);border-radius:12px;color:var(--ink);cursor:pointer;justify-self:end}
  .mm-tg svg{width:18px;height:18px;transition:transform .3s}
  .has-mm.mm-mob-open .mm-tg{background:var(--purple-soft);color:var(--purple)}
  .has-mm.mm-mob-open .mm-tg svg{transform:rotate(180deg)}
  .mm-mob{grid-column:1/-1;list-style:none;padding:0 0 12px 10px;margin:0}
  .has-mm.mm-mob-open .mm-mob{display:block}
  .nav-links .mm-mob a{display:block;padding:9px 8px;font-size:.98rem;font-weight:500;color:var(--ink-soft);border:none;border-radius:10px}
  .nav-links .mm-mob a.mm-all{color:var(--purple);font-weight:600}
  .nav-links .mm-mob a:hover{background:var(--cream)}
}

/* Menubalk compact houden: het logo is 262px breed, dus "Home" (het logo linkt al naar home) valt op desktop weg.
   Op mobiel blijft Home gewoon in de lijst staan. */
@media (min-width:901px){
  .nav-links>li:first-child{display:none}
  .nav-menu{margin-left:28px;gap:16px}
  .nav-links a,.nav-links a.mm-top{padding-left:12px;padding-right:12px}
  .nav-cta .btn{padding:12px 20px;font-size:.93rem}
}
@media (min-width:901px) and (max-width:1300px){
  .nav-menu{margin-left:18px;gap:12px}
  .nav-links a,.nav-links a.mm-top{padding-left:8px;padding-right:8px;font-size:.92rem}
  .nav-cta{gap:8px}
  .nav-cta .btn{padding:11px 16px;font-size:.9rem}
}
@media (min-width:901px) and (max-width:1060px){
  .nav-links a,.nav-links a.mm-top{padding-left:6px;padding-right:6px;font-size:.88rem}
  .nav-cta .btn{padding:10px 14px;font-size:.86rem}
  .mm-caret{width:8px;height:8px;margin-left:2px}
}