/* ─────────────────────────────────────────────
   HEADER — clean single-bar nav
   Logo + tagline | nav in the middle | CTA right
   No nested pills, just one well-spaced row.
─────────────────────────────────────────────  */
.nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:16px 32px;
  /* Respect iOS notch/dynamic island when viewport-fit=cover is active */
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-left: calc(32px + env(safe-area-inset-left, 0px));
  padding-right: calc(32px + env(safe-area-inset-right, 0px));
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  background:var(--bg);
  transition:padding .25s, background .25s, border-color .25s, box-shadow .25s;
  border-bottom:1px solid transparent;
}
.nav.scrolled {
  padding:10px 32px;
  background:var(--bg);
  border-bottom-color:var(--line);
  box-shadow: 0 4px 16px -10px rgba(21,21,26,.25);
}

.nav-brand {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.nav-brand img {
  height:38px;
  transition:height .25s;
}
.nav.scrolled .nav-brand img { height:32px }

.nav-brand-meta {
  display:none;
  flex-direction:column;
  gap:1px;
  font-family:var(--font-mono);
  line-height:1.1;
  padding-left:12px;
  border-left:1px solid var(--line);
}
.nav-brand-meta-tag {
  font-size:9px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--orange-d);
}
.nav-brand-meta-text {
  font-size:10px;
  font-weight:500;
  color:var(--ink-soft);
  letter-spacing:0.2px;
}
@media (min-width:1100px) {
  .nav-brand-meta { display:flex }
}

.nav-menu {
  display:flex;
  list-style:none;
  gap:2px;
  align-items:center;
  margin: 0 auto;
}
.nav-menu a {
  font-family:var(--font-ui);
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  padding:9px 14px;
  border-radius:8px;
  transition:background .15s, color .15s;
  letter-spacing:-0.1px;
  position:relative;
}
.nav-menu a::before {
  content:'';
  position:absolute;
  bottom:5px;
  left:50%;
  transform:translateX(-50%) scale(0);
  width:4px; height:4px;
  background:var(--orange);
  border-radius:50%;
  transition:transform .2s;
}
.nav-menu a:hover { color:var(--orange-d) }
.nav-menu a:hover::before { transform:translateX(-50%) scale(1) }

.nav-actions {
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.nav-link {
  font-family:var(--font-ui);
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
  padding:10px 16px;
  border-radius:10px;
  background:var(--white);
  border:1.5px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  letter-spacing:-0.1px;
  transition:transform .15s, box-shadow .15s, background .2s;
}
.nav-link:hover {
  background:var(--yellow);
  transform:translate(-1px,-1px);
  box-shadow: 0 4px 0 var(--ink);
}
.nav-link:active {
  transform:translate(0,2px);
  box-shadow: 0 1px 0 var(--ink);
}

.nav-cta {
  background:var(--ink);
  color:var(--white);
  font-family:var(--font-ui);
  font-size:13.5px;
  font-weight:700;
  padding:10px 16px 10px 18px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:transform .15s, box-shadow .15s, background .2s;
  border:1.5px solid var(--ink);
  box-shadow: 0 3px 0 var(--orange-d);
  letter-spacing:-0.1px;
}
.nav-cta:hover {
  transform:translate(-1px,-1px);
  box-shadow: 0 4px 0 var(--orange-d);
  background:var(--orange);
}
.nav-cta:active {
  transform:translate(0,2px);
  box-shadow: 0 1px 0 var(--orange-d);
}
.nav-cta-arrow { width:13px; height:13px; transition:transform .2s }
.nav-cta:hover .nav-cta-arrow { transform:translateX(2px) }

/* BURGER BUTTON — hidden on desktop, shown on mobile */
.nav-burger {
  display:none;
  width:44px; height:44px;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:10px;
  box-shadow: 0 3px 0 var(--ink);
  cursor:pointer;
  padding:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  transition:transform .15s, box-shadow .15s, background .2s;
}
.nav-burger:focus-visible {
  outline:2px solid var(--orange);
  outline-offset:3px;
}
.nav-burger:hover {
  background:var(--yellow);
  transform:translate(-1px,-1px);
  box-shadow: 0 4px 0 var(--ink);
}
.nav-burger:active {
  transform:translate(0,2px);
  box-shadow: 0 1px 0 var(--ink);
}
.nav-burger span {
  display:block;
  width:18px;
  height:2.5px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .25s, opacity .15s;
}
.nav-burger.open span:nth-child(1) {
  transform:translateY(6.5px) rotate(45deg);
}
.nav-burger.open span:nth-child(2) {
  opacity:0;
}
.nav-burger.open span:nth-child(3) {
  transform:translateY(-6.5px) rotate(-45deg);
}

/* MOBILE MENU DRAWER */
.mobile-menu {
  position:fixed;
  top:0; right:0; bottom:0;
  width:88%;
  max-width:380px;
  background:var(--white);
  z-index:200;
  opacity:0;
  transform:translateX(32px);
  transition:opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility .35s;
  visibility:hidden;
  will-change:transform, opacity;
  display:flex;
  flex-direction:column;
  border-left:1.5px solid var(--ink);
  box-shadow: -8px 0 24px -8px rgba(21,21,26,.18);
  height:100dvh;
  max-height:100dvh;
  overscroll-behavior:contain;
  /* Respect iOS safe-area so content/studs don't slip under status bar */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing:border-box;
}
.mobile-menu.open {
  transform:translateX(0);
  opacity:1;
  visibility:visible;
}

/* Staggered fade-in for menu items + footer when drawer opens */
.mobile-menu-list li,
.mobile-menu-footer > * {
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.mobile-menu.open .mobile-menu-list li,
.mobile-menu.open .mobile-menu-footer > * {
  opacity:1;
  transform:translateY(0);
}
.mobile-menu.open .mobile-menu-list li:nth-child(1) { transition-delay: .12s }
.mobile-menu.open .mobile-menu-list li:nth-child(2) { transition-delay: .17s }
.mobile-menu.open .mobile-menu-list li:nth-child(3) { transition-delay: .22s }
.mobile-menu.open .mobile-menu-list li:nth-child(4) { transition-delay: .27s }
.mobile-menu.open .mobile-menu-list li:nth-child(5) { transition-delay: .32s }
.mobile-menu.open .mobile-menu-footer > *:nth-child(1) { transition-delay: .36s }
.mobile-menu.open .mobile-menu-footer > *:nth-child(2) { transition-delay: .40s }
.mobile-menu.open .mobile-menu-footer > *:nth-child(3) { transition-delay: .44s }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-list li,
  .mobile-menu-footer > * { transition:none !important; transform:none !important; opacity:1 !important }
}

.mobile-menu-header {
  /* Header band uses the page bg color so the logo's baked-in #BECEF0
     background blends seamlessly — no visible rectangle around the logo */
  min-height:64px;
  padding:18px 22px 14px;
  position:relative;
  background:var(--bg);
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1.5px solid var(--ink);
}
.mobile-menu-brand { display:flex; align-items:center; flex-shrink:0 }
.mobile-menu-brand img { height:30px; display:block }
.mobile-menu-eyebrow {
  display:inline-flex;
  align-items:center;
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--orange-d);
  padding:3px 8px 3px 6px;
  background:rgba(242,107,31,.10);
  border:1px solid rgba(242,107,31,.30);
  border-radius:5px;
  gap:5px;
}
.mobile-menu-eyebrow::before {
  content:'';
  width:5px; height:5px;
  background:var(--orange);
  border-radius:50%;
}
/* Studs kept hidden — they previously clipped under browser chrome */
.mobile-menu-studs { display:none }
/* (Old .mobile-menu-eyebrow style removed — the eyebrow pill is now hidden
   because the drawer IS the menu — see display:none above.) */
/* .mobile-menu-close removed — burger now serves as both open and close */

.mobile-menu-list {
  list-style:none;
  padding:10px 0;
  flex:0 0 auto;
  min-height:0;
}
/* Push the footer to the bottom of the drawer so it doesn't float mid-screen
   on tall viewports. Whole drawer still scrolls if content exceeds viewport. */
.mobile-menu-footer { margin-top:auto }
.mobile-menu {
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mobile-menu-list li {
  border-bottom:1px solid var(--line-soft);
}
.mobile-menu-list li:last-child { border-bottom:none }
.mobile-menu-list a {
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 22px;
  color:var(--ink);
  transition:background .15s, padding-left .25s, color .15s;
  position:relative;
  min-height:72px;
}
.mobile-menu-list a:focus-visible {
  outline:2px solid var(--orange);
  outline-offset:-3px;
}
.mobile-menu-list a::after {
  content:'→';
  margin-left:auto;
  font-size:20px;
  color:var(--gray-2);
  transition:transform .25s, color .15s;
  flex-shrink:0;
}
.mobile-menu-list a:hover {
  background:rgba(190,206,240,.35);
  padding-left:28px;
  color:var(--orange-d);
}
.mobile-menu-list a:hover::after {
  transform:translateX(4px);
  color:var(--orange);
}

.mobile-menu-stud {
  width:14px;
  height:14px;
  flex-shrink:0;
}
.mobile-menu-text {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.mobile-menu-title {
  font-family:var(--font-display);
  font-size:20px;
  text-transform:uppercase;
  letter-spacing:-0.4px;
  line-height:1.05;
  color:inherit;
}
.mobile-menu-sub {
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:500;
  color:var(--gray-1);
  letter-spacing:0.1px;
  line-height:1.3;
}
.mobile-menu-list a:hover .mobile-menu-sub { color:var(--ink-soft) }

.mobile-menu-footer {
  padding:18px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  border-top:1.5px solid var(--ink);
  background:var(--ink);
  color:var(--white);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.mobile-menu-cta {
  width:100%;
  justify-content:center;
  padding:13px 18px;
  font-size:12px;
  letter-spacing:0.8px;
}
.mobile-menu-secondary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.mobile-menu-login {
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:var(--white);
  padding:6px 4px;
  position:relative;
  transition:color .15s;
}
.mobile-menu-login::after {
  content:'';
  position:absolute;
  left:4px; right:4px;
  bottom:3px;
  height:1px;
  background:rgba(255,255,255,.4);
  transition:background .15s;
}
.mobile-menu-login:hover { color:var(--yellow) }
.mobile-menu-login:hover::after { background:var(--yellow) }

.mobile-menu-phone {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  color:var(--white);
  letter-spacing:0.4px;
  padding:6px 4px;
  transition:color .15s;
}
.mobile-menu-phone svg {
  width:14px; height:14px;
  color:var(--orange);
  flex-shrink:0;
}
.mobile-menu-phone:hover { color:var(--orange) }

.mobile-menu-backdrop {
  position:fixed;
  inset:0;
  background:rgba(21,21,26,.4);
  backdrop-filter:blur(4px);
  z-index:150;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s;
}
.mobile-menu-backdrop.open {
  opacity:1;
  pointer-events:auto;
}

body.menu-open {
  overflow:hidden;
  /* prevent any subpixel horizontal jiggle during slide */
  overflow-x:clip;
}

/* When menu is open, raise the nav above the drawer so the burger acts
   as the hamburger↔X toggle. Fade the logo so it doesn't distract. */
body.menu-open .nav { z-index:250 }
body.menu-open .nav-brand {
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.nav-brand { transition:opacity .25s ease }
body.menu-open .nav { background:transparent }

/* Short viewports (phone landscape) — let the whole drawer scroll
   so the menu list isn't crushed by the footer (BOEK + INLOGGEN + phone) */
@media (max-height:560px) {
  .mobile-menu {
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .mobile-menu-list {
    flex:none;
    overflow:visible;
    padding:8px 0;
  }
  .mobile-menu-list a {
    padding:13px 22px;
    font-size:18px;
    min-height:48px;
  }
  .mobile-menu-header {
    padding:12px 18px;
    position:sticky;
    top:0;
    z-index:2;
  }
  .mobile-menu-footer {
    padding:12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    gap:10px;
  }
}