/* ── Gedeelde chrome voor alle GevoelsAtlas-pagina's ─────────────
   Menubalk, hamburgermenu en footer. Geladen in de <head> vóór de
   pagina-eigen <style>, zodat een pagina indien nodig kan overschrijven.
   Gebruikt de design-tokens (var(--ink) etc.) die elke pagina zelf
   in :root definieert. */

/* ── NAV ─────────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink); padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  height: 54px; border-bottom: 3px solid var(--accent); overflow: hidden;
}
.nav-logo { font-family: 'Amatic SC', cursive; font-size: 1.6rem; font-weight: 700; line-height: 1; color: white; text-decoration: none; }
.nav-logo em { color: var(--yellow); font-style: normal; }
.nav-start {
  background: var(--accent); color: white;
  border: 2px solid white; border-radius: 8px;
  padding: 6px 16px; line-height: 1;
  font-family: 'Nunito', sans-serif;
  font-size: 0.72rem; font-weight: 900;
  text-decoration: none; letter-spacing: 0.04em;
  transition: all 0.12s;
}
.nav-start:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.nav-start::after { content: ''; display: inline-block; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 6px; vertical-align: middle; position: relative; top: -1px; }
.nav-dagboek { color: rgba(255,255,255,0.65); font-size: 0.72rem; font-weight: 800; text-decoration: none; letter-spacing: 0.04em; transition: color 0.12s; }
.nav-dagboek:hover { color: var(--yellow); }

/* ── HAMBURGER + UITKLAPMENU ─────────────────────────────────── */
.hamburger { background: none; border: none; cursor: pointer; padding: 6px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.hamburger span { display: block; width: 20px; height: 2px; background: white; border-radius: 1px; }
.nav-menu { display: none; position: fixed; top: 57px; right: 20px; background: var(--ink); min-width: 180px; z-index: 200; border-top: 3px solid var(--accent); border-bottom: 1px solid rgba(255,255,255,0.12); box-shadow: 4px 4px 0 rgba(0,0,0,0.3); }
.nav-menu.open { display: block; }
.nav-menu a { display: block; padding: 12px 24px; color: rgba(255,255,255,0.65); text-decoration: none; font-family: 'Nunito', sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; transition: color 0.12s; }
.nav-menu a:hover, .nav-menu a.actief { color: var(--yellow); }

/* ── FOOTER ──────────────────────────────────────────────────── */
footer {
  background: var(--ink); color: rgba(255,255,255,0.5);
  text-align: center; padding: 20px;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
footer a { color: var(--yellow); text-decoration: none; }

/* ── BEWEGING BEPERKEN ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
