/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* =============================================================================
   LINKS ZONDER STREEP
   Hello (vanaf 3.5) zet in reset.css `a { text-decoration: underline }` op elke
   link, dus ook op titels, kaarten, knoppen en menu's. Hier één keer voor de hele
   site uit (Tim, 25 sep 2026). Alleen een link midden in een lopende tekst houdt
   een dun streepje, anders is hij daar niet als link te herkennen (WCAG).
   ============================================================================= */

a,
a:visited,
.page-content a,
.comments-area a {
  text-decoration: none;
}

/* =============================================================================
   DOORSCROLLEN NAAR EEN BLOK VERDERLENS OP DE PAGINA
   "Bekijk het proces" op /over/ en "Lees verder over duurzaamheid" op
   /duurzaamheid/. Het doel landt net onder de vaste balk van 70px.
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

#proces,
[id^="duurzaam-"] {
  scroll-margin-top: 70px;
}

.admin-bar #proces,
.admin-bar [id^="duurzaam-"] {
  scroll-margin-top: 102px;
}

.wood-naar {
  margin-top: 28px;
}

.wood-naar a,
.wood-naar a:visited {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: #004339;
}

/* Op een donkere achtergrond, zoals het groene duurzaamheidsblok */
.wood-naar--licht a,
.wood-naar--licht a:visited {
  color: #FFFFFF;
}

.wood-naar svg {
  color: #D9B976;
  transition: transform 0.35s ease;
}

.wood-naar a:hover svg {
  transform: translateY(4px);
}

/* Alleen in lopende tekst: alinea's, en lijstjes binnen een tekstblok (niet het menu). */
p:not(.wood-naar) a:not(.wood-knop):not(.elementor-button),
.elementor-widget-text-editor li a,
.wood-seo__tekst li a,
.wood-verhaal__body li a,
.wood-dienst__body li a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* =============================================================================
   TYPOGRAFIE / KOPPEN
   ============================================================================= */

/* Koppen binnen item-tekst blokken */
.item-tekst h1, .item-tekst h2, .item-tekst h3,
.item-tekst h4, .item-tekst h5, .item-tekst h6 {
  color:KLEUR
}
.item-tekst h1 { font-size: 24px; }
.item-tekst h2 { font-size: 21px; }
.item-tekst h3 { font-size: 18px; }
.item-tekst h4 { font-size: 16px; }
.item-tekst h5 { font-size: 14px; }
.item-tekst h6 { font-size: 12px; }
.item-tekst h2:first-of-type { color: KLEUR }

.wood-quote-mark {
  color: #D9B976;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 2em;
  vertical-align: -0.15em;
  line-height: 0;
  margin-right: 0.09em;
	
}

/* =============================================================================
   LIJSTEN
   ============================================================================= */

body ul {
  margin-bottom: 20px;
}

/* Custom lijst met checkmarks */
.custom-list ul {
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0;
}
.custom-list li {
  position: relative;
  margin: 0 0 1px 0;
  padding-left: 28px;
  font-size: 16px;
}
.custom-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background-color: #D9B976;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5C4.5 12.8 6.5 15 9 18.5C12 14 16 8 21 3.5' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%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 d='M3.5 12.5C4.5 12.8 6.5 15 9 18.5C12 14 16 8 21 3.5' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.3s;
}

/* PDF-lijst */
.pdf_list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pdf_list li {
  position: relative;
  margin: 0 0 10px 0;
  padding-left: 28px;
  font-size: 16px;
}
.pdf_list li::before {
  content: "\f1c1"; /* Font Awesome: PDF-icoon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 16px;
  color: #86CCA7;
}


/* =============================================================================
   CATEGORY PILLS
   ============================================================================= */

.td-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.td-pill {
  padding: 6px 6px;
  border-radius: 999px;
  background: #e9f7ef;
  color: #6bbf8f;
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
}
.gemeente-pills .td-pill {
  background: #e3e9ef;
}

/* =============================================================================
   FACETWP FILTERS
   ============================================================================= */

.facetwp-facet {
  margin-bottom: 20px !important;
}

/* Facet rij 2 */
.facet-row2 .facetwp-facet select,
.facet-row2 .facetwp-facet input[type="text"],
.facet-row2 .facetwp-facet input[type="search"],
.facet-row2 .facetwp-facet input[type="date"],
.facet-row2 .facetwp-facet .facetwp-date input {
  box-sizing: border-box;
  width: 275px;
  height: 40px;
  padding: 0 14px;
  font-size: 16px;
  border: 3px solid #86cca7;
  border-radius: 8px;
  background: #fcfcfc;
}

/* Facet rij 3 */
.facet-row3 .facetwp-facet select,
.facet-row3 .facetwp-facet input[type="text"],
.facet-row3 .facetwp-facet input[type="search"],
.facet-row3 .facetwp-facet input[type="date"],
.facet-row3 .facetwp-facet .facetwp-date input {
  box-sizing: border-box;
  width: 240px;
  height: 40px;
  padding: 0 14px;
  font-size: 16px;
  border: 3px solid #86CCA7;
  border-radius: 8px;
  background: #fcfcfc;
  margin-bottom: 0;
}
.facet-row3 .facetwp-facet {
  margin-bottom: 5px;
}


/* =============================================================================
   OVERIGE / DIVERSEN
   ============================================================================= */

/* SVG-afbeeldingen volledige breedte */
.elementor-widget-image a img[src$=".svg"] {
  width: 100% !important;
}

/* Lege icon-list items verbergen */
.elementor-icon-list-item:has(.elementor-icon-list-text:empty) {
  display: none !important;
}

/* Anchor scroll-ruimte voor sticky header */
html, body {
  scroll-padding-top: 140px;
}

/* Specifieke paginafix excerpt */
.page-id-288 .elementor-widget-theme-post-excerpt {
  margin-bottom: 10px !important;
}


/* =============================================================================
   ARTIKELEN (blog, 3 okt 2026)
   Shortcodes in inc/wood-diensten.php: [wood_artikel_kop] [wood_artikel_tekst]
   [wood_artikelen]. De tekst gebruikt de leeskolom van .wood-seo, de kaarten
   die van de projecten.
   ============================================================================= */

/* Kop in dezelfde kolom als de tekst eronder (684px), foto iets breder. */
.wood-artikel-kop .wood-binnen {
  max-width: 900px;
}
.wood-artikel-kop .wood-project-intro__aanhef,
.wood-artikel-kop .wood-project-intro__titel {
  max-width: 684px;
  margin-left: auto;
  margin-right: auto;
}
.wood-artikel-kop__beeld {
  margin-top: 32px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #EDE6DB;
}
.wood-artikel-kop__beeld img {
  display: block;
  width: 100%;
  height: 100% !important;
  max-height: none !important; /* Hello: .post .wp-post-image max 500px */
  object-fit: cover;
}
.wood-artikel.wood-seo .wood-binnen {
  padding-top: 48px;
}

/* Foto's in de tekst: naast elkaar, zoals de galerijen in de SEO-teksten. */
.wood-artikel-fotos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0 24px;
}
.wood-artikel-fotos--1 {
  grid-template-columns: minmax(0, 1fr);
}
.wood-artikel-fotos--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wood-artikel-foto {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.wood-artikel-foto img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
@media (max-width: 600px) {
  .wood-artikel-fotos,
  .wood-artikel-fotos--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Tabellen uit de oude artikelen */
.wood-artikel .wood-seo__tekst table {
  width: 100%;
  margin: 0 0 20px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 22px;
  font-weight: 300;
}
.wood-artikel .wood-seo__tekst th,
.wood-artikel .wood-seo__tekst td {
  padding: 8px 10px;
  border-bottom: 1px solid #EDE6DB;
  text-align: left;
  vertical-align: top;
}

/* =============================================================================
   TOEGANKELIJKHEID (WCAG)
   ============================================================================= */

/* Alle knoppen 14px, zoals de knop in de balk (Tim, 2 okt). De kit geeft
   Elementor-knoppen 15px via een globale letterstijl die ook elders kan zitten. */
.elementor-widget-button a.elementor-button {
  font-size: 14px;
}

/* Twee tinten: de groene lijn valt op een lichte achtergrond op, het gouden
   randje op een donkere. Geen achtergrondkleur, die maakte groene knoppen wit. */
:focus-visible {
  outline: 2px solid #004339;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #D9B976;
  border-radius: 3px;
}

/* =============================================================================
   DUURZAAMHEID
   Shortcodes: [wood_duurzaam_blok] [wood_duurzaam_secties] [wood_proces]
   PHP staat in inc/wood-duurzaamheid.php
   ============================================================================= */

.wood-duurzaam-blok,
.wood-duurzaam-secties,
.wood-proces {
  --wood-groen: #004339;
  --wood-bosgroen: #004339;
  --wood-inkt: #35332E;  /* tekstkleur van de site */
  --wood-goud: #D9B976;
  --wood-creme: #FAF7F1;
}

/* --- Compact groen blok, voor homepage en collectiepagina's --------------- */

.wood-duurzaam-blok {
  background: var(--wood-groen);
  color: var(--wood-creme);
  border-radius: 14px;
  padding: 54px clamp(24px, 5vw, 64px);
}

.wood-duurzaam-blok-titel {
  color: var(--wood-creme);
  margin: 0 0 36px;
  text-align: center;
}

.wood-duurzaam-blok-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 46px);
}

.wood-duurzaam-blok-icoon {
  display: block;
  color: var(--wood-goud);
  margin-bottom: 14px;
}

.wood-duurzaam-blok-icoon svg {
  width: 44px;
  height: 44px;
  display: block;
}

.wood-duurzaam-blok-kop {
  color: var(--wood-goud);
  font-size: 18px;
  margin: 0 0 8px;
}

.wood-duurzaam-blok-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(250, 247, 241, 0.88);
}

.wood-duurzaam-blok-link {
  margin: 36px 0 0;
  text-align: center;
}

.wood-duurzaam-blok-link a {
  color: var(--wood-goud);
  text-decoration: none;
  font-size: 16px;
  border-bottom: 1px solid rgba(217, 185, 118, 0.45);
  padding-bottom: 3px;
  transition: border-color .3s, color .3s;
}

.wood-duurzaam-blok-link a:hover,
.wood-duurzaam-blok-link a:focus {
  color: var(--wood-creme);
  border-bottom-color: var(--wood-creme);
}

@media (max-width: 1024px) {
  .wood-duurzaam-blok-items { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .wood-duurzaam-blok { padding: 40px 24px; }
  .wood-duurzaam-blok-items { grid-template-columns: 1fr; }
}

/* --- De vier materialen: icoon, titel, tekst en twee foto's ---------------
   Shortcode [wood_duurzaam_secties]. Hoort in één container op volle breedte
   zonder binnenruimte; de shortcode regelt zelf achtergrond en leesbreedte.
   ------------------------------------------------------------------------- */

.wood-duurzaam-secties {
  background: var(--wood-creme);
  /*
   * Alleen ruimte aan de zijkant. De verticale ruimte zit per blok in de
   * binnen-padding, precies zoals Tim het in Elementor heeft afgesteld.
   */
  padding: 0 32px;
  overflow: hidden;
  /*
   * Zo breed als de Elementor-container waar het in stond: hoogstens 1140, en
   * op een smal scherm 10px van de rand, en 10px boven en onder (de
   * standaardrand van die container; 4 okt 2026, zonder Elementor).
   */
  width: min(1140px, calc(100% - 20px));
  margin: 10px auto;
}

.wood-duurzaam-binnen {
  /*
   * Zelfde stramien als de verhaalblokken op de collectiepagina: inhoud in
   * 1140px, tekstkolom 660 en beeldkolom 440, 40px ertussen.
   */
  max-width: 1140px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 660fr) minmax(0, 440fr);
  gap: 40px;
  align-items: center;
}

/*
 * Even blokken: beeld links, tekst rechts. De kolommen draaien mee, anders
 * wordt de tekst de smalle kolom van 440 en houd je een te smalle tekst met
 * veel wit over.
 */
.wood-duurzaam-sectie--omgekeerd .wood-duurzaam-tekst { order: 2; }
.wood-duurzaam-sectie--omgekeerd .wood-duurzaam-beeld { order: 1; }

.wood-duurzaam-sectie--omgekeerd .wood-duurzaam-binnen {
  grid-template-columns: minmax(0, 440fr) minmax(0, 660fr);
}

/* De tekst ligt altijd boven het beeld, ook als een foto er dichtbij komt */
/*
 * Dezelfde kolom als in zijn blok: onderdelen onder elkaar met 20px ertussen.
 * De tekst ligt boven het beeld, ook als een foto er dichtbij komt.
 */
.wood-duurzaam-tekst {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wood-duurzaam-icoon,
.wood-duurzaam-tekst h2,
.wood-duurzaam-tekst p {
  margin-top: 0;
}

/*
 * Donkergroen, niet goud (Tim, 11 sep). De ruimte eronder komt uit de kolom,
 * een eigen marge zou daar bovenop komen.
 */
.wood-duurzaam-icoon {
  display: block;
  color: var(--wood-bosgroen);
  margin: 0;
  line-height: 0;
}

.wood-duurzaam-icoon svg {
  width: 32px;
  height: 32px;
  display: block;
}

.wood-duurzaam-tekst h2 {
  /*
   * Zelfde kop als op de collectiepagina: 18px, hoofdletters, 0,1em ruimte.
   * De fontnaam staat er voluit: de variabele --wood-serif is hier niet
   * gedefinieerd, dus die viel terug op de standaardletter.
   */
  /* Zelfde tekstkleur als de rest van de site, niet groen (Tim, 11 sep). */
  color: var(--wood-inkt);
  /*
   * Geen eigen marge: de kolom zet er al 20px tussen. Met allebei werd de
   * ruimte onder de kop 36px en dat oogde te los.
   */
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/*
 * Geen max-width op de alinea. Die stond op 56ch, oftewel 522px in een kolom van
 * 660, en dan blijft er 188px leeg tot de foto in plaats van 50px. Regelafstand
 * 24px, gelijk aan de rest van de site.
 */
.wood-duurzaam-tekst p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  max-width: none;
}

/* Beeld: een grote foto met een tweede die er half overheen valt */

.wood-duurzaam-beeld {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
}

.wood-duurzaam-foto {
  margin: 0;
  /* Recht en zonder schaduw, net als op de collectiepagina. */
  border-radius: 0;
  overflow: hidden;
}

.wood-duurzaam-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Dezelfde fotostapel als op de collectiepagina: een vierkant van 400px links in
 * de kolom, met daaronder een van 250px die 101px omhoog schuift en 45px van de
 * rechterkant blijft.
 */
.wood-duurzaam-foto--1 {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  margin: 0;
}

/*
 * De marge staat met !important, en dat is hier nodig. Elementor heeft
 * `.elementor .elementor-widget:not(...):not(...) figure { margin: 0 }`, en die
 * selector weegt zwaarder dan elke redelijke eigen selector. Zonder dit valt
 * zowel de overlap als de uitlijning naar rechts weg. Op de collectiepagina
 * speelt het niet, want daar staat de foto als losse img zonder figure eromheen.
 */
.wood-duurzaam-foto--2 {
  position: static;
  width: 62.5%;
  max-width: 250px;
  aspect-ratio: 1;
  margin: -101px 45px 0 auto !important;
}

/*
 * De verticale afstanden zijn per blok nagemeten op de secties die Tim zelf in
 * Elementor bouwde, onderaan /duurzaamheid/. Ze verschillen bewust per blok: zo
 * grijpen de foto's en de teksten in elkaar zonder dat het ergens knelt.
 *
 *   blok 1  96px ruimte boven, tekstkolom 100px omhoog
 *   blok 2  geen ruimte, beeldkolom 86px omhoog
 *   blok 3  64px ruimte onder
 *   blok 4  96px ruimte onder, beeldkolom 44px omhoog
 */
.wood-duurzaam-sectie + .wood-duurzaam-sectie {
  margin-top: 0;
}

.wood-duurzaam-sectie:nth-child(1) .wood-duurzaam-binnen { padding-top: 96px; }
.wood-duurzaam-sectie:nth-child(1) .wood-duurzaam-tekst { margin-top: -100px; }

/*
 * De beeldkolom omhoog trekken is wat de blokken compact maakt: het blok wordt
 * net zoveel korter, dus alles eronder schuift mee omhoog en de teksten komen
 * dichter bij elkaar. De foto's staan om en om links en rechts, dus ze kunnen
 * elkaar rustig passeren.
 */
.wood-duurzaam-sectie:nth-child(2) .wood-duurzaam-beeld { margin-top: -145px; }

.wood-duurzaam-sectie:nth-child(3) .wood-duurzaam-binnen { padding-bottom: 64px; }
.wood-duurzaam-sectie:nth-child(3) .wood-duurzaam-beeld { margin-top: -40px; }

.wood-duurzaam-sectie:nth-child(4) .wood-duurzaam-binnen { padding-bottom: 96px; }

/* Een blok met 'html' in plaats van 'tekst' (lijstje, tussenkoppen); even gebruikt voor een vijfde blok op 3 okt */
.wood-duurzaam-html p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 24px;
}
.wood-duurzaam-html ul {
  margin: 0 0 20px;
  padding-left: 18px;
}
.wood-duurzaam-html li {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 4px;
}
.wood-duurzaam-html li::marker { color: #D9B976; }
.wood-duurzaam-html h3 {
  margin: 8px 0 8px;
  color: var(--wood-inkt);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wood-duurzaam-html > :last-child { margin-bottom: 0; }
.wood-duurzaam-sectie:nth-child(4) .wood-duurzaam-beeld { margin-top: -60px; }

/* Vanaf het tweede blok schuift alleen het beeld omhoog, zodat de blokken in
   elkaar overlopen. De tekst blijft staan waar hij staat.

   Vaste pixels, geen vw: de inhoud zit vast op 1240px, dus een overlap die met
   het venster meegroeit schoof op brede schermen over de tekst heen. */
/* De overlap staat nu per blok hierboven, niet meer als één regel voor alles. */

/* Tussen 980 en 1280 is de kolom smaller, dus is de tekst hoger en past er
   minder overlap. */
@media (max-width: 1280px) {
  .wood-duurzaam-secties--overlap .wood-duurzaam-sectie + .wood-duurzaam-sectie .wood-duurzaam-beeld {
    margin-top: -70px;
  }
}

/*
 * Opbouw vanaf 981px (Tim, 2 okt). Elke tekst staat verticaal gecentreerd
 * naast de grote vierkante foto, niet tegen de hele fotostapel; anders zakte
 * de tekst naar de onderkant. --wood-bm is per blok hoeveel het beeld omhoog
 * (negatief) of omlaag schuift; de tekst schuift even ver mee, krijgt de hoogte
 * van de foto en zet zichzelf daarin in het midden.
 *
 *   hout    0      bovenste blok
 *   fineer  -70    (tot 1200px -55), anders raakt de tekst de kleine bosfoto
 *   kurk    +40    omlaag, anders viel zijn foto over het eind van de fineertekst
 *   pvc     -120   (tot 1200px -95), zo hoog als kan zonder de kurkfoto te raken
 *
 * De selectors wegen bewust vier klassen, zodat ze ook de oudere regels
 * hierboven (per blok en tot 1280px) overschrijven.
 */
@media (min-width: 981px) {
  .wood-duurzaam-secties--overlap .wood-duurzaam-sectie { --wood-bm: 0px; --wood-foto: 394px; }
  .wood-duurzaam-secties--overlap .wood-duurzaam-sectie:nth-child(2) { --wood-bm: -70px; }
  .wood-duurzaam-secties--overlap .wood-duurzaam-sectie:nth-child(3) { --wood-bm: 40px; }
  .wood-duurzaam-secties--overlap .wood-duurzaam-sectie:nth-child(4) { --wood-bm: -120px; }

  .wood-duurzaam-secties--overlap .wood-duurzaam-binnen { align-items: start; }

  .wood-duurzaam-secties--overlap .wood-duurzaam-sectie .wood-duurzaam-binnen > .wood-duurzaam-beeld {
    margin-top: var(--wood-bm);
  }

  /* 10px is de binnenruimte van de beeldkolom boven de foto */
  .wood-duurzaam-secties--overlap .wood-duurzaam-sectie .wood-duurzaam-binnen > .wood-duurzaam-tekst {
    margin-top: calc(var(--wood-bm) + 10px);
    min-height: var(--wood-foto);
    justify-content: center;
  }
}

/* Smallere kolom: de foto is hier geen 400 maar zo'n 370px */
@media (min-width: 981px) and (max-width: 1200px) {
  .wood-duurzaam-secties--overlap .wood-duurzaam-sectie { --wood-foto: 370px; }
  .wood-duurzaam-secties--overlap .wood-duurzaam-sectie:nth-child(2) { --wood-bm: -55px; }
  .wood-duurzaam-secties--overlap .wood-duurzaam-sectie:nth-child(4) { --wood-bm: -95px; }
}

@media (max-width: 980px) {
  /* Ook de omgedraaide blokken: die regel weegt zwaarder en hield op de
     telefoon twee kolommen vast (fineer en pvc, gezien 2 okt). */
  .wood-duurzaam-binnen,
  .wood-duurzaam-sectie--omgekeerd .wood-duurzaam-binnen {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .wood-duurzaam-tekst p { max-width: none; }
  .wood-duurzaam-sectie--omgekeerd .wood-duurzaam-tekst,
  .wood-duurzaam-sectie--omgekeerd .wood-duurzaam-beeld { order: 0; }

  .wood-duurzaam-secties--overlap .wood-duurzaam-sectie + .wood-duurzaam-sectie .wood-duurzaam-beeld {
    margin-top: 0;
  }

  .wood-duurzaam-sectie + .wood-duurzaam-sectie { margin-top: 54px; }

  .wood-duurzaam-foto--1 { width: 88%; aspect-ratio: 4 / 3; }
  .wood-duurzaam-foto--2 { width: 46%; }
  .wood-duurzaam-beeld { padding-bottom: 46px; }
}

/*
 * Op de telefoon (Tim, 5 okt 2026): de tekst gelijk met de rest van de pagina
 * (26px van de rand, net als de andere blokken), 56px ruimte boven het eerste
 * blok, en tussen de foto's en de volgende tekst 24px in plaats van 100.
 */
@media (max-width: 767px) {
  .wood-duurzaam-secties { width: 100%; margin: 0; padding: 56px 26px; }
  .wood-duurzaam-sectie .wood-duurzaam-binnen,
  .wood-duurzaam-sectie:nth-child(n) .wood-duurzaam-binnen { padding: 0; gap: 24px; }
  .wood-duurzaam-sectie:nth-child(n) .wood-duurzaam-tekst,
  .wood-duurzaam-sectie:nth-child(n) .wood-duurzaam-beeld { margin-top: 0; }
  .wood-duurzaam-beeld { padding-bottom: 0; }
  .wood-duurzaam-sectie + .wood-duurzaam-sectie { margin-top: 24px; }
}

@media (max-width: 600px) {
  .wood-duurzaam-icoon svg { width: 38px; height: 38px; }
  .wood-duurzaam-foto--1 { width: 92%; }
  .wood-duurzaam-foto--2 { width: 50%; }
}

/* Opkomen bij het scrollen, gelijk aan de verhaalblokken op de collectiepagina
   (.wood-op in wood-collectie.css). Het script zet .wood-duurzaam-op alleen op
   blokken die bij het laden nog onder de vouw staan, dus er flitst niets. */
.wood-duurzaam-sectie.wood-duurzaam-op {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.wood-duurzaam-sectie.wood-duurzaam-op.is-zichtbaar {
  opacity: 1;
  transform: none;
}

/* --- Het proces: blokken onder elkaar ------------------------------------
   Shortcode [wood_proces]. Elk blok heeft dezelfde opbouw: opschrift, kop,
   korte tekst, de gouden lijn die volloopt en twee foto's die omhoog komen.
   De beginstand van de animaties staat onder .wood-js, zodat er zonder
   JavaScript niets verborgen blijft.
   ------------------------------------------------------------------------- */

.wood-proces {
  --wood-tekst: #35332E;
}

.wood-proces-blok {
  text-align: center;
  padding-bottom: 110px;
}

.wood-proces-blok:last-child { padding-bottom: 0; }

/* Blok zonder foto's eindigt op de lijn, die heeft zelf al ruimte eronder */
.wood-proces-blok--kaal { padding-bottom: 30px; }

.wood-proces-label {
  font-family: "Inter Tight", "Inter", Helvetica, Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--wood-bosgroen);
  margin: 0 0 18px;
}

.wood-proces-titel {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
  line-height: 1.3em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wood-tekst);
  margin: 0 0 22px;
}

.wood-proces-tekst {
  max-width: 660px;
  margin: 0 auto;
  line-height: 1.75;
  color: var(--wood-tekst);
}

/* De gouden lijn tussen de tekst en de foto's */

.wood-proces .wood-proces-lijn {
  /* wint van de !important-marges van .wood-scroll-lijn, die voor
     Elementor-kolommen bedoeld zijn */
  margin: 56px auto !important;
}

/* Twee foto's naast elkaar, de ene hoger dan de andere */

.wood-proces-beeld {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: var(--wood-beeld-breedte, 60%);
  margin: 0 auto;
}

.wood-proces-beeld figure {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  line-height: 0;
}

.wood-proces-beeld img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center center;
}

.wood-proces-beeld figure:nth-child(even) img { height: 250px; }

/* Om en om, zodat de hoge foto niet elke keer links staat */
.wood-proces-beeld--omgekeerd figure:nth-child(odd) img { height: 250px; }
.wood-proces-beeld--omgekeerd figure:nth-child(even) img { height: 300px; }

.wood-js .wood-proces-beeld figure {
  opacity: 0;
  transform: translateY(28px) scale(.98);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
}

.wood-js .wood-proces-beeld figure:nth-child(2) { transition-delay: .18s; }

.wood-js .wood-proces-beeld.wood-beeld-actief figure {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .wood-proces-beeld { width: 100%; }
  .wood-proces-blok { padding-bottom: 84px; }
}

@media (max-width: 600px) {
  .wood-proces .wood-proces-lijn { margin: 40px auto !important; }
  .wood-proces-titel { font-size: 20px; }
  .wood-proces-beeld img { height: 200px; }
  .wood-proces-beeld figure:nth-child(even) img { height: 170px; }
  .wood-proces-beeld--omgekeerd figure:nth-child(odd) img { height: 170px; }
  .wood-proces-beeld--omgekeerd figure:nth-child(even) img { height: 200px; }
  .wood-proces-blok { padding-bottom: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .wood-js .wood-proces-beeld figure {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Het proces: horizontaal ---------------------------------------------
   Shortcode [wood_proces_horizontaal]. Het podium blijft staan terwijl je
   scrolt, de rij schuift naar links (wood-scroll-lijn.js). De sectie hoort in
   een Elementor-container op volle breedte zonder binnenruimte; de kolom van
   1140px regelt de shortcode zelf. Koppen staan op twee klassen, omdat de kit
   van deze site h2/h3 anders overschrijft (line-height: 1.3px op h3).
   ------------------------------------------------------------------------- */

.wood-ph {
  --ph-balk: calc(70px + var(--wp-admin--admin-bar--height, 0px));
  --ph-kantlijn: max(24px, calc((100% - 1140px) / 2));
  --ph-goud: #D9B976;
  --ph-groen: #004339;
  position: relative;
  width: 100%;
  padding-bottom: 96px;
  background: #fff;
  color: #35332E;
}

.wood-ph .wood-ph__kop { max-width: 684px; margin: 0 auto; padding: 96px 20px 0; text-align: center; }
.wood-ph .wood-ph__label { margin: 0 0 14px; font: 400 12px/1.4 "Inter Tight", sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--ph-groen); }
.wood-ph .wood-ph__titel { margin: 0 0 20px; font: 500 28px/1.3 "Libre Baskerville", Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: #35332E; }
.wood-ph .wood-ph__intro { margin: 0; font: 300 16px/24px "Inter Tight", sans-serif; }

/* De hoogte van de baan zet het script: podium plus de schuifafstand */
.wood-ph__baan { position: relative; }

/* Het podium is zo hoog als de rij, zodat die op 50px onder de intro aansluit
   (Tim, 23 sep; eerst stond hij midden in een schermhoogte met veel lucht erboven,
   daarna 20px, maar de cijfers steken boven de foto uit en hebben ruimte nodig).
   Het script zet de plakhoogte zo dat de rij tijdens het schuiven in het midden
   van het venster staat. */
.wood-ph__podium {
  position: sticky;
  top: var(--ph-balk);
  overflow: hidden;
  padding-top: 50px;
}

/* Geen will-change: daarmee schuift de browser de rij als plaatje en wordt de
   tekst op halve pixels onscherp. Het script rondt de verschuiving af. */
.wood-ph__rij {
  display: flex;
  align-items: flex-start;
  gap: 110px;
  padding: 0 var(--ph-kantlijn);
}

/* Eén stap: groot nummer, twee foto's over elkaar, kop en tekst */
.wood-ph__stap { position: relative; flex: 0 0 470px; display: flex; flex-direction: column; gap: 34px; }
.wood-ph__stap--om { flex-direction: column-reverse; gap: 60px; } /* ruimte voor het cijfer boven het beeld */

/* Het nummer staat links, steekt boven de foto uit en ligt vóór de foto
   (Tim, 23 sep). Het zit in het beeld, zodat het bij elke stap boven de
   bovenste foto staat, ook als de tekst boven het beeld staat. Gewicht 500,
   zoals de titels in de Elementor-kit. */
.wood-ph__nr {
  position: absolute; z-index: 2; top: -40px; left: -14px;
  font: 500 96px/1 "Libre Baskerville", Georgia, serif;
  color: var(--ph-goud);
  pointer-events: none;
}
.wood-ph__foto { z-index: 1; }

.wood-ph__beeld { position: relative; z-index: 1; height: 330px; }

/* !important op de marge: Elementor's figure-regel weegt (0,4,1) */
.wood-ph__foto { position: absolute; margin: 0 !important; overflow: hidden; background: #E6E0D5; }
.wood-ph__foto img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; border-radius: 0; }
.wood-ph__foto--1 { top: 0; left: 0; width: 340px; height: 270px; }
.wood-ph__foto--2 { right: 0; bottom: 0; width: 200px; height: 160px; }
.wood-ph__stap--om .wood-ph__foto--1 { top: auto; bottom: 0; left: auto; right: 0; }
.wood-ph__stap--om .wood-ph__foto--2 { right: auto; bottom: auto; left: 0; top: 0; }

.wood-ph__tekst { position: relative; z-index: 1; max-width: 420px; }
.wood-ph .wood-ph__stap-kop { margin: 0 0 12px; font: 500 18px/1.4 "Libre Baskerville", Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: #35332E; }
.wood-ph .wood-ph__stap-tekst { margin: 0; font: 300 16px/24px "Inter Tight", sans-serif; }
.wood-ph .wood-ph__stap-tekst a { color: var(--ph-groen); text-decoration: underline; text-decoration-color: var(--ph-goud); text-underline-offset: 3px; }

/* Een stap die nog rechts buiten beeld staat is gedimd en komt op */
.wood-ph.is-actief .wood-ph__stap { opacity: .25; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.wood-ph.is-actief .wood-ph__stap.is-zichtbaar { opacity: 1; transform: none; }

/* Telefoon en tablet: niet vastzetten, gewoon vegen */
@media (max-width: 900px) {
  .wood-ph .wood-ph__kop { padding-top: 56px; }
  .wood-ph { padding-bottom: 56px; }
  .wood-ph__podium { position: static; overflow: visible; padding: 20px 0 0; }
  .wood-ph__rij { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 32px; padding: 36px 24px 0; scrollbar-width: none; }
  .wood-ph__rij::-webkit-scrollbar { display: none; }
  .wood-ph__stap,
  .wood-ph__stap--om { flex: 0 0 82vw; flex-direction: column; scroll-snap-align: center; gap: 24px; }
  .wood-ph__nr { font-size: 72px; top: -32px; left: -6px; }
  .wood-ph__beeld { height: 64vw; }
  .wood-ph__foto--1,
  .wood-ph__stap--om .wood-ph__foto--1 { top: 0; left: 0; right: auto; bottom: auto; width: 86%; height: 78%; }
  .wood-ph__foto--2,
  .wood-ph__stap--om .wood-ph__foto--2 { top: auto; left: auto; right: 0; bottom: 0; width: 48%; height: 40%; }
}

@media (prefers-reduced-motion: reduce) {
  .wood-ph__podium { position: static; height: auto; overflow: visible; padding: 56px 0; }
  .wood-ph__rij { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; }
  .wood-ph__stap { scroll-snap-align: center; }
}

/**lijn**/
.wood-scroll-lijn {
  display: block !important;
  position: relative !important;
  width: 1px !important;
  height: 108px !important;
  flex: 0 0 auto !important;
  align-self: center;
  margin-top: -30px !important;
  margin-bottom: -30px !important;
  background: rgba(217, 185, 118, 0.25);
}
.wood-scroll-lijn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #D9B976;
  transition: height 1.6s ease 1.5s;
}
.wood-scroll-lijn.wood-lijn-actief::after {
  height: 100%;
}


/* -------------------------------------------------------------------------
   Contactformulier in Gravity Forms (formulier "Contact", klasse wood-gf).
   Witte, gevulde vakjes zonder rand (Tim, 3 okt 2026), 48px hoog, 10px
   ertussen, berichtveld 140px. Letter gelijk aan de gewone tekst ernaast;
   knop = goudknop.
   De Orbital-stijl van Gravity Forms wint anders; daarom hier en daar !important.
   ------------------------------------------------------------------------- */
.gform_wrapper.wood-gf_wrapper { max-width: 520px; }
.gform_wrapper.wood-gf_wrapper .gform_fields { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
.gform_wrapper.wood-gf_wrapper .gfield { margin: 0; padding: 0; }
.gform_wrapper.wood-gf_wrapper input[type="text"],
.gform_wrapper.wood-gf_wrapper input[type="email"],
.gform_wrapper.wood-gf_wrapper input[type="tel"],
.gform_wrapper.wood-gf_wrapper textarea {
  width: 100%;
  height: 48px !important;   /* variant E (Tim, 3 okt 2026) */
  min-height: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;   /* gevulde vakjes op het crème (Tim, 3 okt 2026) */
  color: var(--wood-inkt, #35332E) !important;
  font-family: inherit !important;
  font-size: 16px !important;   /* gewone tekst van de site: Inter Tight 16px, 300 */
  font-weight: 300 !important;
  line-height: 24px;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
  outline: 0;
  transition: border-color .2s;
}
.gform_wrapper.wood-gf_wrapper textarea {
  height: 140px !important;
  block-size: 140px !important;
  padding-top: 12px !important;
  resize: vertical;
}
.gform_wrapper.wood-gf_wrapper input::placeholder,
.gform_wrapper.wood-gf_wrapper textarea::placeholder { color: var(--wood-inkt, #35332E) !important; font-weight: 300 !important; opacity: 1 !important; }
.gform_wrapper.wood-gf_wrapper input:focus,
.gform_wrapper.wood-gf_wrapper textarea:focus { box-shadow: inset 0 -1px 0 var(--wood-goud, #D9B976) !important; outline: 0 !important; }
.gform_wrapper.wood-gf_wrapper .gfield_error input,
.gform_wrapper.wood-gf_wrapper .gfield_error textarea { box-shadow: inset 0 0 0 1px #9b3b2f !important; }
.gform_wrapper.wood-gf_wrapper .gfield_validation_message,
.gform_wrapper.wood-gf_wrapper .validation_message { margin: 6px 0 0; padding: 0; border: 0; background: none; font-size: 13px; color: #9b3b2f; }
.gform_wrapper.wood-gf_wrapper .gform_validation_errors { margin: 0 0 16px; padding: 12px 16px; border: 0; border-radius: 0; background: rgba(155, 59, 47, .06); box-shadow: none; }
.gform_wrapper.wood-gf_wrapper .gform_validation_errors h2 { font-size: 14px; color: #9b3b2f; }
.gform_wrapper.wood-gf_wrapper .gform_footer { margin: 1rem 0 0; padding: 0; }
.gform_wrapper.wood-gf_wrapper .gform_footer .gform_button {
  padding: 12px 24px !important;
  border: 0 !important;
  border-radius: 1000px !important;
  background: var(--wood-goud, #D9B976) !important;
  color: var(--wood-inkt, #35332E) !important;
  font: 300 14px/1 "Inter Tight", sans-serif !important;
  letter-spacing: .12em !important;
  text-transform: none;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  cursor: pointer;
  transition: transform .2s ease;
}
.gform_wrapper.wood-gf_wrapper .gform_footer .gform_button:hover,
.gform_wrapper.wood-gf_wrapper .gform_footer .gform_button:focus-visible { transform: translateY(-2px); }
.gform_confirmation_wrapper.wood-gf_confirmation_wrapper { max-width: 520px; font-size: 16px; color: var(--wood-inkt, #35332E); }
/* Onder 16px zoomt een iPhone in bij het typen. */
@media (max-width: 600px) {
  .gform_wrapper.wood-gf_wrapper input[type="text"],
  .gform_wrapper.wood-gf_wrapper input[type="email"],
  .gform_wrapper.wood-gf_wrapper input[type="tel"],
  .gform_wrapper.wood-gf_wrapper textarea { font-size: 16px !important; }
}


/* -------------------------------------------------------------------------
   [wood_tekst_fotos]: tekst met twee foto's (inc/wood-vaste-blokken.php).
   Maten van het Elementor-blok, gemeten 3 okt 2026 op 1440 en 390.
   ------------------------------------------------------------------------- */
.wood-tf {
  padding: var(--wood-tf-boven, 96px) 16px var(--wood-tf-onder, 96px);
}
.wood-tf--beige { background: #E6E0D5; }
.wood-tf__binnen {
  display: grid;
  grid-template-columns: minmax(0, 443fr) minmax(0, 665fr);
  gap: 32px;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
}
.wood-tf--links .wood-tf__binnen { grid-template-columns: minmax(0, 665fr) minmax(0, 443fr); }
.wood-tf--links .wood-tf__beeld { order: -1; }
.wood-tf--links .wood-tf__foto--groot { order: 2; }   /* de grote foto blijft naast de tekst */
.wood-tf__tekst { padding: 10px; }
.wood-tf .wood-tf__aanhef {
  margin: 0 0 20px;
  font: 300 12px/12px "Inter Tight", sans-serif;
  letter-spacing: 1.56px;
  text-transform: uppercase;
  color: #004339;
}
.wood-tf .wood-tf__titel {
  margin: 0 0 20px;
  font-family: "Libre Baskerville", serif;
  font-size: 28px;
  line-height: 36.4px;
  font-weight: 500;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: #35332E;
}
.wood-tf .wood-tf__body p {
  margin: 0 0 14.4px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: #35332E;
}
.wood-tf .wood-tf__body p.wood-naar { margin-top: 28px; }
.wood-tf__beeld {
  display: flex;
  align-items: center;
  gap: 31px;
  padding: 20px;   /* kolom 10 + fotovak 10, zoals in Elementor */
}
.wood-tf .wood-tf__foto {
  flex: 0 0 auto;
  width: 297px !important;
  max-width: calc(50% - 16px) !important;
  height: 400px !important;
  object-fit: cover;
}
.wood-tf .wood-tf__foto--groot { height: var(--wood-tf-hoog, 600px) !important; }
@media (max-width: 767px) {
  .wood-tf__binnen,
  .wood-tf--links .wood-tf__binnen { grid-template-columns: minmax(0, 1fr); gap: 33px; }
  .wood-tf__beeld { flex-direction: column; align-items: stretch; gap: 30px; }
  .wood-tf .wood-tf__foto { width: 100% !important; max-width: 100% !important; }
}


/* -------------------------------------------------------------------------
   [wood_duurzaam_sectie]: het groene duurzaamheidsblok (inc/wood-vaste-blokken.php).
   Maten van het Elementor-blok, gemeten 3 okt 2026 op 1440 en 390.
   ------------------------------------------------------------------------- */
.wood-ds {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 96px 16px;
  background: #004339;
}
.wood-ds::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wood-ds-foto, none) 50% 50% / cover no-repeat;
  opacity: var(--wood-ds-sterkte, .28);
}
/* Vast bij het scrollen zoals in Elementor; op telefoon en tablet niet (iOS kan het niet). */
@media (min-width: 1025px) and (hover: hover) {
  .wood-ds::before { background-attachment: fixed; }
}
.wood-ds__kop {
  width: 500px;
  max-width: 100%;
  padding: 10px;
  text-align: center;
}
.wood-ds .wood-ds__aanhef {
  margin: 0 0 20px;
  font: 300 12px/12px "Inter Tight", sans-serif;
  letter-spacing: 1.56px;
  text-transform: uppercase;
  color: #D9B976;
}
.wood-ds .wood-ds__titel {
  margin: 0 0 20px;
  font-family: "Libre Baskerville", serif;
  font-size: 36px;
  line-height: 41.6px;
  font-weight: 500;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: #fff;
}
.wood-ds .wood-ds__intro p {
  margin: 0 0 14.4px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: #fff;
}
.wood-ds__vier {
  width: 100%;
  max-width: 1140px;
  padding: 10px;
}


/* -------------------------------------------------------------------------
   [wood_reviews_alle]: alle reviews in metselwerk (Tim, 5 okt 2026). Zelfde kaart
   als de reviews elders (wood-review), met de volledige tekst; kolommen zoals het
   portfolio.
   ------------------------------------------------------------------------- */
.wood-reviews--alle { padding-top: 96px; padding-bottom: 96px; }
.wood-reviews__metsel { columns: 3; column-gap: 30px; }
.wood-reviews__metsel .wood-review {
  display: inline-block;
  width: 100%;
  margin: 0 0 30px;
  padding: 28px;
  break-inside: avoid;
}
.wood-reviews__metsel .wood-review__tekst p { margin: 0 0 12px; }
.wood-reviews__metsel .wood-review__tekst p:first-of-type { display: inline; }
.wood-reviews__metsel .wood-review__tekst p:first-of-type + p { margin-top: 12px; }
.wood-reviews__metsel .wood-review__tekst p:last-child { margin-bottom: 0; }
@media (max-width: 1024px) { .wood-reviews__metsel { columns: 2; } }
@media (max-width: 767px) {
  .wood-reviews--alle { padding-top: 60px; padding-bottom: 56px; }
  .wood-reviews--alle > .wood-binnen { padding-top: 0 !important; }
  .wood-reviews__metsel { columns: 1; }
  .wood-reviews__metsel .wood-review { margin-bottom: 16px; padding: 22px; }
}

/* [wood_google_score]: sterren en de score op Google (inc/wood-collectie-secties.php). */
.wood-google { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -16px 0 36px; font-size: 15px; line-height: 1.5; color: #35332E; }
.wood-google.is-midden { justify-content: center; text-align: center; }
.wood-google__sterren { display: inline-flex; gap: 2px; line-height: 0; }
.wood-google strong { font-weight: 500; }
.wood-google a.wood-google__link { color: #004339; text-decoration: underline; text-decoration-color: #D9B976; text-underline-offset: 4px; }
@media (max-width: 767px) { .wood-google { margin: -10px 0 28px; font-size: 14px; } }

/* -------------------------------------------------------------------------
   [wood_fotoblok]: foto met tekst linksonder (inc/wood-vaste-blokken.php).
   Maten van de Elementor-blokken, gemeten 3 okt 2026 op 1440 en 390.
   ------------------------------------------------------------------------- */
.wood-fb {
  position: relative;
  isolation: isolate;
  display: flex;
  background: var(--wood-fb-foto, none) 50% 50% / cover no-repeat;
}
.wood-fb__binnen { display: flex; width: 100%; }
.wood-fb__tekst { display: flex; flex-direction: column; align-items: flex-start; }
.wood-fb .wood-fb__aanhef {
  margin: 0;
  font-family: "Inter Tight", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
}
.wood-fb .wood-fb__titel {
  margin: 0;
  font-family: "Libre Baskerville", serif;
  font-size: 37px;
  line-height: 41.6px;
  font-weight: 500;
  letter-spacing: 3.7px;
  text-transform: uppercase;
}

/* Quote op Over: bosfoto vast bij het scrollen, groene waas van links, 540 hoog. */
.wood-fb--quote {
  min-height: 540px;
  padding: 80px;
  align-items: flex-end;
  background-position: 50% 0%;
}
@media (min-width: 1025px) and (hover: hover) {
  .wood-fb--quote { background-attachment: fixed; }
}
.wood-fb--quote::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #004339 0%, rgba(0, 67, 57, .15) 100%);
  opacity: .55;
}
.wood-fb--quote .wood-fb__tekst { width: 640px; max-width: 100%; padding: 10px; gap: 10px; }
.wood-fb--quote .wood-fb__aanhef { font-size: 12px; line-height: 12px; letter-spacing: 1.56px; color: #FAF7F1; }
.wood-fb--quote .wood-fb__titel { color: #FAF7F1; }

/* Kop van Duurzaamheid: 630 hoog, tekst onderaan in de inhoudsbreedte, 64% breed. */
.wood-fb--kop {
  min-height: 630px;
  padding: 96px 16px 80px;
  background-color: #004339;
  background-position: 50% 100%;
}
.wood-fb--kop .wood-fb__binnen { max-width: 1140px; margin: 0 auto; align-items: flex-end; }
.wood-fb--kop .wood-fb__tekst { width: 64%; gap: 20px; }
.wood-fb--kop .wood-fb__aanhef { font-size: 18px; line-height: 18px; letter-spacing: 2.34px; color: #fff; }
.wood-fb--kop .wood-fb__titel { color: #fff; }

@media (max-width: 767px) {
  .wood-fb--quote { min-height: 0; padding: 120px 16px 48px; }
  .wood-fb--quote .wood-fb__tekst { width: 100%; }
  .wood-fb--kop .wood-fb__tekst { width: 100%; }
}


/* =========================================================================
   Zonder Elementor (4 okt 2026): basis, kop, voet, zoeken en 404.
   Hoort bij header.php, footer.php en de sjabloonbestanden. Zolang Elementor
   aan staat zijn deze klassen niet in gebruik, en de basisregels zijn gelijk
   aan de Elementor-kit (die wint dan met een hogere specificiteit).
   ========================================================================= */

/* Basis, overgenomen uit de Elementor-kit (post-7.css). */
body {
  background-color: #FAF7F1;
  color: #35332E;
  font-family: "Inter Tight", sans-serif;
  font-weight: 300;
}
a { color: #004339; }
h1, h2, h3, h4 {
  font-family: "Libre Baskerville", serif;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.3em;
  letter-spacing: .1em;
}
h2 { color: #35332E; font-size: 18px; }
h3 { color: #004339; font-size: 14px; }
h4 { color: #35332E; font-size: 14px; line-height: normal; letter-spacing: .13em; }

/* Kop: de balk met het megamenu. Positie en hoogte regelt het megamenu zelf
   (header:has(.wood-mm--kleur-gevuld) in wood-megamenu.css). */
.wood-site-kop__balk {
  padding-inline: var(--wood-mm-kantlijn, clamp(24px, 3.4vw, 64px));
}
.wood-main { display: block; }

/* Voet, nagemaakt van de Elementor-footer (gemeten op 1440 en 390). */
.wood-voet__groen { padding: 80px 20px; background: #004339; }
.wood-voet__binnen {
  display: flex;
  gap: 60px;
  max-width: 1140px;
  margin: 0 auto;
}
.wood-voet__kolom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 0;
  min-width: 0;
}
/* De tekstkolom breder, de drie andere even breed (Tim, 15 okt 2026): op 1140 is dat 354 tegen 202. */
.wood-voet__kolom--eerste { flex-grow: 1.75; }
.wood-voet .wood-voet__logo { display: block; align-self: flex-start; width: auto; height: 42px; }
.wood-voet .wood-voet__tekst {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  font-weight: 300;
  color: #FAF7F1;
}
.wood-voet .wood-voet__tekst + .wood-voet__tekst { margin-top: -8px; }   /* twee alinea's (Daniëlle, 13 okt): dichter op elkaar dan de kolomruimte */
/* Geen extra ruimte onder het adres: de kolomruimte van 20px tot de iconen, net als van een kop naar de eerste link (Tim, 15 okt 2026; was 28px zoals in Elementor). */
.wood-voet .wood-voet__adres { margin-bottom: 0; }
/* Kopje "Openingstijden" boven de tijden: goud, niet vet, zoals "Route" (Tim, 15 okt 2026). */
.wood-voet .wood-voet__label { color: #D9B976; }
/* "Plan een afspraak" onder de tekst (wens Thomas): de gewone knop (.wood-knop), niet uitgerekt over de kolom (Tim, 15 okt 2026). */
.wood-voet .wood-voet__knop { align-self: flex-start; }
/* "Route" als vierde regel van het adres, zelfde letter en regelafstand, in goud (Tim, 15 okt 2026).
   Zonder streep: de regel voor links in lopende tekst (bovenaan, p a) weegt anders zwaarder. */
.wood-voet p.wood-voet__adres a.wood-voet__route { color: #D9B976; text-decoration: none; }
.wood-voet p.wood-voet__adres a.wood-voet__route:hover,
.wood-voet p.wood-voet__adres a.wood-voet__route:focus-visible { color: #FAF7F1; }
.wood-voet .wood-voet__kop {
  margin: 0;
  font: 500 12px/12px "Inter Tight", sans-serif;
  letter-spacing: 1.56px;
  text-transform: uppercase;
  color: #D9B976;
}
.wood-voet__menu,
.wood-voet__contact,
.wood-voet__juridisch { margin: 0; padding: 0; list-style: none; }
.wood-voet .wood-voet__menu a {
  display: block;
  padding: 3px 0;
  font-size: 12px;
  line-height: 20px;
  font-weight: 300;
  color: #FAF7F1;
  text-decoration: none;
}
.wood-voet .wood-voet__menu .current-menu-item > a,
.wood-voet .wood-voet__menu a:hover,
.wood-voet .wood-voet__menu a:focus-visible { color: #D9B976; }
.wood-voet__contact { display: flex; flex-direction: column; gap: 4px; }
.wood-voet .wood-voet__contact a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 300;
  color: #FAF7F1;
  text-decoration: none;
}
.wood-voet__contact a:hover span,
.wood-voet__contact a:focus-visible span { color: #D9B976; }
.wood-voet__contact svg { flex: 0 0 auto; width: 12px; height: 12px; fill: #D9B976; }
.wood-voet__balk { padding: 10px 20px; background: #E6E0D5; }
.wood-voet__binnen--balk {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 24px;
}
.wood-voet__copy { font-size: 12px; line-height: 12px; font-weight: 300; color: #004339; }
.wood-voet .wood-voet__copy a { color: #004339; text-decoration: none; }
.wood-voet__juridisch { display: flex; align-items: center; }
.wood-voet__juridisch li { position: relative; margin: 0 9.5px; }
.wood-voet__juridisch li:first-child { margin-left: 0; }
.wood-voet__juridisch li:last-child { margin-right: 0; }
.wood-voet__juridisch li + li::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  height: 10px;
  border-left: 1px solid #D9B976;
  transform: translateY(-50%);
}
.wood-voet .wood-voet__juridisch a { font-size: 12px; line-height: 18px; font-weight: 300; color: #004339; text-decoration: none; }
@media (max-width: 767px) {
  .wood-voet__binnen { flex-direction: column; gap: 40px; }
  .wood-voet__binnen--balk { align-items: flex-start; gap: 20px; }
}

/* Zoekresultaten en 404 (nieuw: in Elementor waren die er niet). */
/* De bovenruimte zit op de binnenkant: het megamenu zet op <main> zelf de ruimte voor de vaste balk. */
.wood-zoek { padding: 0 16px 96px; }
.wood-zoek__binnen { max-width: 760px; margin: 0 auto; padding-top: 64px; }
.wood-zoek .wood-zoek__aanhef {
  margin: 0 0 20px;
  font: 300 12px/12px "Inter Tight", sans-serif;
  letter-spacing: 1.56px;
  text-transform: uppercase;
  color: #004339;
}
.wood-zoek .wood-zoek__titel {
  margin: 0 0 28px;
  font-family: "Libre Baskerville", serif;
  font-size: 28px;
  line-height: 36.4px;
  font-weight: 500;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: #35332E;
}
.wood-zoek__form { display: flex; gap: 12px; margin: 0 0 40px; }
.wood-zoek__form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: #fff;
  font: 300 16px/24px "Inter Tight", sans-serif;
  color: #35332E;
}
.wood-zoek__lijst { margin: 0; padding: 0; list-style: none; }
.wood-zoek__lijst li { padding: 18px 0; border-bottom: 1px solid rgba(0, 67, 57, .1); }
.wood-zoek__lijst a { font-size: 18px; line-height: 1.4; font-weight: 400; color: #004339; text-decoration: none; }
.wood-zoek__lijst p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: rgba(53, 51, 46, .8); }
.wood-zoek .wood-zoek__leeg { margin: 0 0 28px; font-size: 16px; line-height: 24px; color: #35332E; }
.wood-zoek__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* De lightbox van de projectgalerij (wood_lightbox() in inc/wood-diensten.php). */
.wood-lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(14, 31, 34, .94);
}
.wood-lightbox::backdrop { background: rgba(14, 31, 34, .6); }
.wood-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.wood-lightbox .wood-lightbox__foto {
  display: block;
  max-width: 88vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.wood-lightbox .wood-lightbox__knop {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 247, 241, .12);
  color: #FAF7F1;
  font: 300 30px/1 "Inter Tight", sans-serif;
  cursor: pointer;
}
.wood-lightbox .wood-lightbox__knop:hover,
.wood-lightbox .wood-lightbox__knop:focus-visible { background: rgba(250, 247, 241, .24); }
.wood-lightbox__knop--vorige { left: 24px; top: 50%; transform: translateY(-50%); }
.wood-lightbox__knop--volgende { right: 24px; top: 50%; transform: translateY(-50%); }
.wood-lightbox__knop--sluit { right: 24px; top: 24px; }
.wood-lightbox .wood-lightbox__teller {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: .13em;
  color: rgba(250, 247, 241, .8);
}
@media (max-width: 767px) {
  .wood-lightbox .wood-lightbox__foto { max-width: 100vw; }
  .wood-lightbox__knop--vorige { left: 8px; }
  .wood-lightbox__knop--volgende { right: 8px; }
}

/*
 * Tekst met twee foto's op de telefoon (Tim, 5 okt 2026; eerst als proef op Over,
 * daarna overal): eerst de tekst, ook bij het gespiegelde blok, en de foto's
 * kleiner en in elkaar zoals de fotostapel van de collectie. De grote foto is
 * iets hoger dan vierkant (4:5), zoals hij op desktop ook staand is; de kleine
 * valt er rechtsonder 60px overheen.
 */
@media (max-width: 767px) {
  .wood-tf__beeld,
  .wood-tf--links .wood-tf__beeld { order: 2; flex-direction: column; align-items: flex-start; gap: 0; }
  .wood-tf--links .wood-tf__foto--groot { order: 0; }
  .wood-tf .wood-tf__foto--groot {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
  }
  .wood-tf .wood-tf__foto--klein {
    width: 62.5% !important;
    max-width: 250px !important;
    height: auto !important;
    aspect-ratio: 1;
    margin: -60px 24px 0 auto;
    position: relative;
  }
}

/*
 * Marges op de telefoon gelijk (Tim, 5 okt 2026), met Portfolio als maat: de
 * eerste tekst staat 40px onder de header, van titel naar foto of filter
 * ongeveer 28px, en tussen twee secties hoogstens 56px. Een pagina die met een
 * foto begint (hero) houdt die foto tegen de header. De bovenmarge is daarna
 * anderhalf keer zo groot gemaakt: 60px (Tim, 5 okt 2026).
 */
@media (max-width: 767px) {
  main.wood-main > section:first-child:not(.wood-home-hero):not(.wood-hero):not(.wood-fb):not(.wood-dienst-hero):not(.wood-tf) {
    padding-top: 60px !important;
  }
  .wood-tf {
    padding-top: min(var(--wood-tf-boven, 96px), 56px);
    padding-bottom: min(var(--wood-tf-onder, 96px), 56px);
  }
  main.wood-main > .wood-tf:first-child { padding-top: 50px; }   /* + 10px binnenruimte van de tekst */
  .wood-contactpagina > .wood-contact-evi:first-child { padding-top: 60px; }
  main .wood-kop { margin-bottom: 28px; }
  main .wood-project-galerij { padding-top: 8px; }
  /* Pagina's in Hello's eigen opmaak: Portfolio, Artikelen, Vloerzoeker, en tekstpagina's als Diensten en privacy. */
  .page-content > .wood-projecten:first-child > .wood-binnen { padding-top: 60px !important; }
  main.wood-main > .wood-projecten:first-child > .wood-binnen { padding-top: 0 !important; }
  .page-content .wood-vz-root:first-child > .wood-vz-pagina:first-child,
  main.wood-main > .wood-vz-root:first-child > .wood-vz-pagina:first-child { padding-top: 60px !important; }
  main.site-main > .page-header { padding-top: 52px; }

  /* Twee foto's naast elkaar: portfolio, artikelen, projecten erbij, en de foto's van een project (Tim). */
  .wood-projecten:not(.wood-projecten--bij) .wood-raster--projecten,
  .wood-project-galerij .wood-project-galerij__raster { columns: 2 !important; column-gap: 12px !important; }
  .wood-projecten--bij .wood-raster { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 12px !important; }
  .wood-projecten .wood-kaart .wood-kaart__titel { font-size: 15px; }
  .wood-raster .wood-kaart .wood-kaart__over { padding: 12px 12px 10px; }
  .wood-raster .wood-kaart .wood-kaart__over-titel { font-size: 13px; line-height: 1.3; }
  /* Reviews op de telefoon: drie is genoeg (Tim, 5 okt 2026); de grote reviewpagina toont ze allemaal. */
  .wood-reviews__raster > .wood-review:nth-child(n+4) { display: none; }
  /* Artikelen zijn er weinig: één per rij, over de volle breedte (Tim). */
  .wood-artikelen .wood-raster { grid-template-columns: minmax(0, 1fr) !important; }
  .wood-artikelen .wood-kaart .wood-kaart__over--vast .wood-kaart__over-titel { font-size: 17px; }
  .wood-artikelen .wood-kaart .wood-kaart__over { padding: 18px 20px; }

  /*
   * Vaste fotoafstand op de telefoon (Tim, 5 okt 2026): 24px van tekst naar foto's,
   * 24px van foto's naar de volgende tekst, en de foto's op dezelfde lijn als de
   * tekst (geen 10px inspringing meer).
   */
  .wood-tf__binnen,
  .wood-tf--links .wood-tf__binnen { gap: 24px; }
  .wood-tf__beeld,
  .wood-tf--links .wood-tf__beeld { padding: 0 10px; }
  .wood-tf__tekst { padding-bottom: 0; }
  .wood-tf .wood-tf__body > :last-child { margin-bottom: 0; }
  .wood-duurzaam-beeld { padding: 0; }
  .wood-duurzaam-foto--1 { margin-left: 0 !important; }
}

/* =============================================================================
   Gewone tekstpagina (voorwaarden, disclaimer, privacy, partners), page.php.
   Tim, 5 okt 2026: 80 boven en onder, 20 opzij, 1000 pixels breed. Kop zoals bij
   projecten en artikelen; tekst met dezelfde regels als de lange tekst
   (wood-collectie.css, .wood-tekstpagina__tekst). Twee klassen op de sectie,
   want wood-diensten.css (.wood-project-intro ...) laadt later.
   ============================================================================= */
.wood-project-intro.wood-tekstpagina {
  padding: 80px 20px;
  background: transparent;
}
.wood-project-intro.wood-tekstpagina .wood-binnen {
  max-width: 1000px;
}
.wood-project-intro.wood-tekstpagina .wood-project-intro__titel {
  max-width: none;
  margin-bottom: 32px;
}
.wood-tekstpagina .wood-tekstpagina__tekst > :first-child {
  margin-top: 0;
}
.wood-tekstpagina .wood-tekstpagina__tekst a {
  color: var(--wood-groen);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 767px) {
  .wood-project-intro.wood-tekstpagina { padding: 48px 16px; }
}

/* De bedrijfsfilm in een lightbox (inc/wood-thema.php). */
.wood-film {
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  background: #000;
  overflow: visible;
}
.wood-film::backdrop {
  background: rgba(20, 30, 27, .85);
}
.wood-film__beeld {
  aspect-ratio: 16 / 9;
}
.wood-film__beeld iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.wood-film button.wood-film__sluit,
.wood-film button.wood-film__sluit:hover,
.wood-film button.wood-film__sluit:focus {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #FAF7F1;
  cursor: pointer;
}
.wood-film__sluit svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* De knop die de film opent: een tekstlink met een afspeelrondje ervoor. */
a.wood-filmknop {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--wood-groen);
  font-weight: 500;
  text-decoration: none;
}
a.wood-filmknop::before {
  content: "";
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wood-groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23FAF7F1'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: transform .2s;
}
a.wood-filmknop:hover::before {
  transform: scale(1.08);
}