/* Gedeelde navigatie en voettekst voor alle pagina's, Nederlands en Engels.
   Wordt door build-nav.py in elke pagina gezet; deze stijl hoort daarbij.

   Losse stylesheet omdat de homepage zijn eigen inline stijlblok heeft en de andere pagina's
   api.css gebruiken. Zonder een gedeeld bestand zou het menu er per pagina anders uitzien. */

:root {
  --nav-ink: #0e1525;
  --nav-muted: #5a6478;
  --nav-line: #e8ebf2;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--nav-ink); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
  font: 600 15px Inter, sans-serif; text-decoration: none;
}
.skip:focus { left: 0; }

nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--nav-line);
}
nav .row {
  display: flex; align-items: center; gap: 14px;
  height: 64px; max-width: 1040px; margin: 0 auto; padding: 0 24px;
}
nav .logo {
  font-family: 'Space Grotesk', Inter, sans-serif; font-weight: 700; font-size: 21px;
  letter-spacing: -.5px; color: var(--nav-ink); text-decoration: none; margin-right: auto;
}
nav .logo b {
  background: linear-gradient(120deg, #6366f1 0%, #8b5cf6 45%, #ec4899 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.menu { display: flex; align-items: center; gap: 4px; }
.menu > a,
.sub-toggle {
  font: 600 15px Inter, sans-serif; color: var(--nav-ink); text-decoration: none;
  padding: 9px 12px; border-radius: 10px; background: none; border: 0; cursor: pointer;
  white-space: nowrap;
}
.menu > a:hover, .sub-toggle:hover { background: #f4f2ff; color: #6d28d9; }
.menu > a.actief { color: #6d28d9; background: #f4f2ff; }

/* Uitklap voor de ontwikkelaars-pagina's */
.has-sub { position: relative; }
.sub-toggle::after { content: " ▾"; font-size: 11px; color: var(--nav-muted); }
.has-sub .sub {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 300px;
  background: #fff; border: 1px solid var(--nav-line); border-radius: 16px; padding: 8px;
  box-shadow: 0 18px 44px rgba(20, 30, 60, .14);
}
.has-sub.open .sub { display: block; }
.has-sub .sub a {
  display: block; padding: 11px 14px; border-radius: 11px; text-decoration: none;
  color: var(--nav-ink);
}
.has-sub .sub a:hover { background: #f7f5ff; }
.has-sub .sub strong { display: block; font: 700 15px 'Space Grotesk', sans-serif; }
.has-sub .sub span { display: block; font-size: 13.5px; color: var(--nav-muted); margin-top: 2px; }

.menu a.lang {
  font: 700 13px Inter, sans-serif; letter-spacing: .5px;
  border: 1px solid var(--nav-line); padding: 7px 11px; margin-left: 4px; width: auto;
}
.menu a.lang:hover { border-color: #ddd6fe; }

.menu a.nav-cta {
  font: 600 14px Inter, sans-serif; color: #fff;
  background: var(--nav-ink); padding: 9px 16px; border-radius: 999px;
  text-decoration: none; margin-left: 4px; width: auto;
}
.menu a.nav-cta:hover { opacity: .9; background: var(--nav-ink); color: #fff; }

/* Hamburger, alleen op smalle schermen */
.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 10px; cursor: pointer;
  background: none; border: 1px solid var(--nav-line); border-radius: 11px;
}
.burger span { display: block; height: 2px; background: var(--nav-ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .burger { display: flex; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 64px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--nav-line);
    padding: 12px 16px 18px; box-shadow: 0 20px 40px rgba(20, 30, 60, .1);
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .menu.open { display: flex; }
  .menu > a, .sub-toggle { padding: 13px 14px; font-size: 16px; text-align: left; width: 100%; }
  /* Op mobiel geen uitklap maar gewoon de items eronder: minder tikken, minder verrassing. */
  .sub-toggle { color: var(--nav-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .8px; pointer-events: none; }
  .sub-toggle::after { content: ""; }
  .has-sub .sub { display: block; position: static; border: 0; box-shadow: none; padding: 0; min-width: 0; }
  .has-sub .sub a { padding: 12px 14px; }
  .menu a.lang { align-self: flex-start; width: auto; margin: 8px 0 0 14px; }
  .menu a.nav-cta { margin: 12px 0 0; text-align: center; width: 100%; }
}

/* Voettekst */
footer { border-top: 1px solid var(--nav-line); margin-top: 24px; }
footer .row {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px;
  padding: 30px 20px; color: var(--nav-muted); font-size: 13px; line-height: 1.5;
  max-width: 1040px; margin: 0 auto;
}
footer .row a { color: var(--nav-muted); }
footer .row a:hover { color: var(--nav-ink); }
footer .foot-links { margin-top: 4px; }
footer .foot-links a { color: #7c3aed; }