/* ============================================
   BASE — Reset, typography, layout primitives
   ============================================ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  min-height: 100dvh;
  font-feature-settings: "ss01", "ss02", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* === Per-page workshop background. Body class kiest welke foto.
   Basis/fallback = Homepage2.webp (83 KB). hero.png en de zware
   jpg's zijn verwijderd bij de asset-opruiming van 2026-07-02. === */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image: url("../assets/Homepage2.webp");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  filter: blur(28px) saturate(0.90) brightness(0.42);
  opacity: 0.7;
  transform: scale(1.12);
}

body.page-home::before {
  background-image: url("../assets/Homepage2.webp");
  filter: blur(24px) saturate(0.92) brightness(0.45);
  opacity: 0.75;
}
body.page-reparaties::before {
  background-image: url("../assets/bg-reparaties.webp");
}
body.page-mods::before {
  background-image: url("../assets/bg-mods.webp");
}
/* page-builder / faq / over / contact gebruiken de basis (Homepage2.webp) */

/* === Top overlay: gradients + grain that anchor content === */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 0, 0, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 0, 0, 0.08) 0%, transparent 65%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.62) 0%, rgba(5, 5, 5, 0.86) 100%);
}

/* === Faint grain layer === */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.045 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  opacity: 0.6;
  mix-blend-mode: overlay;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: var(--c-red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ---- Typography utilities ---- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);                 /* iets vetter = beter leesbaar */
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-red-text);                    /* helderdere rode voor leesbaarheid */
  text-shadow: var(--shadow-red-text);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--c-red-text);
}

.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

.h1 { font-size: var(--fs-hero); }
.h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
.h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.h4 { font-size: var(--fs-xl); }

.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--c-text-dim);
  max-width: 60ch;
}

.muted   { color: var(--c-text-dim); }
.faint   { color: var(--c-text-muted); }
.accent  { color: var(--c-red-text); text-shadow: var(--shadow-red-text); }
.mono    { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* === Globale leesbaarheid-fixes voor rode tekst ===
   Inline-elementen zoals <a>, <strong>, <small>, <span> die als tekst
   het rode merk-kleur dragen → forceer de leesbaardere variant +
   subtiele schaduw. Knoppen/borders/iconen vallen hier NIET onder,
   die behouden het diepe bordeaux. */
a[style*="--c-red"]:not(.btn),
span[style*="--c-red"]:not(.btn),
strong[style*="--c-red"] {
  color: var(--c-red-text) !important;
  text-shadow: var(--shadow-red-text);
}

/* Inline-styled rode tekst (veel inline color in HTML) opvangen.
   Vervangt diepe #ff0000 / var(--c-red) text-color door leesbare variant. */
[style*="color:var(--c-red)"]:is(a, span, strong, em, small, p),
[style*="color: var(--c-red)"]:is(a, span, strong, em, small, p) {
  color: var(--c-red-text) !important;
}

/* ---- Layout helpers ---- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
}
.container--narrow { max-width: var(--container-sm); }
.container--xs     { max-width: var(--container-xs); }

.section {
  position: relative;
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  z-index: 1;
}
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }

.grid { display: grid; gap: var(--s-5); }
.flex { display: flex; gap: var(--s-4); }
.flex-col { display: flex; flex-direction: column; gap: var(--s-4); }
.between { justify-content: space-between; align-items: center; }
.center { align-items: center; justify-content: center; }

.hr-line {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--c-border) 30%, var(--c-border) 70%, transparent);
}

/* ---- Reveal on scroll ---- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion respects */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}