/* ============================================================
   SmartPort v2 — gedeelde chrome voor alle pagina's
   - Paper-tint achtergrond (warm off-white)
   - Nieuwe top-nav met dropdown + zoekbalk
   - Ruimer sectie-ritme
   - Overrides voor sp-shared waar nodig
   ============================================================ */

:root {
  --sp-canvas: #F5F3EF;
  --sp-canvas-deep: #EFEBE4;
  --sp-line: rgba(71,66,65,0.10);
}

body { background: var(--sp-canvas); }

/* Content-container synchroon met de nav (1320px / 48px padding) */
body:has(.nav-v2) .container { max-width: 1320px; padding: 0 48px; }
body:has(.nav-v2) .container--narrow { max-width: 900px; padding: 0 48px; }
@media (max-width: 720px) {
  body:has(.nav-v2) .container,
  body:has(.nav-v2) .container--narrow { padding: 0 24px; }
}

/* Witte basis-secties krijgen geen 'strip'-gevoel meer:
   `.section--soft` was lichte cyan — nu transparant op de paper-tint. */
.section--soft { background: transparent; }
/* `.section--muted` blijft als rustig alternatief, maar zachter */
.section--muted { background: var(--sp-canvas-deep); }
/* Ruimer sectie-ritme als standaard */
.section { padding: 110px 0; }
/* Anchor-jump compensatie voor de sticky nav */
section[id], div[id].fact-strip { scroll-margin-top: 80px; }
@media (max-width: 720px) { .section { padding: 64px 0; } }

/* ============================================================
   NAV — sticky, transparant bovenaan, wit bij scroll
   ============================================================ */
.nav-v2 {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245,243,239,0);
  backdrop-filter: saturate(1.4) blur(0px);
  -webkit-backdrop-filter: saturate(1.4) blur(0px);
  border-bottom: 1px solid transparent;
  transition:
    background var(--dur-slow) var(--ease),
    backdrop-filter var(--dur-slow) var(--ease),
    -webkit-backdrop-filter var(--dur-slow) var(--ease),
    border-color var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease);
}
.nav-v2.is-scrolled {
  background:
    radial-gradient(ellipse 320px 80px at 18% 50%, rgba(0,186,240,0.14), transparent 70%),
    radial-gradient(ellipse 420px 90px at 82% 50%, rgba(162,224,250,0.20), transparent 70%),
    rgba(255,255,255,0.88);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--sp-line);
  box-shadow: 0 4px 18px rgba(8,28,52,0.04);
}
.nav-v2__inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1320px; margin: 0 auto; padding: 18px 48px;
}
.nav-v2__logo { display: flex; align-items: center; }
.nav-v2__logo img { height: 36px; width: auto; }

.nav-v2__items { display: flex; gap: 14px; align-items: center; }
.nav-v2__items a, .nav-v2__items button {
  position: relative;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500; color: var(--sp-charcoal);
  padding: 9px 6px; border-radius: 0; text-decoration: none;
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color var(--dur) var(--ease);
}
.nav-v2__items a::after, .nav-v2__items button::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px; bottom: 4px;
  height: 2px;
  background: var(--sp-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s var(--ease);
}
.nav-v2__items a:hover, .nav-v2__items button:hover { color: var(--sp-cyan-700); }
.nav-v2__items a.is-active { color: var(--sp-cyan-700); }
.nav-v2__items a.is-active::after,
.nav-v2__items a:hover::after,
.nav-v2__items button:hover::after,
.nav-v2__item--has-sub:hover > a::after,
.nav-v2__item--has-sub:hover > button::after,
.nav-v2__item--has-sub:focus-within > a::after,
.nav-v2__item--has-sub:focus-within > button::after { transform: scaleX(1); }

/* Dropdown */
.nav-v2__item--has-sub { position: relative; }
.nav-v2__item--has-sub > a,
.nav-v2__item--has-sub > button {
  /* zorgt dat zowel <a> als <button> identiek werken als parent-trigger */
}
.nav-v2__item--has-sub > a > svg,
.nav-v2__item--has-sub > button > svg {
  transition: transform var(--dur) var(--ease);
  margin-top: 1px;
}
.nav-v2__item--has-sub:hover > a > svg,
.nav-v2__item--has-sub:hover > button > svg,
.nav-v2__item--has-sub:focus-within > a > svg,
.nav-v2__item--has-sub:focus-within > button > svg { transform: rotate(180deg); }

.nav-v2__sub {
  position: absolute;
  top: calc(100% + 8px);
  left: -10px;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(8,28,52,0.18), 0 4px 14px rgba(8,28,52,0.06);
  padding: 8px;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s var(--ease);
  z-index: 5;
}
.nav-v2__item--has-sub:hover > .nav-v2__sub,
.nav-v2__item--has-sub:focus-within > .nav-v2__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-v2__sub a {
  position: relative;
  font-size: 14px; font-weight: 500;
  color: var(--sp-charcoal);
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-v2__sub a::after { content: none; }
.nav-v2__sub a:hover { background: rgba(0,186,240,0.08); color: var(--sp-cyan-700); }

.nav-v2__actions { display: flex; align-items: center; gap: 10px; }
.nav-v2__cta { font-size: 14px; padding: 10px 18px; }
.nav-v2__lang { position: relative; }
.nav-v2__lang-btn {
  height: 38px;
  padding: 0 12px 0 14px;
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  color: var(--sp-charcoal);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-v2__lang-btn:hover,
.nav-v2__lang.is-open .nav-v2__lang-btn {
  background: #fff;
  color: var(--sp-cyan-700);
  border-color: var(--sp-cyan);
}
.nav-v2__lang-btn svg {
  transition: transform var(--dur) var(--ease);
}
.nav-v2__lang.is-open .nav-v2__lang-btn svg { transform: rotate(180deg); }
.nav-v2__lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(8,28,52,0.12);
  z-index: 120;
}
.nav-v2__lang-menu[hidden] { display: none; }
.nav-v2__lang-menu li {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sp-charcoal-800);
  line-height: 1.3;
}
.nav-v2__lang-menu li a {
  display: block;
  color: inherit;
  text-decoration: none;
  margin: -10px -12px;
  padding: 10px 12px;
  border-radius: 8px;
}
.nav-v2__lang-menu li.is-active {
  font-weight: 700;
  color: var(--sp-cyan-700);
  background: rgba(0,186,240,0.08);
}
.nav-v2__lang-menu li.is-disabled {
  color: var(--neutral-400);
  cursor: not-allowed;
}
.nav-v2__lang-menu li:not(.is-disabled):not(.is-active):hover,
.nav-v2__lang-menu li:not(.is-disabled):not(.is-active) a:hover {
  background: rgba(0,186,240,0.08);
  color: var(--sp-cyan-700);
}
.nav-v2__search {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  color: var(--sp-charcoal);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-v2__search:hover { background: #fff; color: var(--sp-cyan-700); border-color: var(--sp-cyan); }

/* ============================================================
   ZOEKBALK — overlay boven de nav
   ============================================================ */
.search-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--sp-line);
  box-shadow: 0 8px 24px rgba(8,28,52,0.06);
  transform: translateY(-100%);
  transition: transform 0.36s var(--ease);
}
.search-bar.is-open { transform: translateY(0); }
.search-bar__inner {
  max-width: 1320px; margin: 0 auto; padding: 22px 48px;
  display: flex; align-items: center; gap: 16px;
}
.search-bar__icon { color: var(--sp-cyan-700); flex-shrink: 0; }
.search-bar__input {
  flex: 1;
  background: transparent; border: none; outline: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: 28px; letter-spacing: -0.015em;
  color: var(--sp-charcoal-800);
}
.search-bar__input::placeholder { color: var(--neutral-400); font-weight: 500; }
.search-bar__hint { font-size: 12px; color: var(--neutral-500); font-family: var(--font-mono); flex-shrink: 0; }
.search-bar__hint kbd {
  display: inline-block; padding: 3px 7px; margin: 0 2px;
  background: #fff; border: 1px solid var(--border-2); border-bottom-width: 2px;
  border-radius: 5px; font-family: inherit; font-size: 11px; color: var(--sp-charcoal-800);
}
.search-bar__close {
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--neutral-100); border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sp-charcoal-800);
  transition: background var(--dur) var(--ease);
  flex-shrink: 0;
}
.search-bar__close:hover { background: var(--neutral-200); }
.search-bar__scrim {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(8, 28, 52, 0.22);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.36s var(--ease), visibility 0.36s var(--ease);
}
.search-bar__scrim.is-open { opacity: 1; visibility: visible; }

/* ============================================================
   PAGE HERO (detail-pagina's) — afgestemd op paper-tint
   Standaard hero op deze pagina's was donker (charcoal).
   In v2 maken we deze licht en luchtig.
   ============================================================ */
.hero.hero--detail,
.hero.hero--detail.hero-v2-light {
  background: transparent;
  color: var(--sp-charcoal-800);
  padding: 80px 0 36px;
  position: relative;
  overflow: hidden;
}
.hero.hero--detail::before { display: none; }
.hero-v2-light h1 { color: var(--sp-charcoal-800); }
.hero-v2-light h1 em { color: var(--sp-cyan-700); font-style: normal; }
.hero-v2-light .hero__lead { color: var(--sp-charcoal-600); }
.hero-v2-light .hero__fact { color: var(--sp-charcoal-600); }
.hero-v2-light .hero__fact strong { color: var(--sp-charcoal-800); }
.hero-v2-light .breadcrumb,
.hero-v2-light .breadcrumb a { color: var(--sp-charcoal-600); }
.hero-v2-light .breadcrumb a:hover { color: var(--sp-cyan-700); }

/* Twee zachte halo's onder de pagina-hero — echo van homepage */
.hero-v2-light::after,
.hero-v2-light::before {
  content: ""; position: absolute;
  pointer-events: none; z-index: 0;
  border-radius: 50%; filter: blur(8px);
}
.hero-v2-light::before {
  left: -160px; top: -260px;
  width: 720px; height: 720px;
  background: radial-gradient(circle,
    rgba(0,186,240,0.18) 0%,
    rgba(0,186,240,0.08) 35%,
    transparent 70%);
}
.hero-v2-light::after {
  right: -180px; top: 80px;
  width: 800px; height: 800px;
  background: radial-gradient(circle,
    rgba(162,224,250,0.24) 0%,
    rgba(0,186,240,0.06) 35%,
    transparent 70%);
}
.hero-v2-light .container,
.hero-v2-light > .hero__inner { position: relative; z-index: 1; }

.hero-v2-light .hero__lead {
  font-size: 20px;
  max-width: 740px;
  margin: 16px 0 24px;
}
.hero-v2-light .hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-v2-light .chip--roadmap {
  background: var(--sp-cyan-50);
  color: var(--sp-cyan-700);
  border: 1px solid var(--sp-light-cyan);
  text-decoration: none;
}
.hero-v2-light .chip--roadmap:hover {
  background: var(--sp-cyan-100);
  border-color: var(--sp-cyan);
}
/* Project-detail: intro + beeld op één rij; partners eronder over volle breedte */
.hero--detail-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 38%, 400px);
  gap: 32px 56px;
  align-items: center;
}
.hero--detail-intro { min-width: 0; }
.hero--detail-intro .hero__lead { max-width: 56ch; }
.hero--detail-intro .hero__actions { margin-bottom: 0; }
.hero-v2-light .hero__partners {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--sp-line);
}
.hero-v2-light .hero__partners .eyebrow {
  color: var(--neutral-500);
  margin-bottom: 12px;
}
.hero-v2-light .hero__partners .partner-row {
  background: #fff;
  border-color: var(--sp-line);
}
.hero-v2-light .hero__partners .partner-logo { color: var(--neutral-500); }
.hero--detail-grid .hero__media {
  width: 100%;
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: transparent;
  box-shadow: 0 24px 48px -28px rgba(8, 28, 52, 0.14);
}
.hero--detail-grid .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: middle;
}
.hero--detail-no-media .hero--detail-top {
  grid-template-columns: 1fr;
  max-width: 860px;
}
.hero--detail-no-media .hero--detail-intro .hero__lead {
  max-width: 64ch;
}
.hero--detail-grid .hero__cta-box { margin-top: 28px; }
@media (max-width: 900px) {
  .hero--detail-top {
    grid-template-columns: 1fr;
  }
  .hero--detail-grid .hero__media {
    order: -1;
    aspect-ratio: 16 / 9;
    max-height: 280px;
  }
}

/* Verkennings-CTA op lichte hero */
.hero-v2-light .hero__cta-box {
  background: var(--sp-cyan-50);
  border: 1px solid var(--sp-light-cyan);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  max-width: 640px;
}
.hero-v2-light .hero__cta-box .eyebrow { color: var(--sp-cyan-700); margin-bottom: 8px; }
.hero-v2-light .hero__cta-box p {
  color: var(--sp-charcoal-600);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.hero-v2-light .hero__cta-box .hero__actions { margin-bottom: 0; }

/* btn--secondary op paper-tint: hover → witte vulling i.p.v. cyan-border */
.btn--secondary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--sp-charcoal-800);
  box-shadow: var(--shadow-1);
}

/* Verberg de oude .sp-nav als beide aanwezig zijn (veiligheid) */
body:has(.nav-v2) .sp-nav,
body:has(.nav-v2) .alert-banner--reserved { display: none; }

/* Card media: 4:3 verhouding op alle v2-pagina's
   (sp-shared gebruikt een vaste 160px hoogte; overschrijven) */
body:has(.nav-v2) .card__media {
  height: auto;
  aspect-ratio: 4 / 3;
}
body:has(.nav-v2) .card__media--sm {
  aspect-ratio: 16 / 9;
}

/* Hamburger — alleen mobiel zichtbaar */
.nav-v2__hamburger {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  color: var(--sp-charcoal-800);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-v2__hamburger:hover { background: #fff; border-color: var(--sp-cyan); color: var(--sp-cyan-700); }

/* ============================================================
   MOBIEL DRAWER — slidet vanaf rechts
   ============================================================ */
.mobile-drawer__scrim {
  position: fixed; inset: 0; z-index: 198;
  background: rgba(8, 28, 52, 0.32);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.32s var(--ease), visibility 0.32s var(--ease);
}
.mobile-drawer__scrim.is-open { opacity: 1; visibility: visible; }
.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: 199;
  width: min(92vw, 380px);
  background: var(--sp-canvas);
  border-left: 1px solid var(--sp-line);
  box-shadow: -8px 0 32px rgba(8,28,52,0.16);
  transform: translateX(100%);
  transition: transform 0.36s var(--ease);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__head {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px;
  border-bottom: 1px solid var(--sp-line);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
}
.mobile-drawer__logo img { height: 32px; width: auto; }
.mobile-drawer__close {
  width: 38px; height: 38px; border-radius: 999px;
  background: #fff; border: 1px solid var(--sp-line); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sp-charcoal-800);
}
.mobile-drawer__nav {
  display: flex; flex-direction: column;
  padding: 16px 12px 28px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-drawer__nav > a,
.mobile-drawer__group > a {
  display: flex; align-items: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: 18px; color: var(--sp-charcoal-800);
  padding: 14px 18px; border-radius: 10px;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mobile-drawer__nav > a:hover,
.mobile-drawer__group > a:hover { background: #fff; color: var(--sp-cyan-700); }
.mobile-drawer__nav a.is-active { color: var(--sp-cyan-700); background: rgba(0,186,240,0.08); }
.mobile-drawer__group { display: flex; flex-direction: column; }
.mobile-drawer__sub {
  display: flex; flex-direction: column;
  /* 18px = zelfde inspringing als level-1 padding-left → lijn op tekstrand */
  margin: -2px 12px 6px 18px;
  padding-left: 10px;
  border-left: 2px solid rgba(0, 186, 240, 0.22);
}
.mobile-drawer__sub a {
  display: block;
  font-family: var(--font-body); font-weight: 500;
  font-size: 15px; color: var(--sp-charcoal-800);
  padding: 10px 18px 10px 0; border-radius: 8px;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mobile-drawer__sub a:hover { background: rgba(255,255,255,0.85); color: var(--sp-cyan-700); }

/* Compact menu op smal scherm */
@media (max-width: 900px) {
  .nav-v2__items { display: none; }
  .nav-v2__cta { display: none; }
  .nav-v2__hamburger { display: inline-flex; }
}
@media (max-width: 720px) {
  .nav-v2__inner { padding: 14px 24px; }
  .search-bar__inner { padding: 18px 24px; }
  .search-bar__input { font-size: 20px; }
  .search-bar__hint { display: none; }
}