/* Header + menu + footer + kruimelpad + skip-link (horen bij assets/js/site.js) */

/* Skip-link: onzichtbaar tot hij focus krijgt */
.skip-link{position:fixed;left:1rem;top:-100px;z-index:100;padding:.7em 1.1em;border-radius:var(--radius-sm);background:var(--cyan);color:#03050a;font-weight:600;font-size:var(--fs-sm);transition:top .15s}
.skip-link:focus{top:1rem}
main:focus{outline:none}
main[id]{scroll-margin-top:var(--header-h)}

/* Header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:var(--header-h);background:rgba(4,6,12,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-header__in{height:100%;display:flex;align-items:center;gap:var(--space-5)}
.brand{flex:none;border-radius:6px}
.brand img{height:34px;width:auto}

/* Hoofdmenu — desktop */
.site-nav{margin-left:auto;display:flex;align-items:center}
.site-nav__list{display:flex;gap:var(--space-1);list-style:none;margin:0;padding:0}
.site-nav__item{position:relative}
.site-nav__link{display:inline-flex;align-items:center;gap:.35em;padding:.5em .9em;border:0;border-radius:999px;background:none;font:inherit;font-size:var(--fs-sm);color:var(--text-dim);cursor:pointer;transition:color .2s,background .2s}
.site-nav__link:hover,.site-nav__link.is-active,.site-nav__btn[aria-expanded="true"]{color:var(--text);background:var(--surface-2)}
.site-nav__link.is-active{box-shadow:inset 0 -2px 0 var(--cyan)}
.site-nav .chev{width:12px;height:12px;flex:none;transition:transform .2s var(--ease)}
.site-nav__btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.site-nav__cta{display:none}

/* Uitklapmenu */
.site-nav .sub{position:absolute;top:calc(100% + 10px);left:50%;min-width:280px;list-style:none;margin:0;padding:var(--space-2);background:rgba(8,12,23,.98);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 18px 48px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s .18s}
.site-nav .sub::before{content:"";position:absolute;inset:-12px 0 auto;height:12px} /* brug: muis kan van knop naar menu */
.site-nav .is-open>.sub{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s var(--ease),transform .18s var(--ease)}
.site-nav .sub--mega{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:min(600px,calc(100vw - 2rem))}
.site-nav .sub--mega .sub__all{grid-column:1/-1;border-bottom:1px solid var(--line);margin-bottom:var(--space-1);padding-bottom:var(--space-1)}
.site-nav .sub a{display:block;padding:.6em .85em;border-radius:var(--radius-sm);color:var(--text-dim);transition:background .15s,color .15s}
.site-nav .sub a:hover,.site-nav .sub a:focus-visible{background:var(--surface-2);color:var(--text)}
.site-nav .sub a[aria-current="page"]{background:rgba(0,224,255,.08);color:var(--text);box-shadow:inset 2px 0 0 var(--cyan)}
.sub__label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.sub__desc{display:block;font-size:var(--fs-xs);color:var(--text-dim);margin-top:.15em}
.sub__all .sub__label{color:var(--cyan)}

/* Hamburger */
.nav-toggle{display:none;flex:none;margin-left:auto;background:none;border:0;width:44px;height:44px;padding:0 10px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;border-radius:var(--radius-sm)}
.nav-toggle span{display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .25s,opacity .2s}

@media (max-width: 960px){
  .nav-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  .site-header__cta{display:none}
  .nav-toggle{display:flex}
  .site-nav{position:fixed;inset:var(--header-h) 0 0;margin:0;display:flex;flex-direction:column;align-items:stretch;gap:var(--space-5);background:var(--bg);padding:var(--space-4) var(--space-5) var(--space-7);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;transform:translateX(100%);transition:transform .3s var(--ease),visibility 0s .3s}
  .nav-open .site-nav{visibility:visible;transform:none;transition:transform .3s var(--ease)}
  .nav-open{overflow:hidden}
  .site-nav__list{flex-direction:column;gap:0}
  .site-nav__item{border-bottom:1px solid var(--line)}
  .site-nav__link{display:flex;width:100%;justify-content:space-between;padding:1em .25em;border-radius:0;font-size:var(--fs-lg);font-family:var(--font-display);color:var(--text)}
  .site-nav__link:hover,.site-nav__link.is-active,.site-nav__btn[aria-expanded="true"]{background:none}
  .site-nav__link.is-active{box-shadow:none;color:var(--cyan)}
  .site-nav .chev{width:16px;height:16px}
  .site-nav .sub,.site-nav .sub--mega{position:static;display:none;width:auto;min-width:0;opacity:1;visibility:visible;transform:none;transition:none;border:0;background:none;box-shadow:none;padding:0 0 var(--space-3) var(--space-3)}
  .site-nav .sub::before{display:none}
  .site-nav .is-open>.sub{display:block;transform:none}
  .site-nav .sub--mega .sub__all{border:0;margin:0;padding:0}
  .site-nav .sub a{padding:.65em .75em}
  .sub__desc{display:none}
  .site-nav__cta{display:inline-flex;justify-content:center}
  .nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-open .nav-toggle span:nth-child(2){opacity:0}
  .nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* Kruimelpad */
.crumbs{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-dim);margin-bottom:var(--space-4);display:flex;flex-wrap:wrap;align-items:center;gap:.35em .6em}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35em .6em}
.crumbs>span[aria-hidden]{color:var(--text-mute)}
.crumbs li{display:inline-flex;align-items:center;gap:.6em}
.crumbs li+li::before{content:"/";color:var(--text-mute)}
.crumbs a{color:var(--text-dim);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.crumbs a:hover{color:var(--cyan)}
.crumbs [aria-current]{color:var(--text)}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding-block:var(--space-8) var(--space-5);background:var(--bg-2);font-size:var(--fs-sm)}
.site-footer__grid{grid-template-columns:minmax(200px,1.3fr) repeat(auto-fit,minmax(140px,1fr));gap:var(--space-6) var(--space-5)}
.site-footer__merk{max-width:300px}
.site-footer__kop{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--text-dim);margin:0 0 var(--space-3)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{padding:.25em 0;color:var(--text-dim)}
.site-footer a{color:var(--text-dim)} .site-footer a:hover{color:var(--cyan)}
.site-footer a[aria-current="page"]{color:var(--text)}
.site-footer .mt{margin-top:var(--space-4)}
.site-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-7);padding-top:var(--space-5);border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--text-dim)}
@media (max-width: 1100px){.site-footer__grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.site-footer__merk{grid-column:1/-1;max-width:none}}
@media (max-width: 620px){.site-footer__grid{grid-template-columns:1fr 1fr}}
/* Galaxy Fold dicht (280 px): logo iets kleiner zodat de menuknop zijn 44 px houdt (controle 16-10, DD-3) */
@media (max-width: 320px){.brand img{height:28px}}