/* ==========================================================================
   GVH Laswerken – kleurvariant "groen" (concept)
   Wordt ná site.css geladen (build: THEME=groen). Zelfde concept, lay-out en typografie;
   enkel het palet wisselt: groen en donkergroen als accent, achtergronden blijven neutraal
   (antraciet en gebroken wit met een zweem groen). De exacte huisstijlkleuren van de klant
   kunnen hieronder op één plek worden ingevuld (--groen, --groen-knop, --donkergroen).
   Versie 2: lichter groen en highlights op sleutelwoorden (<span class="hl">, gezet door de build via src/theme-groen.json).
   Contrast (WCAG): groen op antraciet 8.7:1, donkere tekst op knopgroen 7.1:1, middengroen op licht 4.8-5.3:1.
   ========================================================================== */

:root {
  /* huisstijl */
  --groen: #74c776;          /* accent op donkere vlakken: labels, lijnen, cijfers, highlights */
  --groen-licht: #9bd99b;    /* hover op donker */
  --groen-knop: #5cb85c;     /* primaire knop, donkere tekst */
  --groen-knop-2: #6cc070;   /* hover primaire knop */
  --donkergroen: #2a7a43;    /* accent op lichte vlakken: tekst, iconen, knoppen met witte tekst */
  --donkergroen-2: #22653a;  /* hover donkergroen */

  /* neutralen, licht gekoeld richting het groen */
  --black: #0b0e0c;
  --charcoal: #141815;
  --graphite: #1e231f;
  --ivory: #f3f5f1;
  --ivory-2: #e7ebe4;
  --ink: #151a16;
  --grey: #59605a;
  --mist: #b3b9b2;
  --line-light: rgba(21, 26, 22, 0.12);

  /* de accentrollen van v2 krijgen de groene waarden */
  --sand: var(--groen);
  --sand-2: var(--groen-licht);
  --bronze: var(--donkergroen);
  --shade: 11, 14, 12;       /* basis voor alle foto-overlays */
}

::selection { background: var(--groen); color: var(--ink); }
.skip-link { background: var(--groen-knop); color: var(--ink); }

/* ---------- knoppen ---------- */
.btn--sand { --b-bg: var(--groen-knop); --b-fg: var(--ink); --b-line: var(--groen-knop); }
.btn--sand:hover { --b-bg: var(--groen-knop-2); --b-line: var(--groen-knop-2); }
.btn--ink { --b-bg: var(--donkergroen); --b-fg: var(--white); --b-line: var(--donkergroen); }
.btn--ink:hover { --b-bg: var(--donkergroen-2); --b-line: var(--donkergroen-2); }
.theme-light .btn--outline, .theme-sand .btn--outline { --b-line: var(--donkergroen); --b-fg: var(--donkergroen); }
.nav__cta .btn--outline { --b-line: var(--groen); }
.nav__cta .btn--outline:hover { --b-bg: var(--groen-knop); --b-line: var(--groen-knop); --b-fg: var(--ink); }

/* ---------- merk: 'Laswerken' en een laslijn in groen ---------- */
.brand__mark { position: relative; }
.brand__sub { color: var(--groen); opacity: 1; }
.site-footer .brand__sub { color: var(--donkergroen); }
.brand:hover .brand__sub { color: var(--groen-licht); }

/* ---------- header ---------- */
.site-header::before { background: linear-gradient(to bottom, rgba(var(--shade), 0.7), transparent); }
.site-header.is-scrolled { background: rgba(var(--shade), 0.93); border-bottom-color: color-mix(in srgb, var(--groen) 45%, transparent); }
.nav__sub { background: rgba(var(--shade), 0.97); border-top: 2px solid var(--groen); }
.nav__sub a:not(.btn):hover { color: var(--groen-licht); }

/* ---------- foto-overlays (neutraal donker, geen groene vlakken) ---------- */
.photo::after { background: linear-gradient(90deg, rgba(var(--shade), 0.9) 0%, rgba(var(--shade), 0.72) 38%, rgba(var(--shade), 0.38) 72%, rgba(var(--shade), 0.55) 100%), linear-gradient(to top, rgba(var(--shade), 0.85), transparent 45%); }
.photo--soft::after { background: linear-gradient(to top, rgba(var(--shade), 0.92) 0%, rgba(var(--shade), 0.6) 45%, rgba(var(--shade), 0.45) 100%); }
.photo--band::after { background: linear-gradient(90deg, rgba(var(--shade), 0.94), rgba(var(--shade), 0.86)); }
.tile .photo::after { background: linear-gradient(to top, rgba(var(--shade), 0.95) 0%, rgba(var(--shade), 0.55) 40%, rgba(var(--shade), 0.15) 75%, rgba(var(--shade), 0.3) 100%); }
.maker__media::after { background: linear-gradient(to top, rgba(var(--shade), 0.6), transparent 50%); }
.lightbox { background: rgba(var(--shade), 0.96); }
.lightbox::backdrop { background: rgba(var(--shade), 0.9); }
.lightbox__btn { background: rgba(20, 24, 21, 0.85); }

/* ---------- groene accenten ---------- */
.hero__list a:hover, .breadcrumb a:hover, .cta-band__contact a:hover { color: var(--groen-licht); }
.tiles { gap: 0.5rem; }
.tile::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 3px; background: var(--groen); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.tile:hover::before, .tile:focus-visible::before { transform: scaleX(1); }
.tile:hover .link-arrow { color: var(--groen-licht); }
.maker__caption strong::after { content: ''; display: block; width: 2rem; height: 2px; margin-top: 0.5rem; background: var(--groen); }
.maker__quote { border-left-color: var(--groen); }
.theme-light .maker__quote, .theme-sand .maker__quote { border-left-color: var(--donkergroen); }
.usp svg, .choice__icon { color: var(--donkergroen); }
.step { border-top-color: var(--line); }
.theme-dark .step::before, .theme-black .step::before { color: var(--groen); font-weight: 400; }
.cta-band { border-top: 3px solid var(--groen); }
.strip__item a { position: relative; }
.strip__item a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--donkergroen); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.strip__item a:hover::after { transform: scaleX(1); }
.filter button:hover { border-color: var(--donkergroen); color: var(--donkergroen); }
.filter button[aria-pressed="true"], .segment__option input:checked + span { background: var(--donkergroen); color: var(--white); border-color: var(--donkergroen); }
.faq details[open] summary { color: var(--accent-text); }
.next { border-top: 2px solid var(--donkergroen); }
.aside-box { border-top: 3px solid var(--donkergroen); }
.theme-dark .aside-box, .theme-black .aside-box { border-top-color: var(--groen); }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f5a33' stroke-width='1.5'/%3E%3C/svg%3E"); }
.field input[type="file"]::file-selector-button { border-color: var(--donkergroen); color: var(--donkergroen); }

/* ---------- footer ---------- */
.site-footer { border-top: 3px solid var(--donkergroen); }
.cta-band + .site-footer, .page-contact .site-footer { border-top: 0; }
.site-footer a:hover { color: var(--donkergroen); }
.site-footer__bottom a:hover { color: var(--groen-licht); }

/* ---------- WhatsApp in de huisstijl ---------- */
.wa { background: var(--groen-knop); color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.25); }
.wa svg { color: var(--ink); }
.wa:hover { background: var(--groen-knop-2); }

/* ---------- highlights op sleutelwoorden ---------- */
/* donkere vlakken en foto's: het woord zelf licht groen op */
.hl { color: var(--groen); }
/* lichte vlakken: middengroen, zonder balk of markeerstreep */
.theme-light .hl, .theme-sand .hl, .site-footer .hl, .card .hl, .choice .hl { color: var(--donkergroen); }
p .hl { font-weight: 700; }
.theme-sand { --accent-text: #256b3b; }

/* ---------- contact: de drie keuzeknoppen (bellen, WhatsApp, formulier) in één kleur ---------- */
.choice .btn { --b-bg: var(--donkergroen); --b-fg: var(--white); --b-line: var(--donkergroen); }
.choice .btn:hover { --b-bg: var(--donkergroen-2); --b-line: var(--donkergroen-2); }