/* ============================================================
   E.C.O. Logisch — site.css
   Overrides bovenop Bootstrap 5.3. Single source of truth voor
   brand-tokens, typografie, hero, bands, cards, navbar en footer.
   Inter, zelf gehost (twee woff2-subsets); geen verzoek naar derden.
   ============================================================ */

/* ---------- Lettertype ----------
   Inter, zelf gehost. Niet via Google Fonts: de CSP staat font-src 'self' toe,
   en een verzoek naar fonts.gstatic.com stuurt het IP-adres van elke bezoeker
   naar een derde partij. Dit zijn de twee subsets die Nederlands nodig heeft:
   latin dekt de gewone tekst, latin-ext de rest (o.a. de IJ-ligatuur).
   Het is een variabel font: een bestand dekt alle diktes van 400 tot 700.
   font-display: swap laat de tekst meteen in het systeemfont zien en wisselt
   zodra Inter binnen is - liever een wisseling dan een lege pagina.
   Inter is van Rasmus Andersson, SIL Open Font License 1.1.
   -------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/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('/assets/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;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand (raw) — exacte kleuren uit het logo/menu-bg */
  --eco-green-500: #57bf29;
  --eco-green-600: #4aa622;
  --eco-green-700: #357a17;             /* tekst-veilig op wit (AA) */
  --eco-purple-500: #6c2182;
  --eco-purple-600: #581a6a;
  --eco-purple-700: #44144f;
  --eco-purple-050: rgba(108, 33, 130, .06);
  --eco-purple-100: rgba(108, 33, 130, .12);
  --eco-purple-overlay: rgba(108, 33, 130, .55);

  /* Neutrals (cool, past bij zakelijke uitstraling) */
  --c-ink-900: #0f172a;
  --c-ink-700: #334155;
  --c-ink-500: #64748b;
  --c-ink-300: #cbd5e1;
  --c-ink-100: #f1f5f9;
  --c-ink-050: #f8fafc;
  --c-white:   #ffffff;

  /* Semantic */
  --color-bg:            var(--c-white);
  --color-surface:       var(--c-white);
  --color-surface-soft:  var(--c-ink-050);
  --color-surface-alt:   var(--c-ink-100);
  --color-text:          var(--c-ink-900);
  --color-text-muted:    var(--c-ink-500);
  --color-border:        var(--c-ink-300);
  --color-accent:        var(--eco-green-500);
  --color-accent-strong: var(--eco-green-700);
  --color-accent-alt:    var(--eco-purple-500);

  /* Spacing (4pt scale) */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;    --space-9: 6rem;

  /* Radius & shadow */
  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 14px;  --radius-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 6px 18px -8px rgba(15, 23, 42, .18);
  --shadow-lg: 0 18px 40px -16px rgba(15, 23, 42, .25);

  /* Type */
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-base: 1.0625rem;
  --lh-body: 1.65;
  --lh-tight: 1.18;
  --measure: 68ch;

  /* Bootstrap-bridges */
  --bs-primary:           var(--color-accent);
  --bs-primary-rgb:       87, 191, 41;
  --bs-link-color:        var(--color-accent-strong);
  --bs-link-color-rgb:    53, 122, 23;
  --bs-link-hover-color:  var(--eco-green-600);
  --bs-border-radius:     var(--radius-md);
  --bs-body-color:        var(--color-text);
  --bs-body-font-size:    var(--fs-base);
}

/* ---------- Base ---------- */
body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Typografie ---------- */
h1, .h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);   line-height: 1.12; letter-spacing: -.02em; font-weight: 700; }
h2, .h2 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem); line-height: 1.2;  letter-spacing: -.015em; font-weight: 700; }
h3, .h3 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -.01em; font-weight: 600; }
h4, .h4 { font-size: 1.125rem; line-height: 1.3;  font-weight: 600; }
h5      { font-size: 1rem;     font-weight: 600; }
h6      { font-size: .875rem;  font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }

main p, main li { max-width: var(--measure); }

/* Tekstpagina's krijgen een eigen breedte. Op een breed scherm was de container
   1320px terwijl de tekst zelf bij ~690px ophield; alles rechts van de eerste
   afbeelding bleef leeg. Zo staat de tekst met zijn beeld in een kolom die als
   geheel is bedoeld, in plaats van links in een veel te brede bak. */
.content--tekst {
  max-width: 1080px;
}

/* Paginakop op de binnenpagina's.
   De koppen stonden hier met .h3/.h5/.h6 twee stappen kleiner gezet, waardoor
   een h3 (16px) kleiner werd dan de lopende tekst (17px) en de hele pagina vlak
   oogde. De klassen zijn uit de templates gehaald; hieronder staat de schaal
   die voor een tekstpagina past - kleiner dan de koppen op de homepage, want
   daar mag een titel over een foto groot zijn. */
.content > h1 {
  font-size: clamp(1.875rem, 1.45rem + 1.5vw, 2.5rem);
  margin-bottom: var(--space-5);
}
/* Alleen directe kinderen van de pagina: dat is de lopende tekst. Koppen binnen
   een kaart of kolom houden de maat die daar bewust is gekozen (.h5, .h6) - een
   bredere selector won daarvan en blies de kolomkoppen op de contactpagina op.
   De grootte komt van het element h2/h3 zelf, hierboven in de typografie. */
.content > h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}
.content > h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

/* Het kruimelpad plakte tegen de menubalk en de titel plakte tegen het
   kruimelpad. Lucht erboven en eronder, zodat de pagina ergens begint. */
.content > nav[aria-label="breadcrumb"] {
  margin-top: var(--space-3);
  margin-bottom: var(--space-5);
}
.content > nav[aria-label="breadcrumb"] .breadcrumb {
  margin-bottom: 0;
}


main p.lead { font-size: 1.1875rem; line-height: 1.55; max-width: var(--measure); }

.eyebrow {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  margin-bottom: var(--space-2);
}

/* Links binnen inhoud — sluit knoppen uit (anders krijgen .btn-primary etc. de tekstkleur) */
.content a:not(.btn) { color: var(--color-accent-strong); }

/* Een kop die zelf een link is (nieuwsoverzicht, vacatures) kreeg de volle
   linkopmaak: groen en onderstreept, over de hele regel. Dat schreeuwt in een
   lijst. Onderstreping pas bij aanwijzen. */
.content h2 a:not(.btn),
.content h3 a:not(.btn) { text-decoration: none; }
.content h2 a:not(.btn):hover,
.content h3 a:not(.btn):hover,
.content h2 a:not(.btn):focus-visible,
.content h3 a:not(.btn):focus-visible { text-decoration: underline; }

.content a:not(.btn):hover { color: var(--eco-green-600); }

/* ---------- Knoppen ---------- */
.btn { font-weight: 600; border-radius: var(--radius-md); }
.btn-lg {
  padding: .85rem 1.6rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: var(--radius-md);
}
.btn-primary {
  background-color: var(--eco-green-600);
  border-color: var(--eco-green-600);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background-color: var(--eco-green-700);
  border-color: var(--eco-green-700);
  color: #fff;
}
.btn-outline-secondary {
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-outline-secondary:hover {
  background-color: var(--color-surface-soft);
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

/* Skip-link (a11y, alleen zichtbaar bij focus) */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--eco-purple-700);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 600;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

/* ---------- Focus ring (a11y) ---------- */
:focus-visible {
  outline: 2px solid var(--eco-purple-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Layout-helpers ---------- */
/* 50vw telt de schuifbalk mee en 50% niet. Een .bleed stak daardoor op een
   scherm met een gewone schuifbalk een halve schuifbalkbreedte aan weerskanten
   uit, en dat gaf een horizontale schuifbalk op de homepagina.

   --schuifbalk wordt onderaan de pagina door een klein scriptje gezet (zie
   templates/layout.php); zonder javascript blijft het 0px en is het precies
   zoals het hiervoor was.

   Niet opgelost met overflow-x: clip op html. Dat werkt in Chrome ook, maar het
   knipt het probleem alleen weg in plaats van het weg te rekenen, en Safari
   kende clip pas vanaf 16. Deze kant op klopt de berekening zelf. */
.bleed {
  margin-left: calc(50% - 50vw + var(--schuifbalk, 0px) / 2);
  margin-right: calc(50% - 50vw + var(--schuifbalk, 0px) / 2);
}
.surface-soft        { background: var(--color-surface-soft); }
.surface-purple-soft { background: var(--eco-purple-050); }
.measure             { max-width: var(--measure); }

/* Section "bands" — geven ritme aan een lange pagina */
.band {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.band--tight {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
.band__head {
  margin-bottom: var(--space-7);
}
.band__head h2 { margin: 0; }
.band__head.text-center { display: flex; flex-direction: column; align-items: center; }
.band__head.text-center .eyebrow { margin-bottom: var(--space-2); }

/* Subtiele scheidingslijnen op surface-soft sectie */
.band.surface-soft {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Navbar ---------- */
.navbar.sticky-top {
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--eco-purple-100);
  /* Kleinere padding-y zodat logo dominant kan zijn zonder navbar onnodig op te rekken. */
  --bs-navbar-padding-y: .25rem;
  /* Logo mag uitsteken (sticky houdt z-index intact). */
  overflow: visible;
}
.navbar-brand {
  /* Op tablet/desktop "overflowt" het logo onder de navbar via negatieve margin-bottom.
     De effective height van het img (height + margin-bottom) bepaalt de navbar-hoogte,
     het zichtbare logo zelf is groter en steekt over de pagina-content uit.
     Op mobiel geen overflow zodat het collapse-menu niet over het logo valt. */
  padding-top: 0;
  padding-bottom: 0;
  margin-right: var(--space-4);
  position: relative;
  z-index: 5;
}
.navbar-brand img {
  height: 72px;
  width: auto;
  display: block;
  /* Subtiele schaduw zodat het logo visueel "drijft" over de pagina-inhoud onder de navbar. */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .12));
}
@media (min-width: 768px) {
  .navbar-brand { margin-bottom: -26px; }
  .navbar-brand img { height: 112px; }
}
@media (min-width: 1200px) {
  .navbar-brand { margin-bottom: -38px; }
  .navbar-brand img { height: 132px; }
}
/* Aanraakvlakken. Op een telefoon is 44px de maat waarbij een knop met een duim
   betrouwbaar te raken is; de menuknop kwam op 39px uit en de knoppen op 37px.
   Vanaf tablet mag het weer compacter, daar wordt met een muis gewezen. */
.btn:not(.btn-sm):not(.btn-lg) { padding-top: .55rem; padding-bottom: .55rem; }
.navbar-toggler { padding-top: .45rem; padding-bottom: .45rem; }
@media (min-width: 768px) {
  .btn:not(.btn-sm):not(.btn-lg) { padding-top: .375rem; padding-bottom: .375rem; }
  .navbar-toggler { padding-top: .25rem; padding-bottom: .25rem; }
}

.navbar .nav-link {
  color: var(--color-text);
  font-weight: 500;
  padding-inline: var(--space-4);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  color: var(--color-accent-strong);
}
.navbar .nav-link.is-active {
  color: var(--color-accent-strong);
  box-shadow: inset 0 -3px 0 var(--eco-green-500);
}
.navbar .nav-link.fw-semibold {        /* prominente Contact-link */
  color: var(--color-accent-strong);
}

.dropdown-menu {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3);
  margin-top: var(--space-2);
}
.dropdown-item {
  border-radius: var(--radius-sm);
  padding: .4rem .6rem;
  color: var(--color-text);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--eco-purple-050);
  color: var(--color-accent-alt);
}
.dropdown-divider { border-color: var(--color-border); }

/* Mega-dropdown voor de 18+ inventarisaties */
.dropdown-menu--mega {
  min-width: 560px;
}
@media (min-width: 768px) {
  .dropdown-menu--mega {
    columns: 2;
    column-gap: var(--space-5);
  }
  .dropdown-menu--mega > li { break-inside: avoid; }
}

/* ---------- Hero — full-bleed met overlay ---------- */
.hero {                       /* legacy fallback (mocht een andere pagina .hero gebruiken) */
  padding: var(--space-7) 0 var(--space-6);
}
.hero--full {
  position: relative;
  isolation: isolate;
  min-height: clamp(440px, 62vh, 640px);
  display: grid;
  align-items: end;
  overflow: hidden;
  margin-top: calc(-1 * var(--space-4));
  padding: 0;
}
.hero--full .hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero--full .hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, .15) 0%,
    rgba(15, 23, 42, .35) 55%,
    rgba(15, 23, 42, .78) 100%
  );
}
.hero--full .hero__inner {
  padding: var(--space-8) var(--space-4) var(--space-7);
  color: #fff;
  max-width: 720px;
}
.hero--full .eyebrow {
  color: #fff;
  opacity: .95;
  text-shadow: 0 0 14px rgba(108, 33, 130, .7);
}
.hero--full .hero__title {
  color: #fff;
  max-width: 18ch;
  text-shadow: 0 2px 14px rgba(15, 23, 42, .45);
  margin-bottom: var(--space-4);
}
.hero--full .hero__lead {
  color: #fff;
  max-width: 52ch;
  opacity: .96;
  font-size: 1.1875rem;
  line-height: 1.55;
  text-shadow: 0 1px 8px rgba(15, 23, 42, .35);
}
.hero--full .hero__actions {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* CTA op hero — wit vlak, paarse tekst. Tegen elke fotoachtergrond AAA-contrast. */
.hero--full .btn-primary {
  background: #fff;
  color: var(--eco-purple-700);
  border-color: #fff;
  box-shadow: 0 12px 30px -12px rgba(15, 23, 42, .45);
}
.hero--full .btn-primary:hover,
.hero--full .btn-primary:focus-visible {
  background: var(--eco-purple-700);
  color: #fff;
  border-color: var(--eco-purple-700);
}

/* .content a:not(.btn) is specifieker dan .hero--full .hero__link en verfde deze
   link groen op de foto - slecht leesbaar en niet de bedoeling. Vandaar .content
   ervoor: even specifiek plus een klasse extra, dus deze regel wint. */
.content .hero--full .hero__link {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  padding-bottom: 2px;
  transition: border-color .2s ease;
}
.content .hero--full .hero__link:hover,
.content .hero--full .hero__link:focus-visible {
  color: #fff;
  border-bottom-color: #fff;
}

/* ---------- Content-block (legacy class — alleen visuele polish) ---------- */
.content-block {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* ---------- Service-cards ---------- */
.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--eco-green-500);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .2s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(87, 191, 41, .35);
}
.service-card:hover::before { transform: scaleY(1); }
.service-card .card-img-top {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.service-card .card-body { padding: var(--space-5); }
.service-card .card-title {
  font-size: 1.125rem;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.service-card .card-text {
  color: var(--color-text-muted);
  font-size: .9375rem;
  margin: 0;
}

/* Link-card: nooit browser-default onderlijning */
a.service-card,
a.service-card:hover,
a.service-card:focus,
a.service-card:visited {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.service-card * { text-decoration: none; }

/* Icon-tile service card (homepage "Onze diensten" grid) */
.service-card--icon {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5) var(--space-5);
}
.service-card--icon .service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(87, 191, 41, .18), rgba(108, 33, 130, .14));
  color: var(--eco-purple-700);
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
  transition: transform .2s ease;
}
.service-card--icon:hover .service-card__icon { transform: scale(1.05); }
.service-card--icon h3 {
  font-size: 1.25rem;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}
.service-card--icon p {
  color: var(--color-text-muted);
  font-size: .9375rem;
  margin: 0 0 var(--space-5);
}
.service-card--icon .service-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  color: var(--color-accent-strong);
  text-decoration: none;
}
.service-card--icon .service-card__more::after {
  content: "\2192";          /* → */
  display: inline-block;
  transition: transform .2s ease;
}
.service-card--icon:hover .service-card__more::after { transform: translateX(4px); }

/* Foto-variant — gebruikt voor "Onze diensten" op de homepage */
.service-card--photo {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.service-card--photo .service-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-soft);
}
.service-card--photo .service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.service-card--photo:hover .service-card__media img { transform: scale(1.04); }
.service-card--photo .service-card__body {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  gap: var(--space-2);
  flex: 1;
}
.service-card--photo h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0;
  color: var(--color-text);
}
.service-card--photo p {
  color: var(--color-text-muted);
  font-size: .9375rem;
  margin: 0 0 var(--space-3);
}
.service-card--photo .service-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  color: var(--color-accent-strong);
  text-decoration: none;
}
.service-card--photo .service-card__more::after {
  content: "\2192";
  display: inline-block;
  transition: transform .2s ease;
}
.service-card--photo:hover .service-card__more::after { transform: translateX(4px); }

/* ---------- Stats-strip (direct onder hero) ---------- */
.stats-strip {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-7) 0;
  position: relative;
}
.stats-strip::before {                       /* subtiele paars-naar-groen lijn bovenaan */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--eco-purple-500), var(--eco-green-500));
  opacity: .8;
}
.stats-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-5);
}
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}
.stat-tile {
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; gap: .15rem;
  padding: 0 var(--space-3);
}
@media (min-width: 768px) {
  .stat-tile + .stat-tile { border-left: 1px solid var(--color-border); }
}
.stat-tile__value {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.25rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--eco-purple-700);
  margin: 0 0 var(--space-2);
  display: inline-flex;
  align-items: baseline;
  gap: .1rem;
}
.stat-tile__plus {
  color: var(--eco-green-600);
  font-size: .6em;
  font-weight: 700;
  margin-left: .05em;
}
.stat-tile__slash {
  color: var(--color-text-muted);
  font-weight: 400;
  margin: 0 .05em;
}
.stat-tile__unit {
  font-size: .42em;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-left: .15em;
  align-self: center;
}
.stat-tile__label {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
  max-width: 20ch;
  /* Twee regels reserveren, ook als het label er maar een nodig heeft. Anders
     begint de toelichting per tegel op een andere hoogte en staat de rij scheef. */
  min-height: 2.6em;
}
.stat-tile__sub {
  font-size: .8125rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
  max-width: 24ch;
}

/* Bootstrap utility shim (mocht visually-hidden niet uit Bootstrap komen) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- Werken bij band ---------- */
.werken-bij {
  background:
    radial-gradient(1200px 360px at 80% 0%, rgba(108, 33, 130, .08), transparent 60%),
    var(--color-surface);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.werken-bij h2 { margin-bottom: var(--space-3); }
.werken-bij p  { color: var(--color-text-muted); }
.werken-bij p:last-of-type { color: var(--color-text); }

.vacancy-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.vacancy-list li { max-width: none; padding: 0; }

.vacancy-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--eco-purple-500);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vacancy-card:hover,
.vacancy-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
  border-left-color: var(--eco-green-500);
  text-decoration: none;
  color: var(--color-text);
}
.vacancy-card__title {
  grid-column: 1;
  grid-row: 1;
  display: block;
  font-weight: 700;
  font-size: 1.0625rem;
}
.vacancy-card__meta {
  grid-column: 1;
  grid-row: 2;
  display: block;
  color: var(--color-text-muted);
  font-size: .875rem;
  margin-top: .15rem;
}
.vacancy-card__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.25rem;
  color: var(--color-accent-strong);
  transition: transform .2s ease;
}
.vacancy-card:hover .vacancy-card__arrow { transform: translateX(4px); }

/* ---------- Certificeringen — chips ---------- */
/* Certificaat-logo's: officiële logo's in een rij. Witte chip-achtergrond
   zodat de zwarte EBN-merken óók goed leesbaar zijn op de paarse trust-band.
   Label onder elke tile duidt aan wat de norm meet.
   Layout: CSS grid 2×2 op mobiel (smal scherm), 4×1 op tablet+. De tile is
   vierkant via aspect-ratio en kan dankzij `minmax(0, 1fr)` nooit groter
   worden dan zijn grid-cel — zo geen overflow op smalle schermen. */
.cert-logos {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--space-7);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 22rem;          /* mobiel: ~352px, geeft tegels van ~150px */
}
@media (min-width: 576px) {
  .cert-logos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 46rem;        /* tablet+: ~736px, vier tegels naast elkaar */
    gap: var(--space-4);
  }
}
@media (min-width: 1200px) {
  .cert-logos { gap: var(--space-5); max-width: 52rem; }
}
.cert-logos li { padding: 0; max-width: none; }
.cert-logos__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: inherit;
}
.cert-logos__chip {
  --chip-marge: 14%;         /* schaalt mee met de chip-breedte */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* De tegel is een flexitem in een kolom, en min-height:auto laat zo'n item
     meegroeien met zijn inhoud. Een staand logo duwde de tegel daardoor hoger
     dan breed - de aspect-ratio hierboven werd gewoon overruled. Met min-height
     nul wint de vierkante verhouding en past het logo zich aan, niet de tegel. */
  min-height: 0;
  padding: var(--chip-marge);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Een liggend logo in een vierkante tegel wordt begrensd door zijn breedte en
   oogt daardoor kleiner dan de staande certificaten ernaast. Minder marge maakt
   het optisch even groot; de tegel zelf blijft precies gelijk.

   Het staat als aparte eigenschap en met een dubbele klasse in de selector,
   want de mediaquery onderaan zet de marge opnieuw en zou hem anders overrulen. */
.cert-logos__chip.cert-logos__chip--breed { --chip-marge: 4%; }

.cert-logos__tile:hover .cert-logos__chip,
.cert-logos__tile:focus-visible .cert-logos__chip {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--eco-purple-100);
}
.cert-logos__tile:focus-visible { outline: none; }
.cert-logos__chip img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.cert-logos__label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--eco-purple-700);
  text-align: center;
  letter-spacing: .02em;
  line-height: 1.3;
  width: 100%;
}
@media (min-width: 576px) {
  .cert-logos__tile { gap: .65rem; }
  .cert-logos__chip { --chip-marge: 16%; border-radius: 14px; }
  .cert-logos__label { font-size: .875rem; }
}
@media (min-width: 1200px) {
  .cert-logos__label { font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cert-logos__chip { transition: none; }
  .cert-logos__tile:hover .cert-logos__chip { transform: none; }
}

/* ---------- Navbar — accent-link voor "Werken bij" ---------- */
.navbar .nav-link.nav-link--accent {
  color: var(--eco-purple-700);
  font-weight: 600;
}
.navbar .nav-link.nav-link--accent:hover,
.navbar .nav-link.nav-link--accent:focus-visible,
.navbar .nav-link.nav-link--accent.is-active {
  color: var(--eco-purple-700);
  box-shadow: inset 0 -3px 0 var(--eco-purple-500);
}

/* ---------- News-list (homepage band) ---------- */
.news-list { list-style: none; padding: 0; margin: 0; }
.news-list li {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  max-width: none;
}
.news-list li:first-child { padding-top: 0; }
.news-list li:last-child  { border-bottom: 0; }
.news-list time {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(87, 191, 41, .14);
  color: var(--eco-green-700);
  padding: .15rem .55rem;
  border-radius: 999px;
  margin-bottom: var(--space-2);
}
.news-list a {
  display: block;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
}
.news-list a:hover { color: var(--color-accent-strong); }

/* ---------- Trust-band ---------- */
.trust-band { padding: var(--space-8) 0; }
.trust-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: var(--space-6);
  /* Een kolom op een telefoon. Twee kolommen was hier fout: elke cel is een
     icoon van 44px plus tekst, en dan blijft er zo weinig over dat er nog maar
     twee woorden per regel passen. Een woord als "brancheorganisatie" past dan
     helemaal niet meer en duwde de hele pagina zijwaarts.

     minmax(0, 1fr) in plaats van 1fr: bij 1fr is de ondergrens van een spoor de
     langste ononderbroken tekst, en dan rekt een lang woord het raster alsnog
     buiten het scherm. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 576px) {
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .trust-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.trust-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: none;
  /* Vangnet voor het geval er ooit een nog langer woord in komt. */
  overflow-wrap: break-word;
  min-width: 0;
}
.trust-list .trust-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(108, 33, 130, .10);
  color: var(--eco-purple-600);
  font-size: 1.25rem;
}
.trust-list .trust-icon--ngb {
  /* NGB-logo is groen — neutrale lichte achtergrond past beter dan paars. */
  background: #ffffff;
  border: 1px solid var(--color-border);
  padding: 6px;
}
.trust-list .trust-icon--ngb img {
  max-width: 100%;
  height: auto;
  display: block;
}
.trust-list strong {
  display: block;
  color: var(--color-text);
  font-size: 1rem;
  margin-bottom: .15rem;
}
.trust-list span {
  color: var(--color-text-muted);
  font-size: .9375rem;
  line-height: 1.45;
}

/* Werkgebied-kaart frame */
.map-link {
  display: inline-block;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.map-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.map-thumb { display: block; max-width: 100%; height: auto; }

/* ---------- Footer ---------- */
footer.site-footer {
  margin-top: var(--space-9);
  padding: var(--space-7) 0 var(--space-5);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  border-top: 4px solid var(--eco-purple-500);
  font-size: .9375rem;
}
footer.site-footer h3 {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  font-weight: 700;
}
footer.site-footer a {
  color: var(--color-text);
  text-decoration: none;
}
footer.site-footer a:hover {
  color: var(--color-accent-strong);
  text-decoration: underline;
}
footer.site-footer ul { list-style: none; padding: 0; margin: 0; }
footer.site-footer li { padding: .15rem 0; max-width: none; }
footer.site-footer address {
  font-style: normal;
  line-height: 1.6;
}
footer.site-footer .footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: .8125rem;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
}
footer.site-footer .footer-bottom a { color: var(--color-text-muted); }
footer.site-footer .footer-ngb {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
}
footer.site-footer .footer-ngb span { color: var(--color-text-muted); }
footer.site-footer .footer-ngb img {
  height: 28px;
  width: auto;
  display: block;
}
footer.site-footer .footer-ngb:hover img,
footer.site-footer .footer-ngb:focus-visible img {
  opacity: .85;
}
footer.site-footer .footer-social {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
footer.site-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
footer.site-footer .footer-social .bi { font-size: 1.05rem; color: var(--color-text); }

/* ---------- FAQ-blok (native details/summary) ---------- */
.faq-list {
  margin: var(--space-5) 0 var(--space-4);
  border-top: 1px solid var(--color-border, #e5e7eb);
}
.faq-list details {
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 2.25rem 1rem 0;
  position: relative;
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
  line-height: 1.4;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 400;
  color: var(--color-accent-strong, var(--color-accent, #4a7c2e));
  transition: transform .2s ease;
}
.faq-list details[open] summary::after {
  content: "−";
}
.faq-list summary:hover,
.faq-list summary:focus-visible {
  color: var(--color-accent-strong, var(--color-accent, #4a7c2e));
  outline: none;
}
.faq-list .faq-answer {
  padding: 0 0 1rem;
  color: var(--color-text-muted, #4a4a4a);
}
.faq-list .faq-answer p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .faq-list summary::after { transition: none; }
}

/* ---------- "Lees ook" interlinking ---------- */
.related-links {
  margin: var(--space-5) 0 var(--space-4);
  padding: 1rem 0 0;
  border-top: 1px solid var(--color-border, #e5e7eb);
}
.related-links h2 {
  font-size: .9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted, #4a4a4a);
  margin: 0 0 .75rem;
}
.related-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}
.related-links li { margin: 0; }
.related-links a {
  display: inline-block;
  padding: .35rem .85rem;
  background: var(--surface-soft, #f4f6f1);
  border-radius: 999px;
  color: var(--color-text, #1a1a1a);
  text-decoration: none;
  font-size: .9rem;
  transition: background-color .15s ease, color .15s ease;
}
.related-links a:hover,
.related-links a:focus-visible {
  background: var(--color-accent, #4a7c2e);
  color: #fff;
  outline: none;
}

/* ---------- Bootstrap-icons helper ---------- */
.bi { vertical-align: -0.125em; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card::before { transition: none; }
  .service-card:hover { transform: none; }
  .service-card:hover::before { transform: scaleY(1); }
}

/* ---------- Aanraakschermen: hover die blijft hangen ---------- */
/* Een aanraakscherm heeft geen aanwijzer die ergens overheen zweeft, dus bootst
   de browser hover na: het element dat je als laatste hebt aangeraakt houdt de
   hover-stand vast tot je ergens anders tikt. Bij het scrollen levert dat een
   groen balkje op dat lijkt achter te lopen, soms overslaat en op de verkeerde
   kaart blijft staan - precies de indruk van een haperende animatie.

   Op zulke schermen zetten we de beweging uit. Het groene balkje staat dan
   gewoon altijd aan, op elke kaart, en de rest blijft stil. De hover-effecten
   zelf blijven ongemoeid voor wie wel een muis heeft; op een aanraaklaptop met
   muis geldt hover: hover en verandert er dus niets.

   De selectors zijn hier expres net zo zwaar als hierboven: een mediaquery
   verhoogt de specificiteit niet, dus een lichtere selector zou verliezen. */
@media (hover: none) {
  .service-card { transition: none; }
  .service-card::before { transform: scaleY(1); transition: none; }
  .service-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--color-border);
  }
  .service-card--icon .service-card__icon,
  .service-card--icon .service-card__more::after,
  .service-card--photo .service-card__media img,
  .service-card--photo .service-card__more::after { transition: none; }
  .service-card--icon:hover .service-card__icon,
  .service-card--icon:hover .service-card__more::after,
  .service-card--photo:hover .service-card__media img,
  .service-card--photo:hover .service-card__more::after { transform: none; }

  .vacancy-card { transition: none; }
  .vacancy-card:hover {
    transform: none;
    box-shadow: none;
    border-left-color: var(--eco-purple-500);
  }
  .vacancy-card__arrow { transition: none; }
  .vacancy-card:hover .vacancy-card__arrow { transform: none; }

  .cert-logos__chip { transition: none; }
  .cert-logos__tile:hover .cert-logos__chip {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: var(--color-border);
  }

  .map-link { transition: none; }
  .map-link:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
}