/* ============================================================
   Synly — gedeelde stijlen voor alle landingspagina's
   Paginaspecifieke CSS staat in de eigen <style>-blokken.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ══════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════ */
:root {
  /* ── Blauw (standaard) — accent: #2563EB ── */
  --accent:       #2563EB;
  --accent-dark:  #1D4ED8;
  --accent-light: #EFF6FF;
  --accent-rgb:   37, 99, 235;
  /* Tinted neutrals — 3 % blauw in lichte vlakken */
  --ink:          #0F1729;
  --muted:        #525D7A;
  --border:       #D5DBF0;
  --bg:           #F8FAFE;
  --surface:      #EEF2FF;
  --card-bg:      #FAFBFF;
  --nav-bg:       rgba(248,250,254,0.92);
  --nav-border:   #D5DBF0;
  --hero-bg:      #2563EB;
  --input-bg:     #FAFBFF;
  --radius:       10px;
  --shadow-sm:    0 1px 3px rgba(37,99,235,0.08), 0 0 0 1px rgba(37,99,235,0.04);
  --shadow-md:    0 4px 16px rgba(37,99,235,0.10), 0 1px 4px rgba(37,99,235,0.06);
  --shadow-lg:    0 12px 40px rgba(37,99,235,0.12), 0 2px 8px rgba(37,99,235,0.06);
}
[data-theme="nacht"] {
  --accent:       #60A5FA; --accent-dark:  #93C5FD; --accent-light: #172554;
  --accent-rgb:   96, 165, 250;
  --ink:          #EEF4FF; --muted:        #8FA8C8; --border:       #2C3E5A;
  --bg:           #0D1526; --surface:      #1A2840; --card-bg:      #1E2D44;
  --nav-bg:       rgba(13,21,38,0.92); --nav-border: #2C3E5A;
  --hero-bg:      #1E3A8A; --input-bg:     #1A2840;
  --shadow-sm:    0 1px 3px rgba(96,165,250,0.12), 0 0 0 1px rgba(96,165,250,0.06);
  --shadow-md:    0 4px 16px rgba(96,165,250,0.15), 0 1px 4px rgba(96,165,250,0.08);
  --shadow-lg:    0 12px 40px rgba(96,165,250,0.18), 0 2px 8px rgba(96,165,250,0.08);
}
[data-theme="krachtig"] {
  --accent:       #7C3AED; --accent-dark:  #6D28D9; --accent-light: #EDE9FE;
  --accent-rgb:   124, 58, 237;
  --ink:          #0F0B16; --muted:        #504D69; --border:       #D0CCD9;
  --bg:           #FAF9FF; --surface:      #F5F3FF; --card-bg:      #FAFAFF;
  --nav-bg:       rgba(250,249,255,0.95); --nav-border: #D0CCD9;
  --hero-bg:      #7C3AED; --input-bg:     #FAFAFF;
  --shadow-sm:    0 1px 3px rgba(124,58,237,0.08), 0 0 0 1px rgba(124,58,237,0.04);
  --shadow-md:    0 4px 16px rgba(124,58,237,0.10), 0 1px 4px rgba(124,58,237,0.06);
  --shadow-lg:    0 12px 40px rgba(124,58,237,0.12), 0 2px 8px rgba(124,58,237,0.06);
}
[data-theme="aarde"] {
  --accent:       #B45309; --accent-dark:  #92400E; --accent-light: #FEF3C7;
  --accent-rgb:   180, 83, 9;
  --ink:          #1C1917; --muted:        #6B6560; --border:       #E3D9D2;
  --bg:           #FDFAF5; --surface:      #FEF9EE; --card-bg:      #FFFBF2;
  --nav-bg:       rgba(253,250,245,0.92); --nav-border: #E3D9D2;
  --hero-bg:      #92400E; --input-bg:     #FFFBF2; --radius: 6px;
  --shadow-sm:    0 1px 3px rgba(180,83,9,0.08), 0 0 0 1px rgba(180,83,9,0.04);
  --shadow-md:    0 4px 16px rgba(180,83,9,0.10), 0 1px 4px rgba(180,83,9,0.06);
  --shadow-lg:    0 12px 40px rgba(180,83,9,0.12), 0 2px 8px rgba(180,83,9,0.06);
}
[data-theme="groen"] {
  --accent:       #059669; --accent-dark:  #047857; --accent-light: #ECFDF5;
  --accent-rgb:   5, 150, 105;
  --ink:          #101E1B; --muted:        #55676F; --border:       #A7F3D0;
  --bg:           #F4FCFA; --surface:      #F0FDF4; --card-bg:      #F7FDFB;
  --nav-bg:       rgba(244,252,250,0.92); --nav-border: #A7F3D0;
  --hero-bg:      #047857; --input-bg:     #F7FDFB;
  --shadow-sm:    0 1px 3px rgba(5,150,105,0.08), 0 0 0 1px rgba(5,150,105,0.04);
  --shadow-md:    0 4px 16px rgba(5,150,105,0.10), 0 1px 4px rgba(5,150,105,0.06);
  --shadow-lg:    0 12px 40px rgba(5,150,105,0.12), 0 2px 8px rgba(5,150,105,0.06);
}
[data-theme="koraal"] {
  --accent:       #E11D48; --accent-dark:  #BE123C; --accent-light: #FFE4E6;
  --accent-rgb:   225, 29, 72;
  --ink:          #1C1219; --muted:        #6A5460; --border:       #FECDD3;
  --bg:           #FEF8FA; --surface:      #FFF1F2; --card-bg:      #FFF6F8;
  --nav-bg:       rgba(254,248,250,0.92); --nav-border: #FECDD3;
  --hero-bg:      #E11D48; --input-bg:     #FFF6F8;
  --shadow-sm:    0 1px 3px rgba(225,29,72,0.08), 0 0 0 1px rgba(225,29,72,0.04);
  --shadow-md:    0 4px 16px rgba(225,29,72,0.10), 0 1px 4px rgba(225,29,72,0.06);
  --shadow-lg:    0 12px 40px rgba(225,29,72,0.12), 0 2px 8px rgba(225,29,72,0.06);
}
[data-theme="oceaan"] {
  --accent:       #0F766E; --accent-dark:  #0D6B63; --accent-light: #CCFBF1;
  --accent-rgb:   15, 118, 110;
  --ink:          #0E1F1D; --muted:        #546570; --border:       #99F6E4;
  --bg:           #F3FCFB; --surface:      #F0FDFA; --card-bg:      #F6FDFB;
  --nav-bg:       rgba(243,252,251,0.92); --nav-border: #99F6E4;
  --hero-bg:      #0F766E; --input-bg:     #F6FDFB;
  --shadow-sm:    0 1px 3px rgba(15,118,110,0.08), 0 0 0 1px rgba(15,118,110,0.04);
  --shadow-md:    0 4px 16px rgba(15,118,110,0.10), 0 1px 4px rgba(15,118,110,0.06);
  --shadow-lg:    0 12px 40px rgba(15,118,110,0.12), 0 2px 8px rgba(15,118,110,0.06);
}
[data-theme="zonsondergang"] {
  --accent:       #EA580C; --accent-dark:  #C2410C; --accent-light: #FFEDD5;
  --accent-rgb:   234, 88, 12;
  --ink:          #1C1917; --muted:        #6B6560; --border:       #FED7AA;
  --bg:           #FFFBF7; --surface:      #FFF7ED; --card-bg:      #FFFCF8;
  --nav-bg:       rgba(255,251,247,0.92); --nav-border: #FED7AA;
  --hero-bg:      #9A3412; --input-bg:     #FFFCF8;
  --shadow-sm:    0 1px 3px rgba(234,88,12,0.08), 0 0 0 1px rgba(234,88,12,0.04);
  --shadow-md:    0 4px 16px rgba(234,88,12,0.10), 0 1px 4px rgba(234,88,12,0.06);
  --shadow-lg:    0 12px 40px rgba(234,88,12,0.12), 0 2px 8px rgba(234,88,12,0.06);
}
[data-theme="staal"] {
  --accent:       #94A3B8; --accent-dark:  #CBD5E1; --accent-light: #1E293B;
  --accent-rgb:   148, 163, 184;
  --ink:          #EDF3FF; --muted:        #94A3B8; --border:       #2C3E58;
  --bg:           #0C1522; --surface:      #192840; --card-bg:      #1E2D42;
  --nav-bg:       rgba(12,21,34,0.92); --nav-border: #2C3E58;
  --hero-bg:      #1E293B; --input-bg:     #192840;
  --shadow-sm:    0 1px 3px rgba(148,163,184,0.12), 0 0 0 1px rgba(148,163,184,0.06);
  --shadow-md:    0 4px 16px rgba(148,163,184,0.15), 0 1px 4px rgba(148,163,184,0.08);
  --shadow-lg:    0 12px 40px rgba(148,163,184,0.18), 0 2px 8px rgba(148,163,184,0.08);
}

/* ══════════════════════════════════════════
   HULPKLASSEN
══════════════════════════════════════════ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100%; left: 0;
  background: var(--accent); color: #fff;
  padding: .6rem 1.25rem; border-radius: 0 0 var(--radius) 0;
  font-weight: 700; font-size: .9rem; text-decoration: none;
  z-index: 9999; transition: top .1s;
}
.skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ══════════════════════════════════════════
   BASE
══════════════════════════════════════════ */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink); background: var(--bg);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nav-border);
  padding: 0 2rem; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .3s, border-color .3s;
}
.logo {
  font-size: 1.25rem; font-weight: 700; color: var(--accent);
  letter-spacing: -0.5px; text-decoration: none; transition: color .3s;
  display: flex; align-items: center; gap: .5rem;
}
.badge {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink); background: var(--accent-light);
  border-radius: 4px; padding: 2px 7px; vertical-align: middle;
  transition: background .3s, color .3s;
}
.nav-right { display: flex; align-items: center; gap: 1.25rem; }

.lang-switcher {
  display: flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 3px;
  transition: background .3s, border-color .3s;
}
.lang-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 5px;
  border: none; background: transparent; cursor: pointer;
  font-size: .8rem; font-weight: 700; color: var(--muted);
  transition: background .15s, color .15s; line-height: 1;
}
.lang-btn .flag { font-size: 1rem; line-height: 1; }
.lang-btn:hover { color: var(--ink); }
.lang-btn.active { background: var(--card-bg); color: var(--ink); box-shadow: var(--shadow-sm); }

.nav-link {
  font-size: 0.9rem; font-weight: 600; color: var(--muted);
  text-decoration: none; transition: color .15s;
}
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--accent); }

/* ══════════════════════════════════════════
   KNOPPEN
══════════════════════════════════════════ */
.btn {
  display: inline-block; padding: .65rem 1.5rem;
  font-size: .95rem; font-weight: 600; text-decoration: none;
  border-radius: var(--radius); transition: all .15s; cursor: pointer; border: none;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ══════════════════════════════════════════
   DIVIDER / HERO OUTER
══════════════════════════════════════════ */
.section-divider { border: none; border-top: 1px solid var(--border); margin: 0; transition: border-color .3s; }
.hero-outer { background: var(--hero-bg); transition: background .3s; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer {
  border-top: 1px solid var(--border); padding: 2rem;
  text-align: center; font-size: .85rem; color: var(--muted);
  transition: border-color .3s;
}
footer a { color: var(--muted); text-decoration: underline; }
footer a:hover { color: var(--ink); }

/* ══════════════════════════════════════════
   THEMAKIEZER
══════════════════════════════════════════ */
.theme-switcher {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 40px; padding: .45rem .65rem;
  display: flex; align-items: center; gap: 5px;
  box-shadow: var(--shadow-md);
  transition: background .3s, border-color .3s;
}
.theme-btn {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid transparent; cursor: pointer;
  transition: transform .15s, border-color .15s;
  position: relative; flex-shrink: 0;
}
.theme-btn:hover { transform: scale(1.2); }
.theme-btn.active { border-color: var(--ink); }
.theme-btn[data-t="blauw"]         { background: #2563EB; }
.theme-btn[data-t="nacht"]         { background: #0F172A; }
.theme-btn[data-t="krachtig"]      { background: #7C3AED; }
.theme-btn[data-t="aarde"]         { background: #B45309; }
.theme-btn[data-t="groen"]         { background: #059669; }
.theme-btn[data-t="koraal"]        { background: #E11D48; }
.theme-btn[data-t="oceaan"]        { background: #0F766E; }
.theme-btn[data-t="zonsondergang"] { background: #EA580C; }
.theme-btn[data-t="staal"]         { background: linear-gradient(135deg, #334155, #94A3B8); }
.theme-btn::after {
  content: attr(data-label);
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%); font-size: .7rem; font-weight: 600;
  background: var(--ink); color: var(--bg);
  padding: 2px 7px; border-radius: 4px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s;
}
.theme-btn:hover::after,
.theme-btn:focus-visible::after { opacity: 1; }
.theme-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ══════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — gedeelde regels
══════════════════════════════════════════ */
@media (max-width: 480px) {
  nav { padding: 0 1.25rem; }
  .theme-switcher { bottom: 1rem; right: 1rem; }
  .lang-btn .label { display: none; }
}