/* ============================================================================
   LOONBEDRIJF VAN KLEEF — BOUWSTENEN (componenten.css)
   Hoort bij: style.css (tokens, basis, knoppen, header) van het child-thema.
   Bron van het ontwerp: staging.grastotaal.nl (huisstijllaag v2.0 + eigen
   CSS sectie 11 t/m 36, nagemeten op schermafbeeldingen van 1280 px breed,
   22 okt 2026). Maten, afstanden, kleuren, schaduwen en afrondingen zijn de
   Grastotaal-waarden; waar we afwijken staat dat erbij (meestal voor WCAG).
   Alle kleuren en maten komen uit de --gt-variabelen in style.css.

   HTML-contract: inc/kopband.php, inc/footer.php en de patronen in /patterns.
   Geen regels voor Konstruct of WPBakery; wel voor de kernblokken van
   WordPress (group, columns, cover, media-text, gallery, details, list).

   !important staat alleen waar WordPress of GeneratePress zelf !important
   gebruikt; dat staat er dan bij.

   Inhoud
    1. Banden (gt-band, gt-wrap, ritme, koppen, eyebrow, intro, donker)
    2. Kopband en hero
    3. Rasters en kaarten (incl. dienstkaart met foto, tekst met foto,
       "vier redenen")
    4. Vinkjes-rij en vinkjeslijst
    5. Werkwijze in stappen
    6. Veelgestelde vragen
    7. Offerteband en contactkaart
    8. Fotoraster en losse foto's
    9. Footer
   10. Toegankelijkheid en beweging
   11. Blokeditor
   12. Overige bouwstenen (linklijst, kolommen, video)
   13. 404-pagina en zoekresultaten (inc/zoeken-en-404.php)
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. BANDEN
   Een pagina is een stapel volle-breedte banden. Elke band is een group-blok
   met de klasse gt-band (patronen) of een <section class="gt-band"> (kopband).
   De band regelt zelf de kolom zoals .gt-wrap op Grastotaal (1200px met 24px
   zijmarge): een raster met drie kolommen, waarvan de middelste maximaal
   --gt-inhoud (1152px) breed is en de buitenste minimaal --gt-zijmarge (24px,
   ook op telefoons). Alle kinderen komen in de middelste kolom.
   ------------------------------------------------------------------------- */
.gt-band {
  display: grid;
  grid-template-columns: minmax(var(--gt-zijmarge), 1fr) minmax(0, var(--gt-inhoud)) minmax(var(--gt-zijmarge), 1fr);
  padding: var(--gt-band-ruimte, 76px) 0;
  background: var(--gt-wit);
}
.gt-band > * {
  grid-column: 2;
  min-width: 0;
  max-width: none;
  /* !important: WordPress zet op kinderen van een "constrained" group-blok
     max-width 820px en margin-left/right: auto !important (centreren).
     De band centreert zelf via het raster; de kinderen moeten links beginnen,
     anders staat een kop van 720px gecentreerd in een raster van 1200px. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0;
}
.gt-band > .gt-wrap { padding-left: 0; padding-right: 0; }

/* Ritme binnen een band, zoals op Grastotaal: kop → tekst 20px, eyebrow →
   kop 8px, intro → raster 34px. De band is een raster, dus marges vallen niet
   samen: alleen margin-top telt (WordPress zet er standaard 24px op). */
.gt-band > :not(:first-child) { margin-top: 20px; }
.gt-band > .gt-eyebrow { margin-bottom: 0; }
.gt-band > .gt-eyebrow + * { margin-top: 8px; }
.gt-band > .gt-intro + * { margin-top: 34px; }
/* Een kop midden in een band, na lopende tekst of een lijst: meer lucht
   erboven (h2 48px, h3 32px), zodat de nieuwe tekstdelen niet in elkaar
   overlopen (privacybeleid, cookiebeleid). Niet na een eyebrow (8px) of een
   intro (34px). Zelfde regel voor Elementor in elementor.css §2. */
.gt-band > :is(p, ul, ol):not(.gt-eyebrow):not(.gt-intro) + h2 { margin-top: 48px; }
.gt-band > :is(p, ul, ol):not(.gt-eyebrow):not(.gt-intro) + h3 { margin-top: 32px; }

/* Varianten */
.gt-band--wit  { background: var(--gt-wit); }
.gt-band--zand { background: var(--gt-zandwit); }
.gt-band--groen { background: var(--gt-groen-diep); color: var(--gt-wit); }
.gt-band--smal { padding-top: 32px; padding-bottom: 32px; }

/* Banden sluiten op elkaar aan, zonder lucht ertussen */
.entry-content > .gt-band + .gt-band,
.entry-content > .gt-hero + .gt-band { margin-top: 0; }

/* Volle breedte binnen de GeneratePress-container (1200px): de band breekt
   uit de kolom met negatieve marges. Op een pagina met de GP-layout
   "Volle breedte" (body.full-width-content) is dat niet nodig. */
.entry-content > .gt-band,
.entry-content > .gt-hero {
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
body.full-width-content .entry-content > .gt-band,
body.full-width-content .entry-content > .gt-hero { margin-left: 0; margin-right: 0; }
/* 100vw telt de schuifbalk mee; clip (niet hidden) voorkomt een horizontale
   schuifbalk zonder position: sticky te breken. */
html, body { overflow-x: clip; }

/* Binnenbreedte buiten een band (kopband, footer, topbalk): 1200px met 24px
   zijmarge, precies zoals .gt-wrap op Grastotaal */
.gt-wrap { max-width: var(--gt-breedte); margin-left: auto; margin-right: auto; padding-left: var(--gt-zijmarge); padding-right: var(--gt-zijmarge); }
/* Gewone inhoud buiten een band (een losse alinea, privacybeleid): op
   dezelfde lijn als de banden. GeneratePress zet 40px (30px op telefoon)
   binnenmarge in de container van 1200px; links en rechts wordt dat 24px. */
.one-container .site-content,
.separate-containers .inside-article { padding-left: var(--gt-zijmarge); padding-right: var(--gt-zijmarge); }

/* Koppen in een band: h2 groot (Grastotaal: clamp 28–40px, Sora 700),
   prettige regellengte, links uitgelijnd */
.gt-band h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; }
.gt-band > h2, .gt-band > .wp-block-heading { max-width: 720px; text-wrap: balance; }
/* Ook koppen in kolommen, kaarten en tekst met foto: geen los woord op de
   laatste regel (browsers zonder balance negeren dit gewoon) */
.entry-content :is(h2, h3) { text-wrap: balance; }

/* Donkere vlakken: witte tekst en koppen, lichte links */
.gt-donker, .gt-band--groen { color: var(--gt-wit); }
.gt-donker :is(h1, h2, h3, h4, h5, h6),
.gt-band--groen :is(h1, h2, h3, h4, h5, h6) { color: var(--gt-wit); }
.gt-donker :is(p, li, figcaption, .gt-klein, small),
.gt-band--groen :is(p, li, figcaption, .gt-klein, small) { color: rgba(255, 255, 255, 0.92); }
.gt-donker strong, .gt-band--groen strong { color: inherit; }
.gt-donker a:not(.gt-knop):not(.wp-block-button__link),
.gt-band--groen a:not(.gt-knop):not(.wp-block-button__link) {
  color: var(--gt-wit);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}
.gt-donker a:not(.gt-knop):not(.wp-block-button__link):hover,
.gt-band--groen a:not(.gt-knop):not(.wp-block-button__link):hover {
  color: var(--gt-groen-opdonker);
  text-decoration-color: currentColor;
}
.gt-donker .wp-block-button__link:hover { background: var(--gt-groen-helder); color: var(--gt-tekst); }
/* Omlijnde knop op donker: witte rand, witte tekst (de hero heeft er een) */
.gt-donker .wp-block-button.is-style-outline > .wp-block-button__link,
.gt-donker .gt-knop--2 {
  background: transparent;
  color: var(--gt-wit);
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: none;
}
.gt-donker .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.gt-donker .gt-knop--2:hover { background: rgba(255, 255, 255, 0.14); color: var(--gt-wit); transform: translateY(-2px); }

/* Eyebrow (bovenkopje): diepgroen op licht (6,6:1 op wit, 6,1:1 op zand);
   op donker de lichte groentint (4,77:1 op diepgroen, Grastotaal 21a);
   met --licht wit (op foto's: kopband en hero) */
.gt-donker .gt-eyebrow, .gt-band--groen .gt-eyebrow { color: var(--gt-groen-opdonker); }
.gt-eyebrow--licht, .gt-donker .gt-eyebrow--licht { color: var(--gt-wit); }
p.gt-eyebrow { margin-bottom: 8px; }

/* Intro onder de sectiekop: zoals Grastotaal gewoon 17px, in de zachte
   tekstkleur, maximaal 640px breed, 34px boven het raster */
.gt-band .gt-intro,
.entry-content > .gt-intro {
  font-size: 1em;
  line-height: 1.65;
  color: var(--gt-tekst-zacht);
  max-width: 640px;
}
.entry-content > .gt-intro { margin-bottom: 34px; }
.gt-donker .gt-intro, .gt-band--groen .gt-intro { color: rgba(255, 255, 255, 0.92); }

/* Kleiner scherm: minder lucht (Grastotaal 56px tablet, 44px telefoon) */
@media (max-width: 980px) { .gt-band { padding: 56px 0; } .gt-band--smal { padding: 28px 0; } }
@media (max-width: 640px) {
  .gt-band { padding: 44px 0; }
  .gt-band--smal { padding: 22px 0; }
  .gt-band h2 { font-size: 26px; }
  .gt-band > .gt-intro + * { margin-top: 22px; }
}

/* ----------------------------------------------------------------------------
   2. KOPBAND EN HERO
   Kopband (inc/kopband.php), zoals de fotokop van Grastotaal (EC 14/15/30i):
   400px hoog, foto met een donkere overgang van boven naar beneden, de
   merkregel met vinkje en de titel verticaal in het midden, links; het
   kruimelpad als kleine groene pill rechtsonder. Zonder foto is de band
   diepgroen. Op tablet en telefoon staat het kruimelpad onder de titel
   (Grastotaal verbergt het daar; het is nuttige navigatie).
   ------------------------------------------------------------------------- */
.gt-band--kop {
  position: relative;
  isolation: isolate;
  min-height: 300px;
  padding: 0;
  align-content: stretch;
  background: var(--gt-groen-diep);
  color: var(--gt-wit);
  overflow: hidden;
}
.gt-band--kop-foto { min-height: 400px; background: var(--gt-tekst); }
.gt-band--kop > .gt-kop-foto { grid-column: auto; grid-row: auto; } /* geen rasterplaatsing: dan is de hele band het referentievlak van de absolute foto */
.gt-kop-foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 55%;
  border-radius: 0;
  margin: 0;
}
/* De overgang: minstens 60% donker over de hele band, onderaan 80%. Zo
   haalt witte tekst ook op een lichte plek in de foto het WCAG-contrast
   (4,5:1 voor de merkregel van 13px en de intro, 3:1 voor de titel); wit op
   een witte pixel haalt 4,5:1 vanaf ongeveer 59% donker. Grastotaal begint
   bovenaan lichter (8%); dat haalde de eis voor de kleine merkregel niet.
   Minder donker kan alleen met grotere tekst. De titel houdt zijn
   tekstschaduw. */
.gt-band--kop-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(23, 26, 21, 0.6) 0%, rgba(23, 26, 21, 0.62) 50%, rgba(23, 26, 21, 0.8) 100%);
}
.gt-band--kop > .gt-kop-inhoud {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
  padding-top: 56px;
  padding-bottom: 56px; /* ruimer dan het kruimelpad (25px + 29px), zodat de tekst er nooit overheen loopt */
}
.gt-kop-inhoud h1 {
  color: var(--gt-wit);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.15;
  max-width: 820px;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(23, 26, 21, 0.5);
}
/* Merkregel: "✓ Loonbedrijf Van Kleef · sinds 2003", wit (Grastotaal 30i) */
.gt-kop-inhoud .gt-kop-merk {
  color: var(--gt-wit);
  letter-spacing: 0.05em;
  margin: 0 0 10px;
  max-width: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 16px rgba(0, 0, 0, 0.55);
}
.gt-kop-merk__vinkje { font-weight: 700; }
.gt-kop-intro {
  font-size: 1.06em;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.94);
  max-width: 640px;
  margin: 14px 0 0;
  text-shadow: 0 1px 8px rgba(23, 26, 21, 0.6);
}

/* Kruimelpad (Yoast): kleine groene pill (Grastotaal 15: 12,5px, 7/16px,
   82% diepgroen, zachte schaduw), links wit, laatste item vet */
.gt-kruimels { margin: 0; font-family: var(--gt-font-body); font-size: 12.5px; line-height: 1.2; }
.gt-kop-inhoud > .gt-kruimels { position: absolute; right: 0; bottom: 25px; max-width: 60%; }
.gt-kruimels > span, .gt-kruimels > p {
  display: inline-block;
  margin: 0;
  padding: 7px 16px;
  border-radius: var(--gt-radius-knop);
  background: rgba(44, 106, 40, 0.82);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 10px rgba(23, 26, 21, 0.25);
}
.gt-kruimels a { color: var(--gt-wit); text-decoration: none; }
.gt-kruimels a:hover, .gt-kruimels a:focus-visible { color: var(--gt-groen-opdonker); text-decoration: underline; text-underline-offset: 3px; }
.gt-kruimels .breadcrumb_last { font-weight: 600; color: var(--gt-wit); }

/* Geen lucht tussen kopband en inhoud: GeneratePress zet 40px om de inhoud.
   Alleen als de pagina met een band begint of eindigt, anders blijft de
   gewone witruimte rond lopende tekst staan. */
.lvk-met-kopband .site-content:has(.entry-content > .gt-band:first-child),
.lvk-met-kopband .inside-article:has(> .entry-content > .gt-band:first-child) { padding-top: 0; }
.site-content:has(.entry-content > .gt-band:last-child),
.inside-article:has(> .entry-content > .gt-band:last-child) { padding-bottom: 0; }
.lvk-met-kopband .entry-content > .gt-band:first-child { margin-top: 0; }

@media (max-width: 1024px) {
  .gt-band--kop > .gt-kop-inhoud { padding-top: 48px; padding-bottom: 40px; }
  .gt-kop-inhoud > .gt-kruimels { position: static; max-width: none; margin-top: 18px; }
}
@media (max-width: 640px) {
  .gt-band--kop { min-height: 200px; }
  .gt-band--kop-foto { min-height: 250px; }
  .gt-band--kop > .gt-kop-inhoud { padding-top: 40px; padding-bottom: 32px; }
  .gt-kop-intro { font-size: 1em; }
  .gt-kruimels { font-size: 12px; }
  .gt-kruimels > span, .gt-kruimels > p { padding: 6px 14px; }
}
/* Heel smal (320-360 px, of 400% zoom): lange samenstellingen in de titel
   ("Gewasbescherming", "Project: plantwerkzaamheden") passen in 30 px niet op
   een regel en liepen buiten beeld (WCAG 1.4.10). Daar de titel iets kleiner en
   zo nodig afbreken met een afbreekstreepje; breder blijven woorden heel. */
.gt-kop-inhoud h1 { overflow-wrap: break-word; }
@media (max-width: 360px) {
  .gt-kop-inhoud h1 { font-size: 26px; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
}

/* Hero op de homepage: een cover-blok met de uitgelichte foto, 55% donker
   (overlay uit het blok) plus een verloop van links naar rechts, zodat de
   tekst links altijd op een donkere ondergrond staat. (De homepage-vormgeving
   staat verder in home.css; hier alleen de basis.) */
.wp-block-cover.gt-hero {
  padding: 0;
  justify-content: center;
  align-items: center;
  background: var(--gt-tekst);
  isolation: isolate;
}
.gt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(23, 26, 21, 0.55) 0%, rgba(23, 26, 21, 0.3) 55%, rgba(23, 26, 21, 0.05) 100%);
}
.gt-hero .wp-block-cover__image-background,
.gt-hero .wp-block-cover__video-background { border-radius: 0; object-position: center 40%; }
.gt-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--gt-breedte);
  margin: 0 auto;
  padding: 96px var(--gt-zijmarge) 80px;
  text-align: left;
  color: var(--gt-wit);
}
.gt-hero .wp-block-cover__inner-container > * {
  /* !important: zie de uitleg bij .gt-band > * (constrained layout van WordPress) */
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
}
.gt-hero h1 {
  color: var(--gt-wit);
  font-size: clamp(32px, 5vw, 56px);
  max-width: 680px;
  text-wrap: balance;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.35);
}
.gt-hero__tekst {
  font-size: 1.15em;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
  max-width: 560px;
  text-shadow: 0 1px 8px rgba(23, 26, 21, 0.45);
}
.gt-hero .gt-knoppen { margin-top: 26px; gap: 14px; }
.gt-hero .wp-block-button__link { background: var(--gt-wit); color: var(--gt-groen-diep); }
.gt-hero .wp-block-button__link:hover { background: var(--gt-groen-helder); color: var(--gt-tekst); }
@media (max-width: 640px) {
  .gt-hero .wp-block-cover__inner-container { padding: 56px var(--gt-zijmarge) 48px; }
  .gt-hero::before { background: linear-gradient(180deg, rgba(23, 26, 21, 0.55) 0%, rgba(23, 26, 21, 0.3) 55%, rgba(23, 26, 21, 0.5) 100%); }
  .gt-hero h1 { font-size: 32px; }
  .gt-hero__tekst { font-size: 1.02em; }
  .gt-knoppen .wp-block-button { flex: 1 1 100%; }
  .gt-knoppen .wp-block-button__link, .gt-knoppen .gt-knop { display: block; width: 100%; text-align: center; }
}

/* ----------------------------------------------------------------------------
   3. RASTERS EN KAARTEN
   gt-grid2 / gt-grid3 / gt-grid4 staan op een columns-blok (patronen) of op
   een eigen div. Als raster (grid) in plaats van de flex van het
   columns-blok: dan werkt het terugvallen naar twee en één kolom zonder
   !important tegen de kernregels. Het media-text-blok (gt-tekst-foto) heeft
   zijn eigen raster en wordt hier bewust uitgesloten.
   Maten van Grastotaal (EC 11): grid2 1,05fr/0,95fr met 52px, grid3 26px,
   grid4 24px.
   ------------------------------------------------------------------------- */
.gt-grid2:not(.wp-block-media-text),
.gt-grid3,
.gt-grid4 {
  display: grid;
  width: 100%;
  margin-bottom: 0;
}
.gt-grid2:not(.wp-block-media-text) { grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; }
.gt-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: stretch; }
.gt-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.gt-grid2--boven { align-items: start; }
.gt-grid2:not(.wp-block-media-text) > .wp-block-column,
.gt-grid3 > .wp-block-column,
.gt-grid4 > .wp-block-column { min-width: 0; margin: 0; }
.gt-grid2:not(.wp-block-media-text):not(.gt-grid2--boven):not(.gt-kaarten) > .wp-block-column { align-self: center; }
.gt-grid2--boven > .wp-block-column { align-self: start; }
/* Kaarten in twee kolommen (wagenpark): even hoog en 26px tussen de rijen, zoals grid3 */
.gt-grid2.gt-kaarten:not(.wp-block-media-text) { row-gap: 26px; align-items: stretch; }
.gt-grid2.gt-kaarten > .wp-block-column { align-self: stretch; }
/* WordPress zet body .is-layout-flex {display:flex} op kolommenblokken; de rasters moeten grid blijven. */
body .wp-block-columns.gt-grid3,
body .wp-block-columns.gt-grid4,
body .wp-block-columns.gt-grid2:not(.wp-block-media-text) { display: grid; }
/* Foto in een tweekoloms raster: 460px hoog, bijgesneden (Grastotaal) */
.gt-grid2 img.gt-foto, .gt-grid2 .gt-foto img { width: 100%; height: 460px; object-fit: cover; }

@media (max-width: 980px) {
  .gt-grid2:not(.wp-block-media-text), .gt-grid3, .gt-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gt-grid2:not(.wp-block-media-text) { gap: 32px; }
  .gt-grid2 img.gt-foto, .gt-grid2 .gt-foto img { height: 320px; }
}
/* Tablet: drie kaarten in twee kolommen laten anders een lege halve rij
   over. De laatste (losse) kaart loopt dan over de volle breedte, met een
   bredere foto (21:9). Zelfde regel voor Elementor in elementor.css §11. */
@media (min-width: 641px) and (max-width: 980px) {
  .gt-grid3 > .wp-block-column:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .gt-grid3 > .gt-kaart--dienst:last-child:nth-child(odd) .gt-kaart__foto img { aspect-ratio: 21 / 9; }
}
@media (max-width: 640px) {
  .gt-grid2:not(.wp-block-media-text), .gt-grid3, .gt-grid4 { grid-template-columns: minmax(0, 1fr); }
  .gt-grid2:not(.wp-block-media-text) { gap: 24px; }
  .gt-grid3, .gt-grid4 { gap: 14px; }
  .gt-grid2 img.gt-foto, .gt-grid2 .gt-foto img { height: 240px; }
}

/* Kaart: wit, 16px hoeken, zachte schaduw, 28px binnenmarge, lift bij hover.
   Geen rand (ook niet op een witte band): zoals Grastotaal alleen de schaduw.
   Als kolom van boven naar beneden, zodat "Lees meer" onderaan uitlijnt. */
.gt-kaart {
  display: flex;
  flex-direction: column;
  background: var(--gt-wit);
  color: var(--gt-tekst);
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-schaduw);
  padding: 28px;
  transition: box-shadow var(--gt-overgang), transform var(--gt-overgang);
}
.gt-kaart:hover { box-shadow: var(--gt-schaduw-hover); transform: translateY(-2px); }
.gt-kaart > * { margin-top: 0; margin-bottom: 0; }
.gt-kaart > :not(:first-child) { margin-top: 14px; }
.gt-kaart > :is(h2, h3, h4) + :not(:first-child) { margin-top: 10px; }
.gt-kaart :is(h2, h3, h4) { color: var(--gt-tekst); margin-bottom: 0; }
.gt-kaart p { font-size: 15.5px; line-height: 1.65; color: var(--gt-tekst-zacht); max-width: none; }
.gt-kaart .gt-eyebrow { font-size: 13px; color: var(--gt-groen-diep); }
.gt-kaart .gt-vinkjes li { margin-bottom: 6px; }
/* Witte kaart op een donkere band houdt donkere tekst */
.gt-donker .gt-kaart :is(h2, h3, h4), .gt-band--groen .gt-kaart :is(h2, h3, h4) { color: var(--gt-tekst); }
.gt-donker .gt-kaart p, .gt-band--groen .gt-kaart p { color: var(--gt-tekst-zacht); }
.gt-donker .gt-kaart a:not(.gt-knop):not(.wp-block-button__link),
.gt-band--groen .gt-kaart a:not(.gt-knop):not(.wp-block-button__link) { color: var(--gt-groen-diep); }
.gt-donker .gt-kaart a:not(.gt-knop):not(.wp-block-button__link):hover { color: var(--gt-groen-diep-hv); }
.gt-donker .gt-kaart a:focus-visible, .gt-donker .gt-kaart button:focus-visible { outline-color: var(--gt-groen-diep); }

/* "Lees meer →" links onderaan de kaart: 600, 15px, diepgroen; bij hover
   een rode onderstreping (Grastotaal .gt-meer) */
.gt-kaart > .gt-kaart__link { margin-top: auto; padding-top: 16px; }
.gt-kaart__link { font-weight: 600; font-size: 15px; }
.gt-kaart p.gt-kaart__link { font-size: 15px; color: var(--gt-groen-diep); }
.gt-kaart__link a { color: var(--gt-groen-diep); text-decoration: none; }
/* De pijl is inline (vanaf 0.3.7), met een vaste spatie ervoor: zo komt hij nooit
   alleen op een nieuwe regel, maar altijd samen met het laatste woord. Een
   inline-block mag de browser los afbreken, ook na een vaste spatie. Het duwtje
   bij hover gaat daarom met left (position: relative) in plaats van transform,
   want transform werkt niet op een inline element. Werkt ook in Elementor
   (widget met klasse gt-kaart__link, elementor.css). */
.gt-kaart__link a::after { content: '\00a0\2192'; content: '\00a0\2192' / ''; position: relative; left: 0; transition: left var(--gt-overgang); }
.gt-kaart:hover .gt-kaart__link a, .gt-kaart__link a:hover, .gt-kaart__link a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--gt-rood);
  text-underline-offset: 3px;
}
.gt-kaart--dienst:hover .gt-kaart__link a::after { left: 3px; }

/* Dienstkaart met foto, zoals de doelgroepkaarten van Grastotaal
   (gt-kaart--strak): de foto loopt tot de randen van de kaart, zonder eigen
   afronding (de kaart snijdt hem af op 16px), daaronder 20/22/24px
   binnenmarge. Grastotaal zet de foto op 190px bij kaarten van 270px breed;
   hier dezelfde verhouding (10:7), want onze kaarten zijn breder. */
.gt-kaart--dienst { position: relative; padding: 20px 22px 24px; overflow: hidden; }
.gt-kaart--dienst:not(:has(> .gt-kaart__foto)) { padding: 28px; }
.gt-kaart--dienst > .gt-kaart__foto { margin: -20px -22px 0; max-width: none; } /* max-width: GeneratePress zet 100% op .size-large; dan loopt de foto niet tot de rand */
.gt-kaart--dienst > .gt-kaart__foto + * { margin-top: 20px; }
.gt-kaart--dienst .gt-kaart__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  border-radius: 0;
}
/* De hele kaart is klikbaar via de uitgerekte link; de linktekst
   ("Lees meer over bomen rooien") blijft de toegankelijke naam. */
.gt-kaart--dienst .gt-kaart__link a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.gt-kaart--dienst:has(.gt-kaart__link a):focus-within { outline: 3px solid var(--gt-groen-diep); outline-offset: 2px; }
.gt-kaart--dienst .gt-kaart__link a:focus-visible { outline: none; }
/* Kaart met een lijst links (homepage, wagenpark): geen lift, de links zijn het doel */
.gt-kaart--groep:hover { transform: none; }

/* Tekst met foto (media-text-blok), zoals gt-grid2 op Grastotaal: tekst
   1,05fr, foto 0,95fr, 52px ertussen, foto 460px hoog en 16px afgerond met
   een zachte schaduw. De 8%-binnenmarge van het kernblok gaat eruit. */
.wp-block-media-text.gt-tekst-foto { column-gap: 52px; align-items: center; }
.wp-block-media-text.gt-tekst-foto.has-media-on-the-right { grid-template-columns: 1.05fr 0.95fr; }
.wp-block-media-text.gt-tekst-foto:not(.has-media-on-the-right) { grid-template-columns: 0.95fr 1.05fr; }
.gt-tekst-foto .wp-block-media-text__content { padding: 0; }
.gt-tekst-foto .wp-block-media-text__content > :first-child { margin-top: 0; }
.gt-tekst-foto .wp-block-media-text__content > :last-child { margin-bottom: 0; }
/* Een alinea na een vinkjes- of stappenlijst: dezelfde ruimte als tussen
   twee alinea's, anders lijkt hij nog een lijstregel zonder vinkje */
.gt-tekst-foto .wp-block-media-text__content > :is(ul, ol) + * { margin-top: 1.1em; }
.gt-tekst-foto .wp-block-media-text__media { margin: 0; }
.gt-tekst-foto .wp-block-media-text__media img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-schaduw);
}
@media (max-width: 980px) {
  .wp-block-media-text.gt-tekst-foto { column-gap: 32px; }
  .gt-tekst-foto .wp-block-media-text__media img { height: 320px; }
}
@media (max-width: 640px) {
  .gt-tekst-foto .wp-block-media-text__media img { height: 240px; }
}
@media (max-width: 600px) {
  .wp-block-media-text.gt-tekst-foto.is-stacked-on-mobile { row-gap: 24px; }
  .wp-block-media-text.gt-tekst-foto.is-stacked-on-mobile .wp-block-media-text__content { padding: 0; }
}

/* "Vier redenen" (Grastotaal .gt-waarom): vier tekstblokken naast elkaar op
   zand, kop in diepgroen, tekst 15,5px zacht. Columns-blok met de klassen
   gt-grid4 gt-waarom; de kolommen zijn geen kaarten. */
.gt-waarom > .wp-block-column > :first-child { margin-top: 0; }
.gt-waarom :is(h3, h4) { color: var(--gt-groen-diep); margin: 0 0 10px; }
.gt-waarom p { font-size: 15.5px; line-height: 1.65; color: var(--gt-tekst-zacht); max-width: none; margin: 0; }

@media (max-width: 640px) {
  .gt-kaart { padding: 18px; }
  .gt-kaart--dienst { padding: 16px 18px 18px; }
  .gt-kaart--dienst:not(:has(> .gt-kaart__foto)) { padding: 18px; }
  .gt-kaart--dienst > .gt-kaart__foto { margin: -16px -18px 0; }
  .gt-kaart--dienst > .gt-kaart__foto + * { margin-top: 16px; }
  .gt-kaart--dienst .gt-kaart__foto img { aspect-ratio: auto; height: 170px; }
  .gt-kaart p, .gt-waarom p { font-size: 14.5px; }
}

/* ----------------------------------------------------------------------------
   4. VINKJES-RIJ EN VINKJESLIJST
   gt-badges: een lijst (ul) met korte feiten als pillen met een vinkje, links
   uitgelijnd zoals alles op Grastotaal; maten van de pillen (gt-chips):
   9/16px, 15,5px, 600. Het vinkje in grasgroen (Grastotaal 21b: 4,16:1 op wit).
   gt-vinkjes: de basis staat in style.css; hier de marges en donker.
   ------------------------------------------------------------------------- */
.gt-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
}
.gt-badges > li, .gt-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 16px 9px 12px;
  max-width: none;
  border: 1px solid var(--gt-lijn);
  border-radius: var(--gt-radius-knop);
  background: var(--gt-wit);
  color: var(--gt-tekst);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.4;
}
.gt-band--wit .gt-badge { background: var(--gt-zandwit); }
.gt-badge::before {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: var(--gt-groen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M8 13.4 4.6 10l-1.2 1.2L8 15.8l8.6-8.6L15.4 6z'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M8 13.4 4.6 10l-1.2 1.2L8 15.8l8.6-8.6L15.4 6z'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.gt-band--wit .gt-badge::before { background-color: var(--gt-groen-diep); } /* grasgroen op zandwit haalt 3,85:1; diepgroen 6,1:1 */
.gt-badge a { color: inherit; text-decoration: none; }
.gt-badge a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Op donker: doorschijnende pil, licht vinkje */
.gt-donker .gt-badge, .gt-band--groen .gt-badge {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--gt-wit);
}
.gt-donker .gt-badge::before, .gt-band--groen .gt-badge::before { background-color: var(--gt-groen-opdonker); }
@media (max-width: 640px) {
  .gt-badges { gap: 8px; }
  .gt-badge { font-size: 14px; padding: 7px 14px 7px 10px; }
}

/* Vinkjeslijst: marges; vinkje op donker in de lichte groentint */
.gt-vinkjes { margin: 0; }
.gt-vinkjes li { max-width: var(--gt-breedte-tekst); }
.gt-vinkjes li:last-child { margin-bottom: 0; }
.gt-donker .gt-vinkjes li::before, .gt-band--groen .gt-vinkjes li::before { background-color: var(--gt-groen-opdonker); }

/* ----------------------------------------------------------------------------
   5. WERKWIJZE IN STAPPEN
   Zoals Grastotaal (EC 28): een genummerde lijst onder elkaar, het nummer in
   een diepgroene cirkel van 36px links, de kop van de stap vet in Sora 17px,
   de tekst 17px in de gewone tekstkleur. Prettige regellengte (760px).
   ------------------------------------------------------------------------- */
.gt-stappen {
  list-style: none;
  counter-reset: gt-stap;
  margin: 8px 0 0;
  padding: 0;
  max-width: 760px;
}
.gt-stappen li {
  counter-increment: gt-stap;
  position: relative;
  min-height: 36px;
  margin: 0;
  padding: 0 0 18px 52px;
  max-width: none;
  font-size: 17px;
  line-height: 1.65;
  color: var(--gt-tekst);
}
.gt-stappen li:last-child { padding-bottom: 0; }
.gt-stappen li::before {
  content: counter(gt-stap);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gt-groen-diep);
  color: var(--gt-wit);
  font-family: var(--gt-font-kop);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gt-stappen li > strong, .gt-stappen li > b {
  display: block;
  font-family: var(--gt-font-kop);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--gt-tekst);
  margin-bottom: 2px;
  padding-top: 6px;
}
.gt-donker .gt-stappen li, .gt-band--groen .gt-stappen li { color: rgba(255, 255, 255, 0.92); }
.gt-donker .gt-stappen li > strong, .gt-band--groen .gt-stappen li > strong { color: var(--gt-wit); }
.gt-donker .gt-stappen li::before, .gt-band--groen .gt-stappen li::before { background: var(--gt-wit); color: var(--gt-groen-diep); }
@media (max-width: 640px) {
  .gt-stappen li { padding-left: 46px; font-size: 16px; }
}

/* ----------------------------------------------------------------------------
   6. VEELGESTELDE VRAGEN
   Zoals Grastotaal (EC 28): witte vakken met een dunne lijn en 8px hoeken,
   10px ertussen, vraag in IBM Plex Sans 600 17px diepgroen, een plus rechts
   die een min wordt. De band zelf heeft de klasse gt-faq; elke vraag is een
   details-blok (gt-faq__item). Native details/summary: openen, sluiten en
   toetsenbord regelt de browser; geen JavaScript. Plus en min zijn CSS.
   ------------------------------------------------------------------------- */
.gt-faq > .gt-faq__item { max-width: 820px; }
.gt-faq > .gt-faq__item + .gt-faq__item { margin-top: 10px; }
.gt-faq__item {
  background: var(--gt-wit);
  border: 1px solid var(--gt-lijn);
  border-radius: var(--gt-radius-klein);
}
.gt-faq__item > summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  box-sizing: border-box; /* de summary krijgt anders content-box: 44px + padding = 76px hoog */
  min-height: 44px;
  padding: 16px 52px 16px 20px;
  font-family: var(--gt-font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--gt-groen-diep);
  border-radius: var(--gt-radius-klein);
}
.gt-faq__item > summary::-webkit-details-marker { display: none; }
.gt-faq__item > summary::marker { content: ''; }
.gt-faq__item > summary:hover { color: var(--gt-groen-diep-hv); text-decoration: underline; text-decoration-color: var(--gt-rood); text-underline-offset: 3px; }
/* Plus rechts (24px); als de vraag open is een min */
.gt-faq__item > summary::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background-color: var(--gt-groen-diep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") center / 24px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.gt-faq__item[open] > summary::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 11h14v2H5z'/%3E%3C/svg%3E");
}
.gt-faq__item > summary:focus-visible { outline: 3px solid var(--gt-groen-diep); outline-offset: 2px; }
/* Antwoord: de blokken staan direct in details (geen div eromheen) */
.gt-faq__item > :not(summary) { margin-top: 0; padding: 0 20px; max-width: none; }
.gt-faq__item > :not(summary) + * { margin-top: 12px; }
.gt-faq__item > :last-child:not(summary) { padding-bottom: 20px; margin-bottom: 0; }
.gt-faq__item > p { font-size: 17px; line-height: 1.65; color: var(--gt-tekst); }
.gt-faq__item a { text-decoration: underline; text-underline-offset: 3px; }
/* Op donker: het vak blijft wit met donkere tekst */
.gt-donker .gt-faq__item, .gt-band--groen .gt-faq__item { color: var(--gt-tekst); }
.gt-donker .gt-faq__item > summary { color: var(--gt-groen-diep); }
.gt-donker .gt-faq__item > p { color: var(--gt-tekst); }
@media (max-width: 640px) {
  .gt-faq__item > summary { padding: 14px 48px 14px 16px; font-size: 16px; }
  .gt-faq__item > summary::after { right: 14px; }
  .gt-faq__item > :not(summary) { padding: 0 16px; }
  .gt-faq__item > :last-child:not(summary) { padding-bottom: 16px; }
  .gt-faq__item > p { font-size: 16px; }
}

/* ----------------------------------------------------------------------------
   7. OFFERTEBAND EN CONTACTKAART
   Diepgroene band (gt-band--groen gt-donker gt-cta-band) onderaan elke
   pagina, zoals Grastotaal: links (1,05fr) kop, tekst en de offerteknop (wit
   met diepgroene tekst: 6,6:1), rechts (0,95fr) de witte contactkaart,
   52px ertussen, verticaal gecentreerd.
   ------------------------------------------------------------------------- */
.gt-cta-band h2 { color: var(--gt-wit); }
.gt-cta-band .wp-block-column > h2:first-child { margin-top: 0; }
.gt-cta-band .wp-block-column > p { color: rgba(255, 255, 255, 0.92); }
.gt-cta-band .gt-knoppen { margin-top: 26px; }
.gt-cta-band .wp-block-button__link, .gt-cta-band .gt-knop { background: var(--gt-wit); color: var(--gt-groen-diep); }
.gt-cta-band .wp-block-button__link:hover, .gt-cta-band .gt-knop:hover { background: var(--gt-groen-helder); color: var(--gt-tekst); }
.gt-cta-band__kolommen { align-items: center; }

/* Contactkaart: witte kaart (zoals .gt-kaart: 16px, schaduw, 28px), ook op
   donker; kop "Direct contact" als kaartkop, links diepgroen 500 en groot
   genoeg om aan te tikken (telefoon en e-mail staan elk op een eigen regel) */
.gt-contactkaart {
  background: var(--gt-wit);
  color: var(--gt-tekst);
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-schaduw);
  padding: 28px;
}
.gt-contactkaart > * + * { margin-top: 12px; }
.gt-contactkaart h3 { color: var(--gt-tekst); margin: 0 0 4px; }
.gt-contactkaart p { color: var(--gt-tekst); font-size: 17px; line-height: 1.9; margin: 0; max-width: none; }
.gt-contactkaart p.gt-klein, .gt-contactkaart .gt-klein { color: var(--gt-tekst-zacht); font-size: 14px; line-height: 1.6; }
.gt-contactkaart a:not(.gt-knop):not(.wp-block-button__link) {
  display: inline-block;
  padding: 3px 0;
  color: var(--gt-groen-diep);
  font-weight: 500;
  text-decoration: none;
}
.gt-contactkaart a:not(.gt-knop):not(.wp-block-button__link):hover,
.gt-contactkaart a:not(.gt-knop):not(.wp-block-button__link):focus-visible {
  color: var(--gt-groen-diep-hv);
  text-decoration: underline;
  text-decoration-color: var(--gt-rood);
  text-underline-offset: 3px;
}
/* Op donker: de regels van .gt-donker (witte links, witte focusrand) gelden
   niet in de witte kaart */
.gt-donker .gt-contactkaart h3, .gt-band--groen .gt-contactkaart h3 { color: var(--gt-tekst); }
.gt-donker .gt-contactkaart p, .gt-band--groen .gt-contactkaart p { color: var(--gt-tekst); }
.gt-donker .gt-contactkaart .gt-klein, .gt-band--groen .gt-contactkaart .gt-klein { color: var(--gt-tekst-zacht); }
.gt-donker .gt-contactkaart a:not(.gt-knop):not(.wp-block-button__link),
.gt-band--groen .gt-contactkaart a:not(.gt-knop):not(.wp-block-button__link) { color: var(--gt-groen-diep); text-decoration: none; }
.gt-donker .gt-contactkaart a:not(.gt-knop):not(.wp-block-button__link):hover,
.gt-band--groen .gt-contactkaart a:not(.gt-knop):not(.wp-block-button__link):hover { color: var(--gt-groen-diep-hv); text-decoration: underline; text-decoration-color: var(--gt-rood); }
.gt-contactkaart a:focus-visible, .gt-donker .gt-contactkaart a:focus-visible { outline-color: var(--gt-groen-diep); }
.gt-contactkaart .gt-knop, .gt-contactkaart .wp-block-button__link { background: var(--gt-groen-diep); color: var(--gt-wit); margin-top: 8px; }
.gt-contactkaart .gt-knop:hover, .gt-contactkaart .wp-block-button__link:hover { background: var(--gt-groen-diep-hv); color: var(--gt-wit); }
@media (max-width: 640px) {
  .gt-contactkaart { padding: 22px; }
  .gt-cta-band .gt-knoppen .wp-block-button { flex: 1 1 100%; }
}

/* ----------------------------------------------------------------------------
   8. FOTORASTER EN LOSSE FOTO'S
   gt-fotogrid is een galerij-blok (3 kolommen, bijgesneden). Het kernblok
   regelt de kolommen en het terugvallen op telefoon; hier de hoeken (16px),
   de tussenruimte en een leesbaar bijschrift onderin de foto.
   ------------------------------------------------------------------------- */
.wp-block-gallery.gt-fotogrid {
  --wp--style--gallery-gap-default: 16px;
  gap: 16px;
  /* geen margin-top: in een band geeft .gt-band > :not(:first-child) de
     20px onder de kop (met "margin: 0" stond het raster tegen de h2) */
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}
.gt-fotogrid.has-nested-images figure.wp-block-image {
  margin: 0;
  border-radius: var(--gt-radius);
  overflow: hidden;
  background: var(--gt-zandwit);
}
.wp-block-gallery.gt-fotogrid.has-nested-images figure.wp-block-image img,
.wp-block-gallery.gt-fotogrid.has-nested-images.is-cropped figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--gt-radius);
}
.wp-block-gallery.gt-fotogrid.has-nested-images figure.wp-block-image figcaption {
  margin: 0;
  padding: 32px 14px 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--gt-wit);
  text-align: left;
  background: linear-gradient(0deg, rgba(23, 26, 21, 0.78) 0%, rgba(23, 26, 21, 0.55) 55%, rgba(23, 26, 21, 0) 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.wp-block-gallery.gt-fotogrid.has-nested-images figure.wp-block-image figcaption a { color: var(--gt-wit); }
@media (max-width: 600px) { .wp-block-gallery.gt-fotogrid { gap: 10px; } }

/* Losse foto in de tekst: afgerond (style.css), bijschrift klein links eronder */
.entry-content .wp-block-image:not(.gt-kaart__foto) { margin: 0 0 1.4em; }
.wp-block-image img { height: auto; }
.wp-block-image > figcaption, .wp-block-image .wp-element-caption { margin: 8px 0 0; text-align: left; font-size: 14px; color: var(--gt-tekst-zacht); }
.gt-donker .wp-block-image > figcaption { color: rgba(255, 255, 255, 0.85); }
.gt-foto { display: block; width: 100%; height: auto; border-radius: var(--gt-radius); }

/* ----------------------------------------------------------------------------
   9. FOOTER
   Zoals Grastotaal (gt-10): één diepgroen vlak, 90px lucht boven de drie
   gelijke kolommen. Links het woordmerk in wit met de bedrijfsgegevens,
   dan twee kolommen met een kop (Sora 600, 20px) met een dun rood
   accentlijntje eronder (3px, #C63527, over de hele kolombreedte).
   Tekst wit 16/28px. Daaronder de balk met de copyrightregel (13px) links
   en de sociale iconen rechts, in hetzelfde groen.
   Links in de adresblokken houden een lichte onderstreping (WCAG 1.4.1: ze
   zijn wit, net als de tekst eromheen); de navigatielijsten niet.
   ------------------------------------------------------------------------- */
/* De kolommen staan in de footer-landmark (footer.site-info, inc/footer.php);
   GeneratePress centreert de tekst daarin, de kolommen staan links. */
.site-info > .gt-footer { text-align: left; }
.gt-footer {
  background: var(--gt-groen-diep);
  color: var(--gt-wit);
  font-size: 16px;
  line-height: 1.75;
  /* Een groene offerteband en de footer zijn hetzelfde groen; bij een
     band die op een halve pixel eindigt tekent Chrome er een lichte naad
     tussen. Een schaduw van 1px in hetzelfde groen dekt die af. */
  box-shadow: 0 -1px 0 0 var(--gt-groen-diep);
}
.gt-footer__kolommen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  padding-top: 90px;
  padding-bottom: 48px;
}
.gt-footer__kolom { min-width: 0; }
.gt-footer__kop {
  font-family: var(--gt-font-kop);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--gt-wit);
  margin: 0 0 12px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--gt-rood);
}
/* Woordmerk in wit: zelfde hoogte als een kop met lijntje (53px) */
.gt-footer__logo { margin: 0 0 15px; line-height: 0; }
.gt-footer__logo a { display: inline-block; padding: 4px 0; line-height: 0; border-radius: var(--gt-radius-klein); }
.gt-footer__logo svg { display: block; width: 273px; max-width: 100%; height: auto; aspect-ratio: 1109 / 122; }
.gt-footer__adres, .gt-footer__regels {
  font-style: normal;
  margin: 0;
  max-width: none;
  color: var(--gt-wit);
}
.gt-footer__regels { margin-top: 28px; }
.gt-footer a {
  color: var(--gt-wit);
  text-decoration: none;
  transition: color var(--gt-overgang);
}
.gt-footer__adres a, .gt-footer__regels a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
}
.gt-footer a:hover, .gt-footer a:focus-visible {
  color: var(--gt-groen-opdonker);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}
.gt-footer__lijst { list-style: none; margin: 0; padding: 0; }
.gt-footer__lijst li { margin: 0; padding: 0; }
.gt-footer__lijst a { display: inline-block; padding: 2px 0; line-height: 24px; }
/* De footer is ook .gt-donker, die alle links onderstreept; in de
   navigatielijsten en bij het logo niet (zoals Grastotaal), wel bij hover */
.gt-footer :is(.gt-footer__lijst, .gt-footer__logo) a:not(.gt-knop):not(.wp-block-button__link) { text-decoration: none; }
.gt-footer :is(.gt-footer__lijst) a:not(.gt-knop):not(.wp-block-button__link):is(:hover, :focus-visible),
.gt-footer .gt-footer__lijst li.current-menu-item > a:not(.gt-knop) { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }

/* Onderste balk: copyrightregel van GeneratePress (.site-info, filter
   generate_copyright) en de iconen (generate_credits), beide uit inc/footer.php */
.site-footer { background: var(--gt-groen-diep); box-shadow: 0 -1px 0 0 var(--gt-groen-diep); }
.site-info {
  background: var(--gt-groen-diep);
  color: var(--gt-wit);
  font-size: 13px;
  line-height: 23px;
}
.site-info .inside-site-info {
  max-width: var(--gt-breedte);
  margin: 0 auto;
  padding: 4px var(--gt-zijmarge) 8px;
}
.site-info .copyright-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  width: 100%;
  text-align: left;
}
.site-info .copyright, .site-info .copyright a { color: var(--gt-wit); }
.site-info .copyright a { display: inline-block; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.45); }
.site-info .copyright a:hover, .site-info .copyright a:focus-visible { color: var(--gt-groen-opdonker); text-decoration-color: currentColor; }
.site-info .gt-scheiding { margin: 0 4px; color: rgba(255, 255, 255, 0.7); }
.gt-footer__iconen { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }
.gt-footer__iconen li { margin: 0; padding: 0; }
.gt-footer__icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  color: var(--gt-wit);
  transition: color var(--gt-overgang), background-color var(--gt-overgang);
}
.site-info .gt-footer__icoon { color: var(--gt-wit); }
.site-info .gt-footer__icoon:hover { color: var(--gt-groen-opdonker); background: rgba(255, 255, 255, 0.1); }
.gt-footer__icoon svg { display: block; width: 16px; height: 16px; }

@media (max-width: 980px) {
  .gt-footer__kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; padding-top: 64px; padding-bottom: 40px; }
  .gt-footer__kolom--bedrijf { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .gt-footer__kolommen { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 50px; padding-bottom: 32px; }
  .gt-footer__kolom--bedrijf { grid-column: auto; }
  .site-info .copyright-bar { flex-direction: column; justify-content: center; text-align: center; }
  .site-info .inside-site-info { padding-top: 8px; padding-bottom: 8px; }
  /* Copyrightregel: geen scheidingsstreep aan het eind van een regel; de
     delen lopen door met ruimte ertussen */
  .site-info .copyright { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 14px; }
  .site-info .gt-scheiding { display: none; }
  /* ruimte voor de vaste contactbalk onderin (style.css) */
  .site-footer { padding-bottom: 0; }
}

/* ----------------------------------------------------------------------------
   10. TOEGANKELIJKHEID EN BEWEGING
   Focusranden op donkere vlakken wit (style.css doet dat voor .gt-donker en
   .gt-band--groen; hier de rest), tikdoelen van minimaal 44px en geen
   hover-lift als de bezoeker minder beweging wil.
   ------------------------------------------------------------------------- */
.gt-footer a:focus-visible,
.site-info a:focus-visible,
.gt-hero a:focus-visible,
.gt-hero .wp-block-button__link:focus-visible,
.gt-kruimels a:focus-visible,
.gt-band--kop a:focus-visible,
.gt-donker summary:focus-visible,
.gt-cta-band .wp-block-button__link:focus-visible { outline: 3px solid var(--gt-wit); outline-offset: 2px; }
/* ...maar binnen een witte kaart of een wit vak op donker weer diepgroen */
.gt-donker .gt-kaart :is(a, button, summary):focus-visible,
.gt-contactkaart :is(a, button):focus-visible,
.gt-donker .gt-faq__item > summary:focus-visible { outline-color: var(--gt-groen-diep); }
/* Pilknoppen blijven bij toetsenbordfocus een pil (vanaf 0.3.5), zoals in Elementor
   (elementor.css): de algemene focusregel van style.css (a:focus-visible) zou de
   hoeken anders 8px maken. De focusring volgt de ronding. */
:is(.wp-block-button__link, .gt-knop, .button):focus-visible { border-radius: var(--gt-radius-knop); }

/* Tikdoelen: knoppen, summary en de kleine knop in de menubalk ≥ 44px */
.gt-knop, .wp-block-button__link, .button, button.wpcf7-submit, input[type="submit"] { min-height: 44px; }
.gt-knop--klein { display: inline-flex; align-items: center; min-height: 44px; }
.gt-faq__item > summary { min-height: 44px; }
.gt-badge a, .gt-footer__lijst a { min-height: 24px; }

/* Ankers niet onder een vaste balk; op telefoon ruimte boven de contactbalk */
section[id], .gt-band[id], .gt-faq__item[id] { scroll-margin-top: 24px; }
/* tot en met 1024px: zo ver loopt de contactbalk (header.css 5), anders kan
   een link met focus tussen 769 en 1024px achter de balk vallen (WCAG 2.4.11) */
@media (max-width: 1024px) { html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }

/* Links in lopende tekst ook zonder kleur herkenbaar (onderstreping) op
   donkere vlakken; op licht doet de hover-onderstreping van style.css het */
.gt-band--groen .wp-block-column > p a:not(.wp-block-button__link),
.gt-donker .wp-block-column > p a:not(.wp-block-button__link) { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .gt-kaart:hover,
  .gt-kaart--dienst:hover,
  .gt-knop:hover,
  .wp-block-button__link:hover,
  .gt-donker .gt-knop--2:hover,
  .gt-donker .wp-block-button.is-style-outline > .wp-block-button__link:hover { transform: none; }
  .gt-kaart--dienst:hover .gt-kaart__link a::after { left: 0; }
  .gt-kaart, .gt-kaart__link a::after, .gt-footer a, .gt-footer__icoon { transition: none; }
}

/* Hoog contrast (Windows): randen en tekens zichtbaar houden */
@media (forced-colors: active) {
  .gt-kaart, .gt-contactkaart, .gt-faq__item, .gt-badge { border: 1px solid CanvasText; }
  .gt-badge::before, .gt-vinkjes li::before, .gt-faq__item > summary::after { background-color: CanvasText; }
  .gt-stappen li::before { border: 1px solid CanvasText; }
  .gt-kruimels > span, .gt-kruimels > p { border: 1px solid CanvasText; }
  .gt-footer__kop { border-bottom-color: CanvasText; }
}

/* ----------------------------------------------------------------------------
   11. BLOKEDITOR
   Dezelfde regels gelden in de editor (functions.php laadt dit bestand via
   add_editor_style; WordPress zet er .editor-styles-wrapper voor). Wat de
   editor anders doet: de inhoudskolom is 820px (contentSize) en er is geen
   .entry-content. De band krijgt daarom in de editor de volle canvasbreedte
   en breekt niet uit (anders valt hij links buiten beeld).
   ------------------------------------------------------------------------- */
.editor-styles-wrapper .is-root-container > .gt-band,
.editor-styles-wrapper .is-root-container > .gt-hero,
.editor-styles-wrapper .gt-band.wp-block,
.editor-styles-wrapper .gt-hero.wp-block { max-width: none; width: 100%; }
.editor-styles-wrapper .gt-band, .editor-styles-wrapper .gt-hero {
  margin-left: 0;
  margin-right: 0;
  width: auto;
  overflow: visible;
}
.editor-styles-wrapper .gt-band + .gt-band,
.editor-styles-wrapper .gt-hero + .gt-band { margin-top: 0; }
/* In de editor is de canvasbreedte kleiner dan de site; het raster van de
   band houdt de 24px zijmarge, zodat niets buiten beeld valt. */
.editor-styles-wrapper .gt-band { grid-template-columns: minmax(var(--gt-zijmarge), 1fr) minmax(0, var(--gt-inhoud)) minmax(var(--gt-zijmarge), 1fr); }
/* De toevoegknop (appender) en de blok-lijst in een band horen in de kolom */
.editor-styles-wrapper .gt-band > .block-list-appender { grid-column: 2; }
/* Kaart als kolom: de editor zet een eigen minimale hoogte op kolommen */
.editor-styles-wrapper .gt-kaart--dienst { min-height: 0; }
/* Het details-blok: de summary is in de editor een tekstveld; zelfde opmaak */
.editor-styles-wrapper .gt-faq__item > summary > * { font: inherit; color: inherit; }
/* Tekstkleur op donkere banden ook in de editor (de editor zet eigen kleur op p) */
.editor-styles-wrapper .gt-donker :is(p, li, h1, h2, h3, h4), .editor-styles-wrapper .gt-band--groen :is(p, li, h1, h2, h3, h4) { color: var(--gt-wit); }
.editor-styles-wrapper .gt-donker .gt-kaart :is(p, h2, h3, h4) { color: var(--gt-tekst); }
.editor-styles-wrapper .gt-donker .gt-contactkaart :is(p, h3) { color: var(--gt-tekst); }
/* Geen 100vw-truc en geen clip in het editor-canvas */
.editor-styles-wrapper { overflow-x: visible; }

/* ----------------------------------------------------------------------------
   12. OVERIGE BOUWSTENEN
   ------------------------------------------------------------------------- */
/* Linklijst (dienstgroepen op de homepage, wagenpark, werkgebied), zoals
   Grastotaal: geen lijnen, pijl ervoor in grasgroen (4,16:1), link 500 in
   de tekstkleur, bij hover diepgroen. Elke regel minstens 24px hoog. */
.gt-linklijst { list-style: none; margin: 16px 0 0; padding: 0; }
.gt-kaart > .gt-linklijst { margin-top: 14px; }
.gt-linklijst li { margin: 0 0 6px; padding: 0; break-inside: avoid; max-width: none; }
.gt-linklijst li:last-child { margin-bottom: 0; }
.gt-linklijst a { display: inline-block; padding: 2px 0; color: var(--gt-tekst); font-weight: 500; text-decoration: none; }
.gt-linklijst a::before { content: '\2192\00a0'; content: '\2192\00a0' / ''; color: var(--gt-groen); font-weight: 700; }
.gt-band--zand .gt-linklijst a::before { color: var(--gt-groen-diep); }
.gt-linklijst a:hover { color: var(--gt-groen-diep); text-decoration: underline; text-decoration-color: var(--gt-rood); text-underline-offset: 3px; }
.gt-donker .gt-linklijst a { color: var(--gt-wit); }
.gt-donker .gt-linklijst a::before { color: var(--gt-groen-opdonker); }
.gt-donker .gt-kaart .gt-linklijst a { color: var(--gt-tekst); }
.gt-donker .gt-kaart .gt-linklijst a::before { color: var(--gt-groen); }

.wpcf7-form .gt-fotos label { display: block; margin-top: 10px; font-weight: 600; }
/* Lange lijsten (plaatsen, streken) in kolommen */
.gt-kolommen { columns: 3 220px; column-gap: 32px; }
.gt-kolommen li { break-inside: avoid; }

/* YouTube-video na een klik (inc/video.php); even breed als de veelgestelde vragen */
.lvk-video { max-width: 820px; }
.lvk-video__vlak { position: relative; aspect-ratio: 16 / 9; background: var(--gt-tekst); border-radius: var(--gt-radius); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; color: var(--gt-wit); }
.lvk-video__vlak iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lvk-video__knop { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px; border: 0; border-radius: var(--gt-radius-knop); background: var(--gt-wit); color: var(--gt-groen-diep); font: 600 16px/1.3 var(--gt-font-body); cursor: pointer; }
.lvk-video__knop:hover { background: var(--gt-groen-opdonker); color: var(--gt-tekst); }
.lvk-video__knop:focus-visible { outline: 3px solid var(--gt-wit); outline-offset: 3px; border-radius: var(--gt-radius-knop); }   /* pil blijft pil bij focus (0.3.5) */
/* Smal scherm of grotere tekstafstand (WCAG 1.4.10 en 1.4.12): het vlak groeit
   mee met de knop en de melding in plaats van ze af te knippen. Zodra de video
   speelt (iframe), blijft het vlak 16:9. */
.lvk-video__vlak:not(:has(iframe)) { overflow: visible; }
.lvk-video__vlak > * { flex-shrink: 0; }
@media (max-width: 640px) {
  .lvk-video__knop { border-radius: var(--gt-radius-klein); text-align: left; }
  .lvk-video__knop:focus-visible { border-radius: var(--gt-radius-klein); }
}
.lvk-video__icoon { font-size: 18px; }
.lvk-video__melding { margin: 0; max-width: 52ch; font-size: 14px; color: rgba(255,255,255,.88); }
.lvk-video__melding a { color: var(--gt-wit); text-decoration: underline; }

/* ----------------------------------------------------------------------------
   13. 404-PAGINA EN ZOEKRESULTATEN (vanaf 0.3.4, inc/zoeken-en-404.php)
   Kopband zonder foto, kaarten met de diensten uit het hoofdmenu, een zoekveld
   (veld 8px afgerond en 52px hoog zoals de formulieren, pilknop ernaast) en
   de gevonden pagina's als kaarten met titel en samenvatting.
   ------------------------------------------------------------------------- */
.gt-menukaarten .gt-kaart h3 { margin: 0; }
.gt-menukaarten .gt-linklijst a { padding: 3px 0; }
.gt-zoek { max-width: 640px; }
.gt-zoek__label { display: block; margin: 0 0 8px; font-family: var(--gt-font-kop); font-size: 20px; font-weight: 600; color: var(--gt-tekst); }
.gt-zoek__rij { display: flex; flex-wrap: wrap; gap: 12px; }
.gt-zoek__veld {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 12px 14px;
  font-family: var(--gt-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--gt-tekst);
  background: var(--gt-wit);
  border: 1px solid var(--gt-lijn-veld);
  border-radius: var(--gt-radius-klein);
}
.gt-zoek__veld:hover { border-color: var(--gt-tekst-zacht); }
.gt-zoek__veld:focus { border-color: var(--gt-groen-diep); box-shadow: 0 0 0 1px var(--gt-groen-diep); outline: 3px solid var(--gt-groen-diep); outline-offset: 2px; }
.gt-zoek__veld::placeholder { color: var(--gt-tekst-zacht); opacity: 1; }
.gt-zoek__knop { flex: 0 0 auto; min-height: 52px; border: 0; cursor: pointer; }
.gt-zoekresultaat h2 { margin: 0; font-size: clamp(19px, 2.2vw, 22px); font-weight: 600; line-height: 1.3; }
.gt-zoekresultaat h2 a { color: var(--gt-groen-diep); text-decoration: none; }
.gt-zoekresultaat h2 a:hover { text-decoration: underline; text-decoration-color: var(--gt-rood); text-underline-offset: 3px; }
.gt-zoekresultaat p { font-size: 15px; color: var(--gt-tekst-zacht); }
/* Paginering: dezelfde pillen als de knoppen, klein */
.gt-paginering { margin-top: 34px; }
.gt-paginering .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gt-paginering .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: var(--gt-radius-knop); border: 2px solid var(--gt-groen-diep); color: var(--gt-groen-diep); font-weight: 600; text-decoration: none; }
.gt-paginering .page-numbers.current { background: var(--gt-groen-diep); color: var(--gt-wit); }
.gt-paginering .page-numbers.dots { border-color: transparent; min-width: 0; padding: 0 4px; }
.gt-paginering a.page-numbers:hover { background: var(--gt-groen-diep); color: var(--gt-wit); }
@media (max-width: 640px) {
  .gt-zoek__knop { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================================
   EINDE componenten.css
   ========================================================================= */