/* ============================================================================
   Vernova kernel - base.css
   Technische basis, GEEN visuele identiteit. Elke klant krijgt zijn eigen
   tokens, typografie en componenten bovenop dit bestand.

   Wat hier al opgelost is (en dus nooit meer per project herbouwd wordt):
   reset, box-sizing, media-defaults, focus-visible, reduced-motion,
   toegankelijke skip-link, form-basis, container, tap-targets, dvh-viewport.
   ========================================================================== */

/* --- tokens die elk project overschrijft ---------------------------------- */
:root {
  --bg: #ffffff;
  --fg: #16181a;
  --muted-fg: #5a6066;   /* moet >= 4.5:1 halen op --bg */
  --surface: #f5f6f7;
  --border: #dfe3e6;
  --accent: #16181a;
  --accent-fg: #ffffff;

  --font-body: system-ui, sans-serif;
  --font-display: var(--font-body);

  --radius: 12px;        /* tier 1: kaarten, panelen */
  --radius-pill: 999px;  /* tier 2: interactieve elementen */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 48px);

  --step: 4px;           /* spacing-schaal: veelvouden van --step */
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;                 /* nooit 100vh: mobiele adresbalk */
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4 { line-height: 1.15; text-wrap: balance; font-family: var(--font-display); }
p { text-wrap: pretty; max-width: 68ch; }
ul, ol { padding-inline-start: 1.2em; }
a { color: inherit; }

/* --- toegankelijkheid ----------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: 8px; top: 8px; z-index: 999;
  background: var(--accent); color: var(--accent-fg);
  padding: 12px 18px; border-radius: var(--radius);
  /* transform i.p.v. top: `top` animeren dwingt layout af op elke frame */
  transform: translateY(calc(-100% - 16px));
  transition: transform 150ms cubic-bezier(0.16, 1, 0.30, 1);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* alle interactieve elementen halen 44x44 */
a[class*="btn"], button, [role="button"], .tap {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- formulieren ---------------------------------------------------------- */
.field { display: grid; gap: calc(var(--step) * 2); margin-bottom: calc(var(--step) * 5); }
.field label { font-weight: 600; font-size: 0.9rem; }
.field label.req::after { content: " *"; color: var(--accent); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.field textarea { min-height: 140px; resize: vertical; }

.field[data-invalid] input,
.field[data-invalid] select,
.field[data-invalid] textarea { border-color: #b3261e; }

.field-error { display: none; color: #b3261e; font-size: 0.85rem; }
.field[data-invalid] .field-error { display: block; }

.form-success { display: none; }
form[data-submitted] .form-success { display: block; }
form[data-submitted] .form-body { display: none; }

/* --- reveal-animatie (opt-in via data-reveal) -----------------------------
   Dit is de minimale variant, voor projecten zonder bewegingslaag.
   Laad je motion.css erna, dan neemt dat bestand [data-reveal] volledig over
   met varianten, stagger en een eigen easing-vocabulaire. */
[data-reveal] { opacity: 0; transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.30, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.30, 1); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* --- footer credit (verplicht op elke oplevering, zie CLAUDE.md §4) ------- */
.credit {
  font-size: 0.85rem;
  color: var(--muted-fg);
}
.credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.credit a:hover,
.credit a:focus-visible { color: var(--fg); }

/* --- honeypot (contact.php): onzichtbaar voor mensen, niet display:none,
       want sommige bots slaan verborgen velden over --------------------------- */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- print ---------------------------------------------------------------- */
@media print {
  nav, .no-print { display: none !important; }
  body { color: #000; background: #fff; }
}