/* Reset, typography, layout and the global shell (header, display panel, footer).
 * Only semantic tokens are used here. */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--lh);
  color: var(--text);
  background: transparent;     /* <html> paints --bg; the atmosphere layer sits between the two */
  overflow-x: hidden;
}

/* Atmosphere layer behind every public page: warm candle glow top left, a touch of wine red on
 * the right, champagne gold at the bottom and a fine linen grain. Fixed, so it does not repaint
 * while scrolling. z-index -2: under the homepage mission band (-1) and the light tree (0). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(90vmax 38vmax at 50% 118%, var(--amb-ember), transparent 70%),
    radial-gradient(40vmax 30vmax at 0% 100%, var(--amb-ember-2), transparent 70%),
    radial-gradient(40vmax 30vmax at 100% 100%, var(--amb-ember-2), transparent 70%),
    radial-gradient(45vmax 35vmax at 100% 0%, var(--amb-pine), transparent 70%),
    radial-gradient(60vmax 45vmax at var(--amb-candle-at), var(--amb-candle), transparent 70%),
    radial-gradient(45vmax 55vmax at 105% 30%, var(--amb-wine), transparent 70%),
    radial-gradient(70vmax 40vmax at 50% 112%, var(--amb-gold), transparent 70%),
    var(--amb-base);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: var(--amb-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Other pages (not the homepage, which has the light tree): a few soft, out-of-focus candle lights
 * (bokeh) along the edges, far away from the reading column */
body:not(.has-lichtboom)::before {
  background:
    radial-gradient(circle at 93% 16%, var(--amb-bokeh) 0 26px, transparent 60px),
    radial-gradient(circle at 97% 30%, var(--amb-bokeh-2) 0 14px, transparent 38px),
    radial-gradient(circle at 88% 38%, var(--amb-bokeh-2) 0 8px, transparent 26px),
    radial-gradient(circle at 4% 62%, var(--amb-bokeh) 0 20px, transparent 50px),
    radial-gradient(circle at 8% 76%, var(--amb-bokeh-wine) 0 12px, transparent 34px),
    radial-gradient(circle at 95% 84%, var(--amb-bokeh-2) 0 18px, transparent 46px),
    radial-gradient(circle at 12% 90%, var(--amb-ember) 0 5px, transparent 16px),
    radial-gradient(circle at 86% 94%, var(--amb-ember) 0 4px, transparent 14px),
    radial-gradient(90vmax 38vmax at 50% 118%, var(--amb-ember), transparent 70%),
    radial-gradient(40vmax 30vmax at 0% 100%, var(--amb-ember-2), transparent 70%),
    radial-gradient(40vmax 30vmax at 100% 100%, var(--amb-ember-2), transparent 70%),
    radial-gradient(45vmax 35vmax at 100% 0%, var(--amb-pine), transparent 70%),
    radial-gradient(60vmax 45vmax at var(--amb-candle-at), var(--amb-candle), transparent 70%),
    radial-gradient(45vmax 55vmax at 105% 30%, var(--amb-wine), transparent 70%),
    radial-gradient(70vmax 40vmax at 50% 112%, var(--amb-gold), transparent 70%),
    var(--amb-base);
}
/* Light theme: the golden glow sits behind the tree (right on wide screens on the homepage) */
@media (min-width: 1024px) {
  html:not([data-theme="dark"]) body.has-lichtboom { --amb-at: 80% 48%; --amb-candle-at: 80% 48%; }
}
/* The back office stays calm and functional: no atmosphere layer */
html[data-area="beheer"] body::before, html[data-area="beheer"] body::after { display: none; }

img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
strong, b { font-weight: 700; }
code { font-size: .9em; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 .5em;
}
.display { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-display); letter-spacing: -0.025em; line-height: 1.05; color: var(--text); }
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 650; letter-spacing: -0.005em; line-height: 1.25; }
h4 { font-size: 1.05rem; font-weight: 650; }

a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2.5px; }

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

.lead { font-size: 1.05rem; color: var(--muted); max-width: 38em; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.legal { font-size: var(--fs-legal); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Layout */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 780px; }
.section { padding: clamp(44px, 6vw, 80px) 0; }
.section-soft { background: var(--surface-soft); }
.stack > * + * { margin-top: var(--stack, 16px); }
.grid { display: grid; gap: 20px; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

main { flex: 1; outline: none; }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 12px 20px; border-radius: var(--radius-pill); font-weight: 700;
}
.skip-link:focus { top: 12px; color: var(--on-accent); }

/* ---------- Header (prompt 9.1) ----------
 * Sticky on every page and shrinks after ~40px of scrolling (.is-compact, set by an
 * IntersectionObserver in layout.js). The page must not jump: while the row loses
 * height, the header gains the same amount as margin-bottom, so its place in the flow
 * stays the same. Anchors and focus stay clear of it through scroll-padding-top. */
:root {
  --hdr-h: 88px; --hdr-h-compact: 64px;          /* height of the logo row */
  --logo-h: 68px; --logo-h-compact: 50px;        /* text-only word mark, roughly 1.56 : 1 */
  --hdr-dur: 220ms;
}
@media (max-width: 479px) {
  :root { --hdr-h: 72px; --hdr-h-compact: 60px; --logo-h: 56px; --logo-h-compact: 46px; }
}
#top-marker { position: absolute; top: 0; left: 0; width: 1px; height: 40px; pointer-events: none; visibility: hidden; }
#shell-top { display: contents; }               /* so the header sticks to the whole page, not to this wrapper */
html { scroll-padding-top: calc(var(--hdr-h-compact) + 12px); }
html[data-area="beheer"] { scroll-padding-top: calc(var(--hdr-h-compact) + 60px); }

/* Frosted glass (feedback 02-10): sticky, half-transparent and blurred, so the page shows through softly */
.site-header {
  position: sticky; top: 0; z-index: 20; background: var(--hdr-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: none; margin-bottom: 0;
  transition: margin-bottom var(--hdr-dur) ease-out, box-shadow var(--hdr-dur) ease-out, background-color var(--hdr-dur) ease-out;
}
/* Homepage: while the header lies over the hero photo (top of the page) it is dark glass with white
 * text and the white logo. After ~40px of scrolling (.is-compact) it becomes the normal frosted header. */
body.has-hero .site-header:not(.is-compact) { background: linear-gradient(180deg, rgba(8, 12, 10, .55), rgba(8, 12, 10, .20)); }
body.has-hero .site-header:not(.is-compact)::after { opacity: .35; }
body.has-hero .site-header:not(.is-compact) .header-inner { --text: #FFFFFF; --accent: #FFFFFF; --surface-soft: rgba(255, 255, 255, .14); --accent-soft: rgba(255, 255, 255, .18); color: #FFFFFF; }
body.has-hero .site-header:not(.is-compact) .logo .logo-img.logo-v-light { display: none; }
body.has-hero .site-header:not(.is-compact) .logo .logo-img.logo-v-dark { display: inline; }
body.has-hero .site-header:not(.is-compact) :focus-visible { outline-color: #FFFFFF; }
.header-inner {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--hdr-h);
  transition: min-height var(--hdr-dur) ease-out;
}
/* Thin glowing line under the header: pine at the ends, ember in the middle */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--hdr-line); pointer-events: none; }
.site-header.is-compact { margin-bottom: calc(var(--hdr-h) - var(--hdr-h-compact)); box-shadow: 0 6px 18px -8px rgb(0 0 0 / .18); }
.site-header.is-compact .header-inner { min-height: var(--hdr-h-compact); }
.logo {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto; flex-shrink: 0;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.015em;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.logo:hover { color: var(--text); }
.logo svg { width: 30px; height: 36px; flex-shrink: 0; }
.logo-img { height: var(--logo-h); width: auto; max-width: none; transition: height var(--hdr-dur) ease-out; }
.logo .logo-img.logo-v-light { display: var(--logo-show-light); }
.logo .logo-img.logo-v-dark { display: var(--logo-show-dark); }
.is-compact .logo-img { height: var(--logo-h-compact); }
@media (prefers-reduced-motion: reduce) {
  .site-header, .header-inner, .logo-img { transition: none; }
}

.main-nav { display: none; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.main-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 14px; white-space: nowrap;
  color: var(--text); text-decoration: none; border-radius: var(--radius-pill);
}
.main-nav a:hover { background: var(--surface-soft); color: var(--text); }
.main-nav a[aria-current="page"] { background: var(--accent-soft); font-weight: 700; }

.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: var(--tap-min); height: var(--tap-min); padding: 0 12px; flex-shrink: 0;
  border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--text);
  cursor: pointer; text-decoration: none; font-weight: 700;
}
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--surface-soft); color: var(--text); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn .btn-text { font-size: var(--fs-small); }
/* Theme toggle: only an icon, no heavy block. Moon in light (switch to dark), sun in dark.
 * Icon colour follows the house style (pine / light pine), not yellow. Sized in rem: scales with zoom. */
.theme-toggle {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--accent); cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.theme-toggle:hover { background: var(--accent-soft); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 1.35rem; height: 1.35rem; }
.theme-toggle .ic-sun, [data-theme="dark"] .theme-toggle .ic-moon { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun { display: inline-flex; }

/* Menu: an overlay over the full width, under the header, scrollable when long */
.mobile-menu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 25;
  max-height: calc(100vh - var(--hdr-h)); overflow-y: auto;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 16px 24px -12px rgb(0 0 0 / .25); padding: 8px var(--gutter) 24px;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu li a {
  display: flex; align-items: center; min-height: 56px; font-size: 1.05rem; font-weight: 700;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line);
}

@media (max-width: 479px) {
  .logo { font-size: 1.12rem; gap: 8px; }
  .logo svg { width: 26px; height: 31px; }
  /* Hide the text visually but keep it as the accessible name; "Menu" always stays readable */
  .icon-btn:not(.menu-toggle) .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-inner { gap: 4px; }
  .icon-btn { padding: 0 10px; }
}
/* All nav items in the header only when they fit. The breakpoint is in em (64em = 1024px at the
 * default size), so with browser zoom or a larger default font the nav moves into the menu by itself. */
@media (min-width: 64em) {
  .main-nav { display: block; margin-right: 8px; }
  .menu-toggle { display: none; }
}

/* ---------- Footer ---------- */
/* The footer is always the green (dark-theme) footer, also in the light theme (feedback 02-10):
 * layout.js gives it data-theme="dark", so all tokens inside resolve to the dark values.
 * color is set here, otherwise it would inherit the light body text colour. */
.site-footer { position: relative; background: var(--ftr-glow), var(--surface); color: var(--text); padding: 56px 0 28px; margin-top: 0; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hdr-line); }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.2fr 2fr; align-items: start; } }
.footer-logo { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; }
.footer-logo svg { width: 28px; height: 34px; }
.footer-logo .logo-img { height: 88px; transition: none; }
.footer-logo .logo-img.logo-v-light { display: var(--logo-show-light); }
.footer-logo .logo-img.logo-v-dark { display: var(--logo-show-dark); }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footer-links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--text); }
.footer-bottom {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  color: var(--muted); font-size: var(--fs-legal);
}
.footer-bottom a { color: var(--muted); }

/* ---------- Fade-in on scroll ---------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }