/* ==========================================================================
   bweijmanmontage.nl — site.css
   All custom CSS lives here. See docs/brand-and-ux.md for the direction
   and CLAUDE.md -> Styling Rules for the conventions.

   Order:  1. fonts  2. tokens  3. base  4. typography  5. bootstrap overrides
   ========================================================================== */


/* 1. FONTS ================================================================
   Richting A: Roboto Slab (koppen) + Inter (broodtekst).
   Self-hosted variable fonts — never hotlink Google Fonts (AVG: embedding
   sends visitor IPs to Google without consent). Weight range 400-700 comes
   from one file per subset; unicode-range means latin-ext is only fetched
   when a character in that range actually appears on the page.
   Both faces are SIL Open Font License.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/roboto-slab-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/roboto-slab-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. TOKENS ===============================================================
   Every colour is defined ONCE, here. Never paste a hex into a view or into
   a second rule — use var(--bw-*).

   RICHTING B — zwart, helder, en het groen van het bouwhekdoek.
   Open beslissing 14 uit docs/brand-and-ux.md is hiermee gemaakt: #16453C,
   de enige achtergrondkleur op Maikels doek, is de merkkleur. Brons is eruit.
   Het maakte de site warm, maar ook bruin — en bruin op beige leest niet als
   vakwerk maar als een keuken uit 1978. Wat ervoor in de plaats komt is de
   andere helft van de merkrichting, die er nog niet was: *chic*. Bijna-zwarte
   banden, helderwitte vlakken, en het groen als de enige kleur die iets
   betekent.

   Wat dit ook oplost: het brons haalde 3,9:1 op de canvasachtergrond en mocht
   daarom nooit tekst zijn (zie de waarschuwing in brand-and-ux.md). #16453C
   haalt 10,7:1 op wit — AAA — en mag dus gewoon een link zijn, een label, of
   een kop. Eén merkkleur voor alles in plaats van een accent plus een
   donkerder aftreksel ervan om tekst mee te zetten.
   -------------------------------------------------------------------------- */

:root {
  /* Merkkleuren. --bw-groen is de kleur van het doek zelf; de andere drie zijn
     zijn buren, en er is geen vijfde. Diep = ingedrukt, licht = aangewezen,
     helder = op zwart (waar #16453C wegvalt tegen de band). */
  --bw-groen: #16453c;
  --bw-groen-diep: #0e2e28;
  --bw-groen-licht: #1d5a4e;
  --bw-groen-helder: #57c79a;
  --bw-groen-vlak: #e6eeea;

  /* Messing. Één specerij, en hij ligt alleen onder de sterren van een review.
     Champagne in plaats van mosterd: naast zwart en groen moet goud fluisteren,
     anders wordt het een pilsbierlogo. */
  --bw-messing: #c8a96a;

  /* Accent op licht — het merkgroen zelf. Dat het hier geen aparte, donkerdere
     tekstkleur meer is, is precies de winst van deze richting. */
  --bw-accent-text: #16453c;

  /* Neutralen. Bijna neutraal, met een spoor groen erin, zodat het wit en het
     zwart bij de merkkleur hóren in plaats van er toevallig naast te staan. */
  --bw-ink: #0f1210;
  --bw-ink-soft: #39423e;
  --bw-muted: #69736e;
  --bw-line: #d9dfdb;
  --bw-line-strong: #b3bcb7;
  --bw-canvas: #f1f4f2;
  --bw-surface: #ffffff;
  --bw-surface-alt: #e7edea;
  --bw-charcoal: #1b211e;

  /* Donkere banden: zwart, niet donkerbruin — dat is de ene helft van "zwart
     en helder". Het zachte vlak erín is het merkgroen zelf, zodat de kleur van
     het doek in de hero staat en niet alleen in een knopje. */
  --bw-band: #0b0f0d;
  --bw-band-zacht: #16453c;
  --bw-op-donker: #f2f5f3;
  --bw-op-donker-zacht: #a8b4af;
  --bw-lijn-op-donker: #2a3733;

  /* Statuskleuren — voor documentstatussen (offerte, factuur). Let op het
     verschil tussen --bw-goed en --bw-groen: "goed" is gras, de merkkleur is
     bos. Ze moeten in één tabel naast elkaar kunnen staan zonder dat een
     akkoordbadge als sitechroom leest. */
  --bw-goed: #2c7a3f;
  --bw-goed-vlak: #e4f1e6;
  --bw-slecht: #a02c2c;
  --bw-slecht-vlak: #f8e8e7;
  --bw-aandacht: #8a6212;
  --bw-aandacht-vlak: #faf0d9;
  --bw-open: #3c5a78;
  --bw-open-vlak: #e8eef5;

  /* Typografie */
  --bw-font-heading: 'Roboto Slab', Rockwell, Georgia, serif;
  --bw-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Bootstrap 5 haakt hierop aan */
  --bs-body-font-family: var(--bw-font-body);
  --bs-body-color: var(--bw-ink);
  --bs-body-bg: var(--bw-canvas);
  /* ⚠️ Bootstrap 5.3 kleurt een <a> via de RGB-variant, niet via de hex:
        a       { color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity,1)) }
        a:hover { --bs-link-color-rgb: var(--bs-link-hover-color-rgb) }
     Alleen --bs-link-color zetten doet dus niets, en dát is waarom elke kale
     link op de publieke site Bootstrap-blauw (#0d6efd) bleef terwijl het
     palet allang groen was. De hex-varianten blijven staan omdat andere
     componenten (o.a. .link-* en .btn-link) ze wél lezen. */
  --bs-link-color: var(--bw-groen);
  --bs-link-color-rgb: 22, 69, 60;
  --bs-link-hover-color: var(--bw-groen-licht);
  --bs-link-hover-color-rgb: 29, 90, 78;
  --bs-border-color: var(--bw-line);
  --bs-primary: var(--bw-groen);
  --bs-primary-rgb: 22, 69, 60;
  --bs-focus-ring-color: rgba(22, 69, 60, 0.35);
}


/* 3. BASE =================================================================== */

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* De body is een kolom over de volle schermhoogte, zodat de footer onderaan
   blijft plakken: bij een korte pagina staat hij op de onderrand van het
   scherm, bij een lange wordt hij vooruitgeduwd. Dit vervangt de truc uit de
   scaffold (html position: relative + body margin-bottom + een absoluut
   gepositioneerde footer), die alleen klopt zolang de footer exact 60px hoog
   en een regel is — met twee regels viel hij over de inhoud heen.
   100dvh houdt rekening met de in- en uitschuivende browserbalk op mobiel;
   100vh blijft ervoor staan voor browsers die dvh niet kennen. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bw-canvas);
  color: var(--bw-ink);
  font-family: var(--bw-font-body);
  -webkit-font-smoothing: antialiased;
}

/* Het middenstuk rekt op en duwt de footer naar beneden; de footer zelf mag
   nooit krimpen. De regel staat hier en niet in _Layout.cshtml.css, omdat hij
   samenhangt met de body hierboven en ook geldt voor de admin- en
   portaallayout (die geen footer hebben, maar wel dezelfde body). */
body > .container,
body > .container-fluid {
  flex: 1 0 auto;
}

/* Zichtbare focus voor toetsenbordgebruikers — nooit weghalen. */
:focus-visible {
  outline: 2px solid var(--bw-accent-text);
  outline-offset: 2px;
}


/* 4. TYPOGRAPHY ============================================================
   Koppen in de slab, broodtekst in Inter. "Geblokt en hokkerig" uit de
   merkrichting: rechte hoeken, dunne randjes, geen zachte schaduwen.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.bw-heading {
  font-family: var(--bw-font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--bw-ink);
}

h1 { font-size: clamp(1.9rem, 4.5vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
h4 { font-size: 1.15rem; font-weight: 600; }
h5, h6 { font-size: 1rem; font-weight: 600; }

p, li {
  line-height: 1.65;
}

/* Lopende tekst rond de 65 tekens houden — leest het prettigst. */
.bw-prose {
  max-width: 65ch;
  color: var(--bw-ink-soft);
}

/* Klein label in kapitalen, voor eyebrows boven een kop. */
.bw-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bw-accent-text);
}

.bw-muted {
  color: var(--bw-muted);
}

/* Bedragen en aantallen: kolommen moeten uitlijnen. */
.bw-num,
td.bw-num,
th.bw-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Dunne, precieze randjes in plaats van schaduwen. */
.bw-panel {
  background-color: var(--bw-surface);
  border: 1px solid var(--bw-line);
  padding: 1.5rem;
}

.bw-rule {
  border: 0;
  border-top: 1px solid var(--bw-line);
  margin: 0;
}


/* 5. BOOTSTRAP OVERRIDES ==================================================
   Bootstrap's standaardblauw en afgeronde hoeken werken tegen de merkrichting.
   -------------------------------------------------------------------------- */

.btn-primary {
  --bs-btn-bg: var(--bw-groen);
  --bs-btn-border-color: var(--bw-groen);
  --bs-btn-hover-bg: var(--bw-groen-licht);
  --bs-btn-hover-border-color: var(--bw-groen-licht);
  --bs-btn-active-bg: var(--bw-groen-diep);
  --bs-btn-active-border-color: var(--bw-groen-diep);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
}

.btn-outline-primary {
  --bs-btn-color: var(--bw-groen);
  --bs-btn-border-color: var(--bw-groen);
  --bs-btn-hover-bg: var(--bw-groen);
  --bs-btn-hover-border-color: var(--bw-groen);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--bw-groen-diep);
  --bs-btn-active-border-color: var(--bw-groen-diep);
  --bs-btn-active-color: #ffffff;
}

.navbar-brand {
  font-family: var(--bw-font-heading);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Rechte hoeken: "geblokt en hokkerig". */
.btn,
.card,
.form-control,
.form-select,
.alert,
.badge,
.list-group-item {
  border-radius: 0;
}

.card {
  border-color: var(--bw-line);
  background-color: var(--bw-surface);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--bw-groen);
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
  background-color: var(--bw-groen);
  border-color: var(--bw-groen);
}

/* Scaffold-restanten uit de Bootstrap-template. */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Honeypot: off-screen field that real users never see or fill. */
.bw-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Behoud regelafbrekingen in door gebruikers ingevoerde tekst. */
.bw-pre {
  white-space: pre-wrap;
}


/* 6. DOCUMENTSTATUS =======================================================
   Eén badge, vier betekenissen. Welke klasse een status krijgt staat in
   OfferteStatusInfo.BadgeClass() — niet in de view, en niet hier.
   -------------------------------------------------------------------------- */

.bw-status {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  padding: 0.15em 0.6em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.bw-status-concept {
  background-color: var(--bw-surface-alt);
  border-color: var(--bw-line-strong);
  color: var(--bw-muted);
}

.bw-status-open {
  background-color: var(--bw-open-vlak);
  border-color: var(--bw-open);
  color: var(--bw-open);
}

.bw-status-goed {
  background-color: var(--bw-goed-vlak);
  border-color: var(--bw-goed);
  color: var(--bw-goed);
}

.bw-status-slecht {
  background-color: var(--bw-slecht-vlak);
  border-color: var(--bw-slecht);
  color: var(--bw-slecht);
}

.bw-status-aandacht {
  background-color: var(--bw-aandacht-vlak);
  border-color: var(--bw-aandacht);
  color: var(--bw-aandacht);
}

/* Het documentblad: een offerte op het scherm leest als het papier. */
.bw-document {
  background-color: var(--bw-surface);
  border: 1px solid var(--bw-line);
  padding: 1.5rem;
}

.bw-document-regel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--bw-line);
}

.bw-document-regel:last-of-type {
  border-bottom: 0;
}

/* De totaalregel: het bedrag waar het om gaat, groot en rustig. */
.bw-totaal {
  border-top: 2px solid var(--bw-groen);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

/* Een berichtendraad bij een offerte. */
.bw-draad-bericht {
  border-left: 3px solid var(--bw-line-strong);
  padding: 0.25rem 0 0.25rem 0.85rem;
  margin-bottom: 0.85rem;
}

.bw-draad-bericht.bw-van-barry {
  border-left-color: var(--bw-groen);
}

/* Vastgelegd akkoord: het bewijsstuk, bewust nuchter vormgegeven. */
.bw-akkoord {
  background-color: var(--bw-goed-vlak);
  border: 1px solid var(--bw-goed);
  padding: 1rem 1.25rem;
}

.bw-akkoord dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bw-muted);
}

.bw-akkoord dd {
  margin-bottom: 0.6rem;
  word-break: break-word;
}


/* 7. FOTO'S ===============================================================
   Uploads worden geserveerd door een controller (buiten de webroot), en zijn
   altijd webp. Vaste verhouding zodat een galerij niet gaat springen terwijl
   de plaatjes binnenkomen.
   -------------------------------------------------------------------------- */

.bw-foto-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: var(--bw-surface-alt);
  border: 1px solid var(--bw-line);
}

/* De omslagfoto boven een projectkaart. */
.bw-foto-omslag {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: var(--bw-surface-alt);
}

/* Staat er nog geen foto, dan een rustig vlak in plaats van een gat. */
.bw-foto-leeg {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background-color: var(--bw-surface-alt);
  color: var(--bw-muted);
  font-size: 0.85rem;
}


/* 8. VEELGESTELDE VRAGEN ==================================================
   <details>/<summary> in plaats van een accordeon met JavaScript: de tekst
   staat altijd in de pagina, werkt met het toetsenbord, en is exact wat het
   FAQPage-blok herhaalt. Alleen de standaard driehoek is vervangen, zodat de
   ingebouwde toetsenbediening en het open/dicht-gedrag intact blijven.
   -------------------------------------------------------------------------- */

.bw-faq {
  border-bottom: 1px solid var(--bw-line);
  padding: 0.85rem 0;
}

.bw-faq:first-of-type {
  border-top: 1px solid var(--bw-line);
}

.bw-faq-vraag {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

/* Safari toont zonder dit alsnog zijn eigen driehoek. */
.bw-faq-vraag::-webkit-details-marker {
  display: none;
}

.bw-faq-vraag::before {
  content: "+";
  flex: 0 0 auto;
  width: 1.25rem;
  font-weight: 700;
  color: var(--bw-groen);
  line-height: 1.4;
}

.bw-faq[open] > .bw-faq-vraag::before {
  content: "−";
}

.bw-faq-vraag:focus-visible {
  outline: 2px solid var(--bw-groen);
  outline-offset: 3px;
}

.bw-faq-antwoord {
  padding: 0.6rem 0 0.2rem 1.85rem;
}


/* 9. TEXTUUR, BANDEN EN VLAKKEN ===========================================
   Waar de warmte vandaan komt. De site was correct maar koud: tekst in witte
   kaders met dunne randjes, en verder niets. Drie dingen halen dat weg, en
   alle drie staan ze in docs/brand-and-ux.md:

   - "Gereedschap as texture" — Jellina vroeg om het gereedschap te laten
     zien. Maikels collage (wwwroot/img/logo-mark.svg) is precies dat en stond
     al in huis; op het bouwhekdoek loopt hij van de rand af, dus hier ook.
   - "Wood must be present" — houttinten als vlak, niet als accentje.
   - "Geblokt en hokkerig" — rechte randen, geen border-radius, geen zachte
     schaduwen. Een band is een blok, geen kaartje dat zweeft.

   De collage wordt als MASKER gebruikt, niet als achtergrondplaatje: het
   masker bepaalt de vorm, en de kleur eronder komt uit een token. Eén bestand
   kan zo elke kleur aannemen op elke dekking, zonder ingekleurde varianten.

   ⚠️ Maskeer met logo-mark-WIT.svg, niet met logo-mark.svg. Een masker leest
   alleen het alfakanaal, dus in theorie doet de vulling er niet toe — maar
   logo-mark.svg is gevuld met currentColor, en een SVG die als afbeelding
   wordt geladen heeft geen HTML om die kleur uit te erven. De vulling valt
   dan weg, de alfa is nul, en het masker verbergt alles. In de browser
   getest: met logo-mark.svg verdwijnt het hele vlak. logo-mark.svg blijft
   bestaan voor inline gebruik, waar currentColor juist het punt is.
   -------------------------------------------------------------------------- */

.bw-textuur {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.bw-textuur::before {
  content: "";
  position: absolute;
  z-index: -1;
  inline-size: var(--bw-textuur-maat, 26rem);
  block-size: var(--bw-textuur-maat, 26rem);
  inset-block-end: var(--bw-textuur-verschuiving, -6rem);
  inset-inline-start: var(--bw-textuur-verschuiving, -6rem);
  background-color: var(--bw-textuur-kleur, var(--bw-groen));
  opacity: var(--bw-textuur-dekking, 0.09);
  -webkit-mask-image: url('../img/logo-mark-wit.svg');
          mask-image: url('../img/logo-mark-wit.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  pointer-events: none;
}

/* Gespiegeld, zodat twee banden onder elkaar niet hetzelfde hoekje herhalen. */
.bw-textuur-rechts::before {
  inset-inline-start: auto;
  inset-inline-end: var(--bw-textuur-verschuiving, -6rem);
  transform: scaleX(-1);
}

/* Gecentreerd — voor lege staten, waar het gereedschap de plek van de
   ontbrekende inhoud inneemt in plaats van een leeg kader achter te laten. */
.bw-textuur-midden::before {
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

/* Een browser zonder maskerondersteuning krijgt gewoon geen textuur. Dat is
   een gemis, geen kapotte pagina: alle tekst en contrast blijven staan, want
   de textuur draagt nooit betekenis. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .bw-textuur::before { content: none; }
}


/* De donkere band. Draagt de hero en de call to action: het zwaartepunt van
   de pagina, met het gereedschap dat er half uit loopt. */
.bw-band {
  background-color: var(--bw-band);
  color: var(--bw-op-donker);
  padding: clamp(1.5rem, 4.5vw, 3rem);
  --bw-textuur-kleur: var(--bw-op-donker);
  --bw-textuur-dekking: 0.10;
}

.bw-band h1,
.bw-band h2,
.bw-band h3,
.bw-band .bw-heading {
  color: var(--bw-op-donker);
}

.bw-band .bw-prose,
.bw-band .bw-muted {
  color: var(--bw-op-donker-zacht);
}

/* Het goud is hier op zijn plek: klein, en het enige warme lichtpunt op het
   donkere vlak. Op licht blijft het label brons — zie sectie 4. */
.bw-band .bw-label {
  color: var(--bw-groen-helder);
}

/* Een omrande knop op donker: de bronzen rand valt weg tegen het bruin, dus
   hier leent hij het lichte tekstvlak. */
.bw-band .btn-outline-primary {
  --bs-btn-color: var(--bw-op-donker);
  --bs-btn-border-color: var(--bw-lijn-op-donker);
  --bs-btn-hover-bg: var(--bw-op-donker);
  --bs-btn-hover-border-color: var(--bw-op-donker);
  --bs-btn-hover-color: var(--bw-band);
  --bs-btn-active-bg: var(--bw-op-donker);
  --bs-btn-active-color: var(--bw-band);
}

.bw-band :focus-visible {
  outline-color: var(--bw-groen-helder);
}

/* Een vlak binnen de donkere band — het uitgelichte kaartje in de hero. */
.bw-band-vlak {
  background-color: var(--bw-band-zacht);
  border: 1px solid var(--bw-lijn-op-donker);
  padding: 1.25rem;
}


/* Een warm, licht vlak. Het hout uit de merkrichting als vlak in plaats van
   als randje: net genoeg kleur om het verschil met de canvasachtergrond te
   zien, zonder de foto's te beconcurreren. */
.bw-vlak-warm {
  background-color: var(--bw-surface-alt);
  border: 1px solid var(--bw-line);
  --bw-textuur-kleur: var(--bw-groen);
  --bw-textuur-dekking: 0.07;
}


/* De cijferbalk: één blok met scheidingslijnen, niet drie losse kaders die
   hetzelfde randje drie keer herhalen. */
.bw-cijfers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: var(--bw-surface);
  border: 1px solid var(--bw-line);
}

.bw-cijfer {
  padding: clamp(0.9rem, 3vw, 1.5rem) 0.75rem;
  text-align: center;
  border-inline-start: 1px solid var(--bw-line);
}

.bw-cijfer:first-child {
  border-inline-start: 0;
}

.bw-cijfer-getal {
  display: block;
  font-family: var(--bw-font-heading);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--bw-ink);
}

.bw-cijfer-label {
  display: block;
  font-size: 0.8rem;
  color: var(--bw-muted);
}


/* Een sectiekop met een bronzen blokje ervoor: geblokt, en het oog vindt de
   secties terug zonder dat er een lijn door de pagina hoeft. */
.bw-sectiekop {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.bw-sectiekop::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 0.6rem;
  block-size: 1.4rem;
  background-color: var(--bw-groen);
}

.bw-sectiekop > h2 {
  margin-bottom: 0;
}

/* Duwt een "alles bekijken"-link naar de rechterkant van de sectiekop. */
.bw-sectiekop > .bw-sectiekop-actie {
  margin-inline-start: auto;
}


/* Kaarten krijgen een bovenrand die oplicht. Geen schaduw, geen opduwen: een
   rand die van kleur verandert past bij "dunne randjes, geen schaduwen". */
.bw-kaart {
  border-top: 3px solid var(--bw-line);
  transition: border-top-color 0.15s ease-in-out;
}

.bw-kaart:hover,
.bw-kaart:focus-within {
  border-top-color: var(--bw-groen);
}

@media (prefers-reduced-motion: reduce) {
  .bw-kaart { transition: none; }
}


/* De ontworpen lege staat. Elke lijst begint leeg op een nieuwe site, dus dit
   is geen randgeval maar de eerste indruk — vandaar het gereedschap erachter
   in plaats van een kader met een zin erin. */
.bw-leeg {
  display: grid;
  place-items: center;
  gap: 0.3rem;
  min-block-size: 11rem;
  padding: clamp(1.5rem, 5vw, 2.75rem) 1.25rem;
  text-align: center;
  background-color: var(--bw-surface);
  border: 1px solid var(--bw-line);
  color: var(--bw-muted);
  --bw-textuur-maat: 13rem;
  --bw-textuur-dekking: 0.10;
  --bw-textuur-kleur: var(--bw-groen);
}

.bw-leeg-titel {
  font-family: var(--bw-font-heading);
  font-weight: 700;
  color: var(--bw-ink-soft);
}


/* Een review is een citaat. Het aanhalingsteken is decoratie en staat daarom
   in de CSS en niet in de view — een schermlezer hoort het niet, en dat klopt. */
.bw-citaat {
  position: relative;
  padding-top: 2.1rem;
}

.bw-citaat::before {
  content: "\201C";
  position: absolute;
  inset-block-start: -0.5rem;
  inset-inline-start: -0.2rem;
  font-family: var(--bw-font-heading);
  font-size: 4rem;
  line-height: 1;
  color: var(--bw-groen);
  opacity: 0.3;
}

.bw-sterren {
  color: var(--bw-messing);
  letter-spacing: 0.1em;
}


/* Het merk in de navigatiebalk: de hamer plus de naam waaronder Barry
   daadwerkelijk werkt. */
.bw-merk {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* De hamer als masker en niet als <img>, zodat zijn kleur uit een token komt
   en niet uit het bestand — logo-icon.svg blijft daardoor één bestand dat
   overal elke kleur kan aannemen. */
.bw-merk-hamer {
  inline-size: 1.9rem;
  block-size: 1.9rem;
  flex: 0 0 auto;
  background-color: var(--bw-groen);
  -webkit-mask-image: url('../img/logo-icon-wit.svg');
          mask-image: url('../img/logo-icon-wit.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}

.bw-merk-naam {
  font-family: var(--bw-font-heading);
  font-weight: 700;
  line-height: 1.1;
  color: var(--bw-ink);
}

.bw-merk-naam span {
  display: block;
  font-family: var(--bw-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bw-accent-text);
}

/* De balk zelf: warm oppervlak met een bronzen onderrand in plaats van wit
   met grijs. Bootstrap's .bg-white en .border-bottom zijn daarom uit de view
   gehaald — die winnen anders van deze regel. */
.bw-navbalk {
  background-color: var(--bw-surface);
  border-bottom: 3px solid var(--bw-groen);
}

.bw-navbalk .nav-link {
  color: var(--bw-ink-soft);
  font-weight: 500;
}

.bw-navbalk .nav-link:hover,
.bw-navbalk .nav-link:focus {
  color: var(--bw-accent-text);
}

/* 11. ACTIELINKS ==========================================================
   Waarom dit bestaat: de publieke pagina's stonden vol kale <a>-tekst —
   "Alle diensten", "Lees meer", "Bekijk project", de hele voettekst. Het
   blauw was al overschreven, maar een onderstreepte tekstlink is nog steeds
   geen ontworpen actie: hij verdwijnt in de pagina, en op een telefoon is een
   regel tekst van 11 px een raakvlak dat je drie keer mist.

   Drie gewichten, en bewust niet meer dan drie:

     .btn-primary          het zwaarste. Eén per scherm: de echte actie
     .btn-outline-primary  de secundaire actie die ernaast staat
     .bw-actie             de navigatie-actie: "alle diensten", "lees meer"

   .bw-actie is met opzet géén .btn. Hij zit ertussenin — zwaarder dan tekst,
   lichter dan een knop — want een homepage met twintig gevulde groene knoppen
   is geen ontwerp maar een kermis. Vorm: een blok met een dun randje dat pas
   invult als je hem aanwijst, precies de "professioneel dunne randjes" uit
   docs/brand-and-ux.md, met genoeg padding om het duimformaat te halen.
   -------------------------------------------------------------------------- */

.bw-actie {
  display: inline-flex;
  /* Staat hier en niet alleen op .bw-kaart .bw-actie: in elke flexkolom
     (card-body is er een) rekt een blokitem anders over de volle breedte
     uit, en dan is het geen knop meer maar een balk. */
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--bw-line-strong);
  background-color: transparent;
  color: var(--bw-accent-text);
  font-family: var(--bw-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out,
              color 0.15s ease-in-out;
}

/* De pijl staat in de CSS en niet in de view, omdat hij decoratie is: een
   schermlezer hoort "Alle diensten" en niet "Alle diensten pijl-naar-rechts".

   ⚠️ Dit MOET ::before zijn, en de order zet hem daarna weer achteraan.
   Bootstrap's .stretched-link — die op de kaarten de hele kaart klikbaar
   maakt — gebruikt namelijk ::after met content: "" en inset: 0. Zet je de
   pijl in ::after, dan wint deze regel (site.css laadt na Bootstrap) en staat
   de pijl ineens in de linkerbovenhoek van de kaart, want dat is waar dat
   opgerekte overlay-vlak begint. In de browser gezien; niet terugdraaien. */
.bw-actie::before {
  content: "\2192";
  order: 1;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.15s ease-in-out;
}

.bw-actie:hover,
.bw-actie:focus-visible {
  background-color: var(--bw-groen);
  border-color: var(--bw-groen);
  color: var(--bw-op-donker);
  text-decoration: none;
}

.bw-actie:hover::before,
.bw-actie:focus-visible::before {
  transform: translateX(0.2rem);
}

/* De zwaardere variant, voor waar de actie het doel van de sectie is. */
.bw-actie-vol {
  background-color: var(--bw-groen);
  border-color: var(--bw-groen);
  color: var(--bw-op-donker);
}

.bw-actie-vol:hover,
.bw-actie-vol:focus-visible {
  background-color: var(--bw-groen-diep);
  border-color: var(--bw-groen-diep);
}

/* In een kaart is de hele kaart klikbaar (.stretched-link), dus de actie moet
   meelichten zodra je ergens op die kaart hangt. Doet hij dat niet, dan lijkt
   hij dood terwijl de kaart wel degelijk reageert. */
.bw-kaart .bw-actie {
  margin-block-start: 0.85rem;
}

.bw-kaart:hover .bw-actie,
.bw-kaart:focus-within .bw-actie {
  background-color: var(--bw-groen);
  border-color: var(--bw-groen);
  color: var(--bw-op-donker);
}

.bw-kaart:hover .bw-actie::before,
.bw-kaart:focus-within .bw-actie::before {
  transform: translateX(0.2rem);
}

/* Op zwart valt het merkgroen weg tegen de band, dus daar leent de actie het
   lichte tekstvlak — dezelfde truc als .bw-band .btn-outline-primary.
   Alleen .bw-band: de voettekst heeft sinds sectie 12 een eigen linkvorm. */
.bw-band .bw-actie {
  border-color: var(--bw-lijn-op-donker);
  color: var(--bw-op-donker);
}

.bw-band .bw-actie:hover,
.bw-band .bw-actie:focus-visible {
  background-color: var(--bw-op-donker);
  border-color: var(--bw-op-donker);
  color: var(--bw-band);
}

/* Op een telefoon staat de rem op 14px (sectie 3), dus dezelfde padding
   levert daar een kleiner blokje op — precies waar het raakvlak juist groter
   moet zijn. Vandaar hier meer lucht en niet minder. WCAG 2.2 AA vraagt
   24x24 CSS-px; daar zitten we ruim boven. */
@media (max-width: 575.98px) {
  .bw-actie {
    padding-block: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bw-actie,
  .bw-actie::before {
    transition: none;
  }
}


/* 12. VOETTEKST ===========================================================
   Was: vijf onderstreepte links op een grijze regel met een dun lijntje
   erboven — het enige stuk van de pagina waar niets ontworpen was.
   Is: de derde donkere band. De site sluit onderaan zoals hij bovenaan opent,
   met dezelfde gereedschapstextuur en dezelfde actievorm, zodat de voettekst
   deel van het ontwerp is in plaats van wat er overblijft.
   -------------------------------------------------------------------------- */

.bw-voet {
  flex-shrink: 0;
  margin-block-start: 2rem;
  padding-block: clamp(1.5rem, 4vw, 2.25rem) 1.25rem;
  background-color: var(--bw-band);
  color: var(--bw-op-donker-zacht);
  border-top: 3px solid var(--bw-groen);
  --bw-textuur-kleur: var(--bw-op-donker);
  --bw-textuur-dekking: 0.07;
  --bw-textuur-maat: 20rem;
}

/* De linkbalk. Twee dingen die hij bewust NIET is:

   1. Geen .bw-actie. Die vorm — hoofdletters, een randje, een pijl — is de
      actie ván een pagina: "Alle diensten", "Bekijk project". Vijf van die
      blokjes onder elkaar in de voettekst lezen als vijf oproepen, terwijl
      het gewoon de kruimels van de site zijn. Hier dus geen pijl en geen
      kader, maar de kopletter met een dun lijntje eronder: hetzelfde
      "professioneel dunne randje" uit brand-and-ux.md, alleen liggend.
   2. Geen rij die links begint. De balk staat buiten .container en verdeelt
      zich over de volle breedte, elk label gecentreerd in zijn eigen vak.

   grid-auto-flow: column met grid-auto-columns: 1fr geeft elk item exact
   dezelfde breedte zonder dat het aantal links ergens in de CSS staat — een
   zesde link erbij verdeelt zichzelf. */
.bw-voet-links {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0 clamp(0.5rem, 2vw, 2rem);
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.bw-voet-link {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ruim boven de 24x24 CSS-px van WCAG 2.2 AA, ook wanneer het label kort is
     ("Contact") — het hele vak is het raakvlak, niet alleen de tekst. */
  min-height: 3rem;
  padding: 0.65rem 0.35rem;
  border-bottom: 1px solid var(--bw-lijn-op-donker);
  color: var(--bw-op-donker-zacht);
  font-family: var(--bw-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: color 0.15s ease-in-out,
              border-color 0.15s ease-in-out,
              box-shadow 0.15s ease-in-out;
}

/* Het lijntje verdikt zich in plaats van dat de rand van breedte verandert:
   een inset-schaduw tekent binnen het vak en verschuift dus niets. Groen-
   helder en niet --bw-groen, want #16453C valt weg tegen deze band. */
.bw-voet-link:hover,
.bw-voet-link:focus-visible {
  color: var(--bw-op-donker);
  border-color: var(--bw-groen-helder);
  box-shadow: inset 0 -2px 0 var(--bw-groen-helder);
  text-decoration: none;
}

/* Onder md wordt vijf naast elkaar een kolom van 90 px waarin "Kennisbank"
   afbreekt. Twee kolommen dus, en staat er een oneven aantal links, dan gaat
   de laatste over de volle breedte — anders hangt hij scheef in zijn helft. */
@media (max-width: 767.98px) {
  .bw-voet-links {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1rem;
  }

  .bw-voet-link:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bw-voet-link {
    transition: none;
  }
}

/* De onderste regel: copyright, en verder niets dat om aandacht vraagt. */
.bw-voet-slot {
  margin-block-start: 1.35rem;
  padding-block-start: 1rem;
  border-top: 1px solid var(--bw-lijn-op-donker);
  font-size: 0.85rem;
  color: var(--bw-op-donker-zacht);
}

/* 13. FOTOHERO ============================================================
   De hero was een zwart vlak met het gereedschapsmasker erachter. Nu draagt
   een echte foto van Barry's werk hem — "photography carries the site, Barry's
   own work, large" uit docs/brand-and-ux.md, en het eerste wat een bezoeker
   ziet is dus vakwerk in plaats van een kleurvlak.

   .bw-hero is een MODIFIER op .bw-band, geen vervanging: alle regels voor
   tekst, labels en knoppen op donker staan al in sectie 9 en blijven gelden.
   Hier komt alleen de foto bij.

   Het parallax-effect komt van background-attachment: fixed — de foto staat
   stil terwijl de herotekst eroverheen wegschuift. Bewuste keuzes daarbij:

   - ⚠️ iOS Safari negeert `fixed` en valt terug op `scroll`. Dat is geen bug
     om te repareren: je krijgt dan een gewone meescrollende fotoband, wat
     precies de rustige variant is. Niet met JavaScript "oplossen".
   - De sluier is opgebouwd met color-mix() uit --bw-band, zodat er ook hier
     geen losse hex in de CSS staat. Kent een browser color-mix() niet, dan is
     de hele background-image-declaratie ongeldig en valt hij terug op de
     effen band van background-color — exact de vorige situatie.
   - De sluier loopt van donker (links, waar de kop staat) naar lichter
     (rechts, waar het uitgelichte vlak staat en de foto mag ademen).
   -------------------------------------------------------------------------- */

.bw-hero {
  /* Het opgeleverde dak van het appartementencomplex. Dakrenovatie is de dienst
     waar Barry op gevonden moet worden (zie docs/seo-content-plan.md), dus dat
     is wat er boven de vouw hoort te staan. Wil je hier de keukenfoto terug,
     dan is dat deze regel plus de twee media queries hieronder:
     keuken-plafond-{1000,1600,2400}.webp staan er nog. */
  --bw-hero-foto: url('../img/foto/dak-opgeleverd-1460.webp');

  /* Deze sluier houdt de witte tekst boven de 4,5:1 op de lichtste plek van
     de foto. Verlaag je de dekking, meet dan opnieuw — en meet met verborgen
     tekst, anders meet je de letters in plaats van de achtergrond.
     ⚠️ Deze foto heeft een grote strook lucht, en lucht is véél lichter dan
     het plafond dat hier eerst stond: de sluier moet daarom zwaarder zijn dan
     je op het oog zou kiezen. */
  --bw-hero-sluier: linear-gradient(
      100deg,
      color-mix(in srgb, var(--bw-band) 88%, transparent) 0%,
      color-mix(in srgb, var(--bw-band) 82%, transparent) 50%,
      color-mix(in srgb, var(--bw-band) 62%, transparent) 100%);

  padding-block: clamp(2.5rem, 8vw, 5rem);
  background-color: var(--bw-band);
  background-image: var(--bw-hero-sluier), var(--bw-hero-foto);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/* Op een effen band mag de inleiding gedempt zijn; op een foto niet. Achter
   deze alinea ligt lucht, en --bw-op-donker-zacht haalt daar de 4,5:1 voor
   lopende tekst niet. Vol wit wel. Gemeten, niet geschat: zie docs/backlog.md. */
.bw-hero .bw-prose {
  color: var(--bw-op-donker);
}

/* Een kleiner scherm krijgt een kleiner bestand. 1000 px is genoeg zolang de
   foto onder een sluier ligt: hij draagt sfeer, geen detail. */
@media (max-width: 700px) {
  .bw-hero {
    --bw-hero-foto: url('../img/foto/dak-opgeleverd-1000.webp');
  }
}

/* Wie beweging heeft uitgezet, krijgt de foto gewoon meescrollend. */
@media (prefers-reduced-motion: reduce) {
  .bw-hero {
    background-attachment: scroll;
  }
}