/* ── Site navigatie — vast, uitklapbaar blokje ───────────
   Kleuren komen uit de backoffice (Navigatie) via de variabelen
   --nav-text, --nav-bg en --nav-open-bg (brandkleuren). */
:root { --nav-h: 49px; }

.site-nav {
  --nav-text-c: var(--nav-text, #fff);
  --nav-bg-c: var(--nav-bg, #121212);
  --nav-open-c: var(--nav-open-bg, #1c1c1c);

  --nav-w-closed: 150px;
  --nav-w-open: 332px;
  --nav-radius: 8px;          /* dicht */
  --nav-radius-open: 35px;    /* uitgeklapt */
  --nav-pad-x: 14px;          /* horizontale padding dicht (links) */
  --nav-pad-x-open: 25px;     /* horizontale padding uitgeklapt */

  position: relative;
  flex: none;
  width: var(--nav-w-closed);
  max-width: calc(100vw - 24px);
  border-radius: var(--nav-radius);
  background: var(--nav-bg-c);
  color: var(--nav-text-c);
  overflow: hidden;
  transition: width .45s cubic-bezier(.22, 1, .36, 1), border-radius .45s cubic-bezier(.22, 1, .36, 1), background-color .3s ease;
}

/* Vaste houder rechtsboven: optionele knop + menublokje naast elkaar */
.site-nav-wrap {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.site-nav-action {
  --act-bg-c: var(--act-bg, var(--nav-bg, #121212));
  --act-text-c: var(--act-text, var(--nav-text, #fff));
  --act-radius: 8px;
  --act-pad-x: 14px;

  display: none;
  align-items: center;
  gap: 8px;
  height: var(--nav-h);
  box-sizing: border-box;
  padding: 0 16px 0 var(--act-pad-x);
  border: 1.5px solid var(--act-bg-c);
  border-radius: var(--act-radius);
  background: var(--act-bg-c);
  color: var(--act-text-c);
  font-family: var(--font-body, 'BricolageGrotesque'), sans-serif;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  view-transition-name: site-nav-action;
  transition: background-color .25s ease, color .25s ease;
}

.site-nav-action__icon { flex: none; }

/* Enkel icoon: altijd een cirkel; de naam blijft beschikbaar voor schermlezers */
.site-nav-action.site-nav-action--icon { width: var(--nav-h); padding: 0; justify-content: center; border-radius: 50%; }
.site-nav-action--icon span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.site-nav-action--shape-none     { --act-radius: 0; }
.site-nav-action--shape-circular { --act-radius: calc(var(--nav-h) / 2); --act-pad-x: 24px; padding-right: 20px; }

/* Outline: rand en tekst in de kleur van het blokje, bij hover gevuld */
.site-nav-action--outline { background: transparent; color: var(--act-bg-c); }
.site-nav-action--outline:hover { background: var(--act-bg-c); color: var(--act-text-c); }

.site-nav-action--filled:hover { background: color-mix(in srgb, var(--act-bg-c), #fff 12%); border-color: transparent; }

@media (min-width: 1025px) { .site-nav-action--desktop { display: inline-flex; } }
@media (min-width: 701px) and (max-width: 1024px) { .site-nav-action--tablet { display: inline-flex; } }
@media (max-width: 700px) {
  .site-nav-action--mobile { display: inline-flex; }
  .site-nav-wrap.nav-open .site-nav-action { display: none; }   /* open menu heeft de ruimte nodig */
}

/* Vormen */
.site-nav--none     { --nav-radius: 0; --nav-radius-open: 0; }
.site-nav--circular { --nav-radius: calc(var(--nav-h) / 2); --nav-pad-x: 24px; }


.site-nav.is-open { width: var(--nav-w-open); border-radius: var(--nav-radius-open); background: var(--nav-open-c); }

/* Hover-uitbreiding enkel op apparaten met een echte muis (geen "plakkende" hover op touch) */
@media (hover: hover) {
  .site-nav:hover { width: var(--nav-w-open); background: var(--nav-open-c); }
}

/* ── Logo — links, scrolt mee met de pagina ──────────── */
.site-logo {
  position: absolute;       /* scrolt mee met de pagina; enkel het menu blijft vast staan */
  top: 12px;                 /* zelfde top + hoogte als .site-nav, zodat logo en knop op één lijn staan */
  left: 0;
  z-index: 190;
  display: flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0 60px;
}

.site-logo img {
  height: 30px;
  width: auto;
  display: block;
  border-radius: 0;
}

@media (max-width: 900px) {
  .site-logo { padding: 0 24px; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Kopregel: huidige pagina + plus ──────────────────── */
.site-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: var(--nav-h);
  padding: 0 16px 0 var(--nav-pad-x);
  transition: padding .45s cubic-bezier(.22, 1, .36, 1);
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-body, 'BricolageGrotesque'), sans-serif;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: left;
}

.site-nav__current {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Uitgeklapt: meer ruimte links en rechts */
.site-nav.is-open .site-nav__toggle { padding-inline: var(--nav-pad-x-open); }

/* Plus-teken: wordt een min wanneer het menu openstaat */
.site-nav__plus {
  position: relative;
  width: 10px;
  height: 10px;
  flex: none;
}

.site-nav__plus::before,
.site-nav__plus::after {
  content: '';
  position: absolute;
  background: currentColor;
  top: 50%;
  left: 50%;
  transition: transform .3s ease;
}

.site-nav__plus::before { width: 10px; height: 1.5px; transform: translate(-50%, -50%); }
.site-nav__plus::after  { width: 1.5px; height: 10px; transform: translate(-50%, -50%); }

.site-nav.is-open .site-nav__plus::after { transform: translate(-50%, -50%) rotate(90deg); }

/* ── Uitklapbaar paneel ───────────────────────────────── */
.site-nav__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}

.site-nav.is-open .site-nav__panel { grid-template-rows: 1fr; }

.site-nav__panel-inner {
  min-height: 0;
  overflow: hidden;
  width: var(--nav-w-open);
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  padding: 0 var(--nav-pad-x-open);
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility 0s linear .35s;
}

.site-nav.is-open .site-nav__panel-inner {
  visibility: visible;
  opacity: 1;
  padding-bottom: var(--nav-pad-x-open);
  transition: opacity .3s ease .05s, visibility 0s;
}

.site-nav__menu {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.site-nav__link {
  display: block;
  padding: 9px 0;
  font-family: var(--font-body, 'BricolageGrotesque'), sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  transition: opacity .15s;
}

.site-nav__menu:hover .site-nav__link { opacity: .5; }
.site-nav__menu .site-nav__link:hover { opacity: 1; }
.site-nav__link.is-active { opacity: 1; }
.site-nav__menu:not(:hover) .site-nav__link.is-active { opacity: 1; }

/* ── Taalwisselaar + versienummer ─────────────────────── */
.site-nav__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.site-nav__langs { display: flex; gap: 10px; }

.site-nav__lang-link,
.site-nav__version {
  color: inherit;
  text-decoration: none;
}

.site-nav__lang-link { opacity: .5; }
.site-nav__lang-link.is-active { opacity: 1; font-weight: 600; }
.site-nav__version { opacity: .6; }
a.site-nav__version:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav__panel, .site-nav__panel-inner, .site-nav__plus::before, .site-nav__plus::after {
    transition: none;
  }
}

/* ── Hamburger-icoon (enkel mobiel zichtbaar) ──────────── */
.site-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 20px;
  flex: none;
}

.site-nav__burger span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}

.site-nav.is-open .site-nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-nav.is-open .site-nav__burger span:nth-child(2) { opacity: 0; }
.site-nav.is-open .site-nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobiel: compact hamburger-menu ─────────────────────── */
@media (max-width: 700px) {
  .site-nav {
    --nav-w-closed: var(--nav-h) !important;                       /* dicht: enkel het icoon */
    --nav-w-open: min(260px, calc(100vw - 24px)) !important;       /* open: smaller dan op desktop */
  }

  /* Geen hover-uitbreiding op mobiel */
  .site-nav:hover:not(.is-open) {
    width: var(--nav-w-closed);
    background: var(--nav-bg-c);
  }

  .site-nav__current,
  .site-nav__plus { display: none; }

  .site-nav__burger { display: flex; }

  .site-nav__toggle {
    justify-content: flex-end;
    padding: 0 calc((var(--nav-h) - 20px) / 2);   /* icoon gecentreerd in het dichte blokje */
  }
}

/* ── Zachte paginaovergang ────────────────────────────────
   Cross-document View Transitions: de oude pagina vervaagt, de nieuwe
   schuift zacht in beeld. Navigatie en logo blijven staan (eigen naam),
   het blokje morpht van uitgeklapt naar dicht. Browsers zonder
   ondersteuning (bv. Firefox) negeren dit en navigeren gewoon direct. */
@view-transition { navigation: auto; }

.site-nav  { view-transition-name: site-nav; }
.site-logo { view-transition-name: site-logo; }

::view-transition-group(site-nav) {
  animation-duration: .45s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

::view-transition-old(root) {
  animation: page-out .15s ease both;
}

/* Nieuwe pagina: enkel een korte fade. De beweging van de inhoud doet AOS zelf, pas nadat de overgang klaar is
   (een tweede beweging hier zou met AOS botsen). */
::view-transition-new(root) {
  animation: page-in .2s ease both;
}

@keyframes page-out {
  to { opacity: 0; }
}

@keyframes page-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}