/* Merged: site.css (foundation) + components.css — one file to avoid an
   avoidable second render-blocking request (Lighthouse-verified 2026-07-25). */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/BigShouldersDisplay-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Foundation — generation restyles a site by REPLACING ONLY this custom-
   property block (+ component variants). Component CSS below never hardcodes
   colors/fonts/radii directly; it always reads these variables. That's how
   12 sites share the same component markup/CSS but don't look alike.
   ========================================================================== */

:root {
  /* -- identity: garagebedrijf-karol, redone 2026-07-25 under design-taste-
     frontend from the first line of CSS (not retrofitted). Design read:
     local-trade lead-gen site, trust-first but sturdy/industrial, not
     corporate-polished. Dials V5/M2/D4. Deliberately NOT a re-skin of the
     original attempt (dark navy + burnt-orange, monogram-split hero) — light
     concrete paper base, single steel-blue accent, condensed industrial
     display face. All contrast pairs computed, not eyeballed (see commit). -- */
  --kleur-accent: #1f5f91;
  --kleur-accent-donker: #163f60;
  --kleur-accent-op-donker: #6fa8d8;
  --kleur-donker: #14171a;
  --kleur-tekst: #191c1f;
  --kleur-tekst-zacht: #565c62;
  --kleur-achtergrond: #f5f5f3;
  --kleur-achtergrond-zacht: #e4e6e2;
  --kleur-rand: #d3d0c8;

  --font-kop: "Big Shoulders Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-tekst: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* sharp, stamped-metal corners — one radius everywhere (shape lock) */
  --radius: 2px;
  --radius-klein: 2px;

  /* spacing scale */
  --maat-1: 0.25rem;
  --maat-2: 0.5rem;
  --maat-3: 1rem;
  --maat-4: 1.5rem;
  --maat-5: 2.5rem;
  --maat-6: 4rem;
}

/* -- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-tekst);
  color: var(--kleur-tekst);
  background: var(--kleur-achtergrond);
  font-size: 16px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  font-family: var(--font-kop);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--maat-3);
}
h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
h3 { font-size: 1.3rem; color: var(--kleur-accent); line-height: 1.05; }
p { margin: 0 0 var(--maat-3); }
a { color: var(--kleur-accent); }
ul { padding-left: 1.2em; }

/* -- layout -- */
.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--maat-4);
}
.sectie {
  padding: var(--maat-6) 0;
}
.sectie--zacht {
  background: var(--kleur-achtergrond-zacht);
}
@media (max-width: 640px) {
  .container { padding: 0 var(--maat-3); }
  .sectie { padding: var(--maat-5) 0; }
}

/* -- buttons -- */
.btn {
  display: inline-block;
  padding: 0.85em 1.6em;
  border-radius: var(--radius);
  background: var(--kleur-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  min-height: 44px;
  line-height: 1.2;
}
.btn:hover, .btn:focus-visible { background: var(--kleur-accent-donker); }
.btn--outline {
  background: transparent;
  color: var(--kleur-accent);
  border: 2px solid var(--kleur-accent);
  padding: calc(0.85em - 2px) calc(1.6em - 2px);
}

/* -- forms (shared skeleton for the 3 form components) -- */
.formulier { max-width: 480px; }
.formulier label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--maat-1);
  margin-top: var(--maat-3);
}
.formulier input,
.formulier select,
.formulier textarea {
  width: 100%;
  padding: 0.7em 0.9em;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-klein);
  font: inherit;
  min-height: 44px;
  background: #fff;
  color: var(--kleur-tekst);
}
.formulier textarea { min-height: 100px; }
.formulier input::placeholder,
.formulier textarea::placeholder { color: var(--kleur-tekst-zacht); opacity: 1; }
.formulier input:focus-visible,
.formulier select:focus-visible,
.formulier textarea:focus-visible {
  outline: 2px solid var(--kleur-accent);
  outline-offset: 1px;
  border-color: var(--kleur-accent);
}
.formulier input:user-invalid,
.formulier textarea:user-invalid {
  border-color: #b42318;
}
.formulier label, .formulier input, .formulier textarea,
.dienst-kaart, .feit, h1, h2, h3 {
  overflow-wrap: break-word;
}
.formulier .honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formulier__disclaimer {
  /* 1rem, not smaller - doc 05 SS5 quality gate requires text >= 16px */
  font-size: 1rem;
  color: var(--kleur-tekst-zacht);
  margin-top: var(--maat-2);
}

/* -- utility -- */
.mt-5 { margin-top: var(--maat-5); }
.visueel-verborgen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Component styles — paired with the HTML markup in this site's pages.
   Reads only the custom properties above; never hardcodes a color/font/
   radius directly, so restyling a site is a :root block swap only. */

/* -- demo-banner -- */
.demo-banner {
  background: var(--kleur-donker);
  color: #fff;
  text-align: center;
  padding: var(--maat-2) var(--maat-3);
  font-size: 1rem;
}
.demo-banner a { color: #fff; text-decoration: underline; }

/* -- site-header -- */
.site-header {
  border-bottom: 3px solid var(--kleur-donker);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--maat-3);
  padding: var(--maat-3) 0;
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  font-family: var(--font-kop);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--kleur-tekst);
}
.site-header__nav {
  display: flex;
  gap: var(--maat-4);
}
.site-header__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: var(--kleur-tekst);
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.site-header__nav a:hover,
.site-header__nav a:focus-visible {
  color: var(--kleur-accent);
  border-bottom-color: var(--kleur-accent);
}
.site-header__toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}
@media (max-width: 640px) {
  .site-header__bel {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
  .site-header__bel::before {
    content: "\260E";
    font-size: 1.3rem;
  }
  .site-header__toggle { display: block; }
  .site-header__nav {
    display: none;
    flex-direction: column;
    width: 100%;
    padding-bottom: var(--maat-3);
  }
  .site-header__nav.is-open { display: flex; }
  .site-header__inner { flex-wrap: wrap; }
}

/* -- inline SVG brand mark: header only (small badge, not a hero visual) -- */
.merk-teken { flex-shrink: 0; }
.merk-teken rect { fill: var(--kleur-donker); }
.merk-teken text { fill: #fff; }

/* -- hero -- */
.hero { padding: var(--maat-6) 0 var(--maat-5); background: var(--kleur-achtergrond); }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(240px, 1fr);
  align-items: start;
  gap: var(--maat-5);
}
.hero__tekst { max-width: 640px; }
.hero__sub { font-size: 1.15rem; color: var(--kleur-tekst-zacht); max-width: 42ch; }

/* real-data trust panel — replaces the old decorative hero monogram */
.hero__stats {
  display: grid;
  gap: 1px;
  background: var(--kleur-rand);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  overflow: hidden;
}
.hero__stat {
  background: #fff;
  padding: var(--maat-3) var(--maat-4);
  min-width: 0;
}
.hero__stat-getal {
  display: block;
  font-family: var(--font-kop);
  font-weight: 900;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--kleur-accent);
}
.hero__stat-label {
  display: block;
  margin-top: 0.3em;
  font-size: 0.92rem;
  color: var(--kleur-tekst-zacht);
  line-height: 1.35;
}
@media (max-width: 768px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: repeat(3, 1fr); gap: 1px; }
  .hero__stat { padding: var(--maat-3) var(--maat-2); }
}
@media (max-width: 480px) {
  .hero__stats { grid-template-columns: 1fr; }
}

/* -- diensten-grid -- */
.diensten-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--maat-4);
  margin-top: var(--maat-4);
}
.dienst-kaart {
  padding: var(--maat-4);
  background: #fff;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  min-width: 0;
}
.dienst-kaart h3 { margin-bottom: var(--maat-2); }
.dienst-kaart p { margin-bottom: 0; color: var(--kleur-tekst-zacht); }
@media (max-width: 640px) {
  .diensten-grid { grid-template-columns: 1fr; }
}

/* -- feiten-strook (facts strip) — used on Over ons, a plain-language
   restyle of the old circle-icon usp-rij, not reused as-is -- */
.feiten-strook {
  display: grid;
  gap: 1px;
  background: var(--kleur-rand);
  border: 1px solid var(--kleur-rand);
  margin-top: var(--maat-4);
}
.feit {
  background: #fff;
  padding: var(--maat-3) var(--maat-4);
  display: flex;
  align-items: baseline;
  gap: var(--maat-3);
  min-width: 0;
}
.feit p { min-width: 0; overflow-wrap: break-word; }
.feit__markering {
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--kleur-accent);
}
.feit p { margin: 0; font-weight: 600; }
@media (min-width: 640px) {
  .feiten-strook { grid-template-columns: repeat(3, 1fr); }
}

/* -- kaart-locatie -- */
.kaart-locatie iframe { border-radius: var(--radius); border: 1px solid var(--kleur-rand); }
.kaart-locatie__adres { margin-top: var(--maat-2); color: var(--kleur-tekst-zacht); }

/* -- openingstijden-tabel -- */
.openingstijden-tabel { border-collapse: collapse; width: 100%; max-width: 320px; }
.openingstijden-tabel th, .openingstijden-tabel td {
  text-align: left;
  padding: var(--maat-1) var(--maat-2);
  border-bottom: 1px solid var(--kleur-rand);
  font-weight: 400;
}
.openingstijden-tabel th { font-weight: 600; }

/* -- site-footer -- */
.site-footer { background: var(--kleur-donker); color: #fff; }
.site-footer a { color: #fff; }
.site-footer__naam {
  font-family: var(--font-kop);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: 1.3rem;
  color: var(--kleur-accent-op-donker);
  margin: 0 0 var(--maat-3);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--maat-5);
  padding: var(--maat-5) 0;
}
.site-footer .openingstijden-tabel th,
.site-footer .openingstijden-tabel td { border-bottom-color: rgba(255,255,255,0.15); }