/*
Theme Name:  EcoHoorn Child
Theme URI:   https://ecohoorntechniek.nl
Description: EcoHoorn Techniek child theme — gebaseerd op Blocksy
Author:      EcoHoorn Techniek
Template:    blocksy
Version:     5.1.0
Text Domain: ecohoorn-child
*/

/* ================================================================
   DESIGN TOKENS
   + GUTENBERG CONTENT WIDTH

   PALETDISCIPLINE — LEES DIT VOOR JE EEN KLEUR TOEVOEGT
   ----------------------------------------------------------------
   De huisstijl telt precies ZES kleuren. Bron van waarheid is
   Logo's/Ontwerpen/Huisstijl kleuren.svg :

     #263928 forest   #5f8f99 slate   #f5f4ef cream
     #e7e5df sand     #c9a26a gold    #5c7651 sage

   Daarnaast staan hier vijf functionele waarden die geen merkkleur
   zijn maar wel echt werk doen (hoverstaten, randen, bijtekst,
   kaartvlak). Elke kleur hieronder moet in één zin te verdedigen
   zijn. Kan dat niet, dan hoort hij hier niet.

   GEEN PUUR WIT. Stefan heeft dit op 2026-09-11 expliciet bepaald.
   Puur wit komt in dit bestand niet meer voor; het bijbehorende
   token is verwijderd. Lichtste vlak = cream, kaarten = sand, tekst op
   donker = cream. Half-doorzichtig wit (rgba(255,255,255,0.35) e.d.)
   op forest blijft wel staan: dat rendert als getint groengrijs,
   niet als wit.

   BEWUSTE AFWIJKING van _adherence.oxlintrc.json (dat 87 canonieke
   tokens noemt): op 2026-09-11 zijn zeven ONGEBRUIKTE kleurtokens
   verwijderd — forest-light, sage-light, slate-light, cream-dark,
   black, slate-dark en white. Geverifieerd: nul treffers in de live
   HTML van alle 10 pagina's en nul in functions.php. Ze waren door
   een generator bedacht, niet door de huisstijl.
   Zet ze NIET terug "om weer 87/87 te halen" — het designsysteem
   moet hierop bijgewerkt worden, niet andersom.

   --fg-muted is hierbij van #6b7665 naar #5f6859 gegaan (zelfde
   tint 99deg en verzadiging, alleen donkerder). Nodig omdat bijtekst
   op een sand-kaart anders op 3.79 uitkomt en WCAG AA niet haalt;
   #5f6859 haalt 4.62 op sand en 5.28 op cream.
   ================================================================ */
:root {
  /* Brand palet */
  --color-forest:       #263928;
  --color-sage:         #5c7651;
  --color-slate:        #5f8f99;
  --color-gold:         #c9a26a;
  --color-cream:        #f5f4ef;
  --color-sand:         #e7e5df;

  /* Neutralen */

  /* Functionele tints — ALLEEN tints die echt werk doen.
     Zie de notitie "PALETDISCIPLINE" onderaan dit blok. */
  --color-forest-dark:  #1a2a1d;  /* hover op forest knop */
  --color-gold-dark:    #a07d48;  /* hover op gouden knop */
  --color-gold-light:   #dbbe97;  /* lichte goudaccenten */
  --color-sand-dark:    #cdc9be;  /* randen */

  /* Semantische kleur-tokens */
  --bg-page:            var(--color-cream);
  --bg-card:            var(--color-sand);   /* kaart iets donkerder dan de cream pagina */
  --bg-card-alt:        var(--color-cream);  /* kaart op een sand/donkere sectie */
  --bg-dark:            var(--color-forest);
  --bg-dark-alt:        var(--color-forest-dark);
  --bg-accent:          var(--color-sage);
  --fg-primary:         var(--color-forest);
  --fg-secondary:       var(--color-sage);
  --fg-muted:           #5f6859;  /* donkerder dan #6b7665: haalt AA op sand-kaarten */
  --fg-inverse:         var(--color-cream);  /* tekst op forest — cream, nooit puur wit */
  --fg-accent:          var(--color-gold);
  --fg-link:            var(--color-slate);
  --fg-link-hover:      var(--color-sage);   /* volgt --theme-link-hover-color uit functions.php */
  --border-default:     var(--color-sand-dark);
  --border-strong:      var(--color-forest);
  --border-subtle:      var(--color-sand);

  /* Interactie + status */
  --focus-ring:         var(--color-slate);
  --color-success:      var(--color-sage);
  --color-warning:      var(--color-gold);
  --color-info:         var(--color-slate);

  /* Typografie */
  --font-sans:          'Inter', system-ui, -apple-system, sans-serif;
  --font-display:       'Inter', system-ui, -apple-system, sans-serif;
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-bold:            800;

  /* Type scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   1.875rem;
  --text-3xl:   2.25rem;
  --text-4xl:   3rem;
  --text-5xl:   3.75rem;
  --text-6xl:   4.5rem;

  /* Regelhoogte */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letterafstand */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;

  /* Spacing schaal */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 9999px;

  /* Schaduwen */
  --shadow-xs:  0 1px 2px 0 rgba(38,57,40,0.06);
  --shadow-sm:  0 2px 4px 0 rgba(38,57,40,0.08);
  --shadow-md:  0 4px 12px 0 rgba(38,57,40,0.10);
  --shadow-lg:  0 8px 24px 0 rgba(38,57,40,0.12);

  /* Transities */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 400ms ease-in-out;

  /* Gutenberg layout breedte — overeenkomend met design (1200px) */
  --wp--style--global--content-size: 1200px;
  --wp--style--global--wide-size: 1400px;
}

/* ================================================================
   BASIS
   ================================================================ */
body {
  font-family: var(--font-sans);
  background-color: var(--color-cream);
  color: var(--color-forest);
  -webkit-font-smoothing: antialiased;
}

/* ================================================================
   GLOBALE ELEMENTOR TYPOGRAFIE — alle pagina's
   ================================================================ */
.elementor .elementor-heading-title,
.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6 {
  font-family: var(--font-sans) !important;
}

.elementor-kit-55,
.elementor-kit-55 body {
  font-family: var(--font-sans) !important;
}

/* ================================================================
   BLOCKSY HEADER
   ================================================================ */
.ct-header,
.ct-header [data-row],
.ct-header [data-row*="middle"],
.ct-header [data-sticky*="yes"] [data-row*="middle"] {
  background-color: var(--color-forest) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(245, 244, 239, 0.12) !important;
  box-shadow: none !important;
}

/* LET OP bij het aanpassen van deze selectors.
   De <ul> in de Blocksy-header heet `menu`, NIET `ct-menu`. Tot v5.0
   stond hier `.ct-header .ct-menu > li > a`, en dat raakte dus geen
   enkel element: de menukleuren kwamen al die tijd uit Blocksy zelf.
   Zolang de header creme was viel dat niet op, maar op de donkergroene
   balk werd het menu onzichtbaar (forest op forest).
   Lettertype, -grootte en hoofdletters komen bewust uit de Blocksy
   Customizer; hier staan alleen de kleuren, want die moeten mee met
   de donkere balk. */
.ct-header [data-id="menu"] > ul > li > a,
.ct-header .ct-menu-link {
  color: rgba(245, 244, 239, 0.75) !important;
  transition: color 150ms ease-in-out;
}

.ct-header [data-id="menu"] > ul > li > a:hover,
.ct-header .ct-menu-link:hover,
.ct-header [data-id="menu"] > ul > li.current-menu-item > a {
  color: var(--color-gold) !important;
}

.ct-header [data-id="menu"] > ul > li.current-menu-item > a {
  border-bottom: 2px solid var(--color-gold) !important;
}

/* Pijltje van het uitklapmenu meekleuren met de link */
.ct-header .ct-toggle-dropdown-desktop .ct-icon,
.ct-header .ct-toggle-dropdown-desktop svg {
  fill: currentColor !important;
}

.ct-header .ct-button,
.ct-header a.ct-button,
.ct-header-cta .ct-button,
.ct-header-cta a.ct-button {
  background: var(--color-gold) !important;
  color: var(--color-forest) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  text-transform: none !important;
  border: none !important;
  transition: background 150ms ease-in-out !important;
}

.ct-header .ct-button:hover,
.ct-header a.ct-button:hover {
  background: var(--color-gold-light) !important;
}

/* Header-container even breed als de rest van de site (was edge-to-edge) */
.ct-header .ct-container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Site-titel naast het logo i.p.v. eronder, en gewoon forest-groen */
.ct-header .site-branding {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
}
.ct-header .site-title-container {
  margin: 0 !important;
}
.ct-header .site-title,
.ct-header .site-title a {
  color: var(--color-cream) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
}

/* ================================================================
   HERO HELPER — Elementor element-IDs (achterwaartse compatibiliteit)
   ================================================================ */
.elementor-element-f0fdcdd,
.elementor-element-944f2a3,
.elementor-element-5dd30c7,
.elementor-element-309cf068,
.elementor-element-469496b3,
.elementor-element-2b44380 {
  background-color: var(--color-forest) !important;
  background-image: none !important;
}

.elementor-element-f0fdcdd > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-944f2a3 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-5dd30c7 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-309cf068 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-469496b3 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-2b44380 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.elementor-element-f0fdcdd:not(.elementor-motion-effects-element-type-background),
.elementor-element-944f2a3:not(.elementor-motion-effects-element-type-background),
.elementor-element-5dd30c7:not(.elementor-motion-effects-element-type-background),
.elementor-element-309cf068:not(.elementor-motion-effects-element-type-background),
.elementor-element-469496b3:not(.elementor-motion-effects-element-type-background),
.elementor-element-2b44380:not(.elementor-motion-effects-element-type-background) {
  background-color: var(--color-forest) !important;
  background-image: none !important;
}

.elementor-element-f0fdcdd::before,
.elementor-element-944f2a3::before,
.elementor-element-5dd30c7::before,
.elementor-element-309cf068::before,
.elementor-element-469496b3::before,
.elementor-element-2b44380::before {
  background-color: transparent !important;
  opacity: 0 !important;
}

.elementor-element-f0fdcdd > .elementor-shape-bottom .elementor-shape-fill,
.elementor-element-f0fdcdd > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill,
.elementor-element-944f2a3 > .elementor-shape-bottom .elementor-shape-fill,
.elementor-element-944f2a3 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill,
.elementor-element-5dd30c7 > .elementor-shape-bottom .elementor-shape-fill,
.elementor-element-5dd30c7 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill,
.elementor-element-309cf068 > .elementor-shape-bottom .elementor-shape-fill,
.elementor-element-309cf068 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill,
.elementor-element-469496b3 > .elementor-shape-bottom .elementor-shape-fill,
.elementor-element-469496b3 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill,
.elementor-element-2b44380 > .elementor-shape-bottom .elementor-shape-fill,
.elementor-element-2b44380 > .e-con-inner > .elementor-shape-bottom .elementor-shape-fill {
  fill: var(--color-cream) !important;
}

.elementor-element-f0fdcdd .elementor-heading-title,
.elementor-element-944f2a3 .elementor-heading-title,
.elementor-element-5dd30c7 .elementor-heading-title,
.elementor-element-309cf068 .elementor-heading-title,
.elementor-element-469496b3 .elementor-heading-title,
.elementor-element-2b44380 .elementor-heading-title {
  color: var(--color-cream) !important;
  font-family: var(--font-sans) !important;
}

.elementor-element-f0fdcdd p,
.elementor-element-944f2a3 p,
.elementor-element-5dd30c7 p,
.elementor-element-309cf068 p,
.elementor-element-469496b3 p,
.elementor-element-2b44380 p,
.elementor-element-f0fdcdd .elementor-widget-text-editor,
.elementor-element-944f2a3 .elementor-widget-text-editor,
.elementor-element-5dd30c7 .elementor-widget-text-editor,
.elementor-element-309cf068 .elementor-widget-text-editor,
.elementor-element-469496b3 .elementor-widget-text-editor,
.elementor-element-2b44380 .elementor-widget-text-editor {
  color: rgba(255, 255, 255, 0.72) !important;
  font-family: var(--font-sans) !important;
}

/* ================================================================
   HOMEPAGE — Elementor element-specifieke fixes
   ================================================================ */
.elementor-element-d40aa81 .elementor-heading-title {
  font-size: 3.25rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

.elementor-element-5c68e03 .elementor-button {
  background-color: var(--color-gold) !important;
  color: var(--color-forest) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  transition: background-color 200ms ease-in-out !important;
}
.elementor-element-5c68e03 .elementor-button:hover {
  background-color: var(--color-gold-dark) !important;
}

.elementor-element-1a8a768 .elementor-button {
  background-color: transparent !important;
  color: var(--color-cream) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 14px 28px !important;
  transition: border-color 200ms ease-in-out !important;
}
.elementor-element-1a8a768 .elementor-button:hover {
  border-color: var(--color-cream) !important;
}

.elementor-element-2dc444c,
.elementor-element-9f4877b,
.elementor-element-18591d6 {
  background-color: var(--color-sand) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(38, 57, 40, 0.10) !important;
}
.elementor-element-2dc444c:hover,
.elementor-element-9f4877b:hover,
.elementor-element-18591d6:hover {
  box-shadow: 0 8px 24px rgba(38, 57, 40, 0.14) !important;
  transform: translateY(-2px);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.elementor-element-2dc444c .elementor-icon-box-title,
.elementor-element-9f4877b .elementor-icon-box-title,
.elementor-element-18591d6 .elementor-icon-box-title {
  color: var(--color-forest) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
}
.elementor-element-2dc444c .elementor-icon-box-description,
.elementor-element-9f4877b .elementor-icon-box-description,
.elementor-element-18591d6 .elementor-icon-box-description {
  color: var(--fg-muted) !important;
  font-family: var(--font-sans) !important;
}

.elementor-element-263191e .elementor-button {
  background-color: var(--color-gold) !important;
  color: var(--color-forest) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 15px 28px !important;
  font-weight: 600 !important;
}
.elementor-element-263191e .elementor-button:hover {
  background-color: var(--color-gold-dark) !important;
}

/* ================================================================
   BLOCKSY FOOTER
   ================================================================ */
.ct-footer,
.ct-footer [data-row],
.ct-footer [data-row*="middle"],
.ct-footer [data-row*="bottom"] {
  background-color: var(--color-forest) !important;
  background-image: none !important;
}

.ct-footer,
.ct-footer p,
.ct-footer span,
.ct-footer li,
.ct-footer a {
  color: rgba(245, 244, 239, 0.65);
  font-family: var(--font-sans);
}

.ct-footer a:hover {
  color: var(--color-cream);
  text-decoration: none;
}

.ct-footer h4,
.ct-footer h5,
.ct-footer h6,
.ct-footer .widget-title {
  color: var(--color-gold) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.ct-footer-bottom-bar,
.ct-footer [data-row*="bottom"] {
  border-top: 1px solid rgba(245, 244, 239, 0.12) !important;
}

.ct-footer [data-id="copyright"],
.ct-footer-copyright {
  color: rgba(245, 244, 239, 0.4) !important;
  font-size: 13px !important;
}

/* ================================================================
   ELEMENTOR KNOPPEN — algemeen
   ================================================================ */
.elementor-button {
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out !important;
}

/* ================================================================
   RECAPTCHA — badge verbergen + footer-melding styling
   ================================================================ */
.grecaptcha-badge,
body .grecaptcha-badge {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: fixed !important;
  right: -200px !important;
}

/* Wettelijke melding via wp_footer — toont na de footer, moet donker blijven */
.ct-footer-recaptcha {
  display: block;
  width: 100%;
  background-color: var(--color-forest) !important;
  color: rgba(245, 244, 239, 0.38) !important;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 11px;
  padding: 4px 20px 12px;
  margin: 0;
  box-sizing: border-box;
}
.ct-footer-recaptcha a {
  color: rgba(245, 244, 239, 0.55) !important;
  text-decoration: underline;
}

/* ================================================================
   HULPKLASSEN — Elementor CSS-klassen veld
   ================================================================ */
.eco-hero { background-color: var(--color-forest) !important; background-image: none !important; }
.eco-hero .elementor-heading-title, .eco-hero h1, .eco-hero h2 { color: var(--color-cream) !important; }
.eco-hero p, .eco-hero .elementor-widget-text-editor { color: rgba(255,255,255,0.72) !important; }
.eco-bg-cream  { background-color: var(--color-cream) !important; }
.eco-bg-sand   { background-color: var(--color-sand) !important; }
.eco-bg-forest { background-color: var(--color-forest) !important; }
.eco-primary.elementor-button  { background-color: var(--color-gold) !important; color: var(--color-forest) !important; border: none !important; }
.eco-secondary.elementor-button { background-color: transparent !important; color: var(--color-cream) !important; border: 1.5px solid rgba(255,255,255,0.35) !important; }

/* ================================================================
   GUTENBERG BLOCKS — EcoHoorn design system
   ================================================================ */

/* --- Hero section --- */
.eco-hero-section {
  background-color: var(--color-forest) !important;
  padding-top: 100px !important;
  padding-bottom: 60px !important;
  position: relative;
  overflow: visible;
  border-radius: 28px !important;
}

/* Gutenberg constrained layout: zijdelingse padding voor alle eco-secties */
.eco-hero-section,
.eco-section-cream,
.eco-section-sand,
.eco-section-white,
.eco-section-forest {
  padding-left: clamp(20px, 5vw, 60px) !important;
  padding-right: clamp(20px, 5vw, 60px) !important;
  box-sizing: border-box;
}

/* Hero kolommen: 50/50 verdeling met ruimte tussen */
.eco-hero-section .wp-block-columns {
  gap: clamp(32px, 5vw, 60px) !important;
  align-items: center !important;
}
.eco-hero-section .wp-block-columns .wp-block-column {
  flex-basis: calc(50% - 24px) !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  min-width: 0;
}

.eco-hero-section h1,
.eco-hero-section .wp-block-heading[data-type="core/heading"] {
  color: var(--color-cream) !important;
  font-family: var(--font-sans) !important;
  font-size: 3.25rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 20px !important;
}
.eco-hero-section h2 {
  color: var(--color-cream) !important;
  font-family: var(--font-sans) !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}
.eco-hero-section h3 {
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--font-sans) !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin-top: 0 !important;
}
.eco-hero-section p {
  color: rgba(255, 255, 255, 0.72) !important;
  font-family: var(--font-sans) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  max-width: 540px;
}

/* Links binnen donkere secties (forest-achtergrond): standaard linkkleur is
   forest-groen en dus onzichtbaar op een forest-groene achtergrond. Goud,
   met een eigen border-bottom i.p.v. text-decoration voor een nettere lijn. */
.eco-hero-section p a,
.eco-section-forest p a {
  color: var(--color-gold) !important;
  text-decoration: none !important;
  border-bottom: 1.5px solid rgba(201, 162, 106, 0.5) !important;
  padding-bottom: 1px;
  transition: border-color 150ms ease, color 150ms ease;
}
.eco-hero-section p a:hover,
.eco-section-forest p a:hover {
  color: var(--color-gold-light) !important;
  border-color: var(--color-gold-light) !important;
}

/* Hero afbeelding rechts */
.eco-hero-section .wp-block-image img {
  border-radius: 16px !important;
  object-fit: cover;
  width: 100%;
}

/* Wave divider */
.eco-hero-wave {
  display: block;
  background-color: var(--color-forest);
  line-height: 0;
  margin-top: -1px;
}
.eco-hero-wave svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Gutenberg knoppen --- */
.eco-btn-primary .wp-block-button__link,
.eco-btn-primary .wp-block-button__link:visited {
  background-color: var(--color-gold) !important;
  color: var(--color-forest) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 28px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background-color 200ms ease-in-out !important;
}
.eco-btn-primary .wp-block-button__link:hover {
  background-color: var(--color-gold-dark) !important;
  color: var(--color-forest) !important;
}

.eco-btn-secondary .wp-block-button__link,
.eco-btn-secondary .wp-block-button__link:visited {
  background-color: transparent !important;
  color: var(--color-cream) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 28px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: border-color 200ms ease-in-out !important;
}
.eco-btn-secondary .wp-block-button__link:hover {
  border-color: rgba(255, 255, 255, 0.85) !important;
}

.eco-btn-forest .wp-block-button__link,
.eco-btn-forest .wp-block-button__link:visited {
  background-color: var(--color-forest) !important;
  color: var(--color-cream) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 28px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background-color 200ms ease-in-out !important;
}
.eco-btn-forest .wp-block-button__link:hover {
  background-color: var(--color-forest-dark) !important;
}

.eco-btn-gold .wp-block-button__link,
.eco-btn-gold .wp-block-button__link:visited {
  background-color: var(--color-gold) !important;
  color: var(--color-forest) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 15px 32px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background-color 200ms ease-in-out !important;
}
.eco-btn-gold .wp-block-button__link:hover {
  background-color: var(--color-gold-dark) !important;
}

/* --- Secties --- */
.eco-section-cream {
  background-color: var(--color-cream) !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.eco-section-sand {
  background-color: var(--color-sand) !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.eco-section-white {
  background-color: var(--color-cream) !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.eco-section-forest {
  background-color: var(--color-forest) !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
  text-align: center;
  border-radius: 28px !important;
}
.eco-section-forest h2,
.eco-section-forest h3 {
  color: var(--color-cream) !important;
  font-family: var(--font-sans) !important;
}
.eco-section-forest p,
.eco-section-forest li {
  color: rgba(245, 244, 239, 0.72) !important;
}

/* --- Kaarten (feature cards) --- */
.eco-card {
  background-color: var(--color-sand) !important;
  border-radius: 16px !important;
  padding: 28px 24px !important;
  box-shadow: var(--shadow-md) !important;
  transition: box-shadow 200ms ease, transform 200ms ease;
  position: relative;
}
/* Kaarten waar alleen de titel een link is (bijv. "Verder kijken" op Home):
   hele kaart klikbaar maken via een onzichtbare laag over de titel-link heen,
   zonder de HTML-structuur te veranderen. Cursor + klik werken overal op de kaart. */
.eco-card h3.wp-block-heading a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.eco-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px);
}
.eco-card h3 {
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--color-forest) !important;
  margin: 8px 0 8px !important;
}
.eco-card p {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  color: var(--fg-muted) !important;
  line-height: 1.6 !important;
}
.eco-card-link,
.eco-card a {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-slate) !important;
  text-decoration: none !important;
}
.eco-card a:hover {
  color: var(--color-forest) !important;
}

/* --- Icoon-wrap (voor feature cards) --- */
.eco-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--color-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 12px;
}


/* --- UI-iconen (v4.8) ---
   De SVG's die functions.php uitschrijft dragen alleen klassen, geen kleur.
   Het verven gebeurt hier met de tokens, zodat de paletdiscipline overeind
   blijft: nul rauwe hexwaarden buiten :root.

   De vormen komen uit icons/eco-icons.json in de designbundel. Teken je een
   icoon opnieuw, werk dan zowel functions.php als EcoIcon.jsx bij. */
.eco-icon {
  display: block;
  flex-shrink: 0;
}
.eco-icon__sage       { fill: var(--color-sage);  stroke: var(--color-forest); }
.eco-icon__gold       { fill: var(--color-gold);  stroke: var(--color-forest); }
.eco-icon__cream      { fill: var(--color-cream); stroke: var(--color-forest); }
.eco-icon__lijn       { fill: none;               stroke: var(--color-forest); }
.eco-icon__lijn-sage  { fill: none;               stroke: var(--color-sage); }
.eco-icon__lijn-cream { fill: none;               stroke: var(--color-cream); }
.eco-icon__punt       { fill: var(--color-gold);  stroke: none; }

/* Icoonblok boven een kaarttitel. Het blok is flex en dus blok-niveau, waardoor
   de koptekst vanzelf onder het icoon valt in plaats van ernaast. */
.eco-icon-wrap--kop {
  display: flex;
  width: 44px;   /* iets kleiner dan de 48px van .eco-icon-wrap: de kaarttitel is 16px */
  height: 44px;
  margin-bottom: 10px;
}

/* Het icoonblok is altijd cream, ook op een forest sectie: de forest omtrek van
   de iconen moet leesbaar blijven. */
.eco-section-forest .eco-icon-wrap {
  background-color: var(--color-cream);
}

/* --- Label / eyebrow tekst — pill stijl (overeenkomt met mockup) --- */
.eco-label {
  display: inline-flex !important;
  /* Blocksy zet `width: var(--theme-block-width)` op ELK direct kind van
     een Gutenberg-groep met constrained layout. Op een inline-flex pil
     betekent dat een vaste breedte van de hele kolom, dus een pil van
     1200px om twee woorden heen. Deze regel zet dat terug naar
     shrink-to-fit. Stond er al mis voor v5.0, maar viel pas op toen de
     secties paginabreed werden. */
  width: auto !important;
  align-items: center;
  gap: 6px;
  background: rgba(201, 162, 106, 0.18) !important;
  border-radius: var(--radius-pill) !important;
  padding: 5px 14px !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-gold) !important;
  margin-bottom: 20px !important;
}
.eco-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-gold);
  flex-shrink: 0;
}

/* --- Sectie-headings — consistent met design --- */
.eco-section-cream h2.wp-block-heading,
.eco-section-sand h2.wp-block-heading,
.eco-section-white h2.wp-block-heading {
  font-family: var(--font-sans) !important;
  font-size: clamp(1.75rem, 4vw, 2.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-forest) !important;
  margin-top: 8px !important;
  margin-bottom: 16px !important;
}
.eco-section-cream h3.wp-block-heading,
.eco-section-sand h3.wp-block-heading,
.eco-section-white h3.wp-block-heading {
  font-family: var(--font-sans) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--color-forest) !important;
  margin-bottom: 8px !important;
}
.eco-section-forest h2.wp-block-heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
}

/* --- Kaart-kolommen: gap en volledige hoogte --- */
.wp-block-columns:has(> .eco-card) {
  gap: 20px !important;
  align-items: stretch !important;
}
.eco-card.wp-block-column {
  box-sizing: border-box !important;
  align-self: stretch !important;
}

/* --- Body p in secties --- */
.eco-section-cream p.wp-block-paragraph,
.eco-section-sand p.wp-block-paragraph,
.eco-section-white p.wp-block-paragraph {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--fg-muted) !important;
}
.eco-section-forest p.wp-block-paragraph {
  font-family: var(--font-sans) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: rgba(245, 244, 239, 0.72) !important;
  max-width: 540px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Twee-kolom layout --- */
.eco-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* --- Stappen/process lijst --- */
.eco-steps ol {
  counter-reset: steps;
  list-style: none;
  padding: 0;
}
.eco-steps ol li {
  position: relative;
  padding-left: 44px;
  margin-bottom: 20px;
  font-family: var(--font-sans);
  color: var(--color-forest);
}
.eco-steps ol li::before {
  content: counter(steps);
  counter-increment: steps;
  position: absolute;
  left: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  background-color: var(--color-gold);
  color: var(--color-forest);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

/* --- Contact formulier stijl — gesynchroniseerd met DesignSync components-inputs --- */

/* CF7 veld-wrapper <p> tags opruimen */
.eco-contact-form .wpcf7 p {
  margin-bottom: 16px !important;
}
.eco-contact-form .wpcf7 p:last-child {
  margin-bottom: 0 !important;
}

/* Labels */
.eco-contact-form label,
.eco-contact-form .wpcf7 label {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--color-forest) !important;
  display: block;
  margin-bottom: 5px !important;
  white-space: normal;
}

/* Invoervelden — tekst, email, tel, textarea, select */
.eco-contact-form .wpcf7 input[type="text"],
.eco-contact-form .wpcf7 input[type="email"],
.eco-contact-form .wpcf7 input[type="tel"],
.eco-contact-form .wpcf7 input[type="url"],
.eco-contact-form .wpcf7 input[type="number"],
.eco-contact-form .wpcf7 textarea,
.eco-contact-form .wpcf7 select {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  color: var(--color-forest) !important;
  background-color: var(--color-cream) !important;
  border: 1.5px solid var(--color-sand-dark) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  width: 100% !important;
  outline: none !important;
  transition: border-color 200ms ease !important;
  box-sizing: border-box !important;
  line-height: 1.5 !important;
}

.eco-contact-form .wpcf7 input:focus,
.eco-contact-form .wpcf7 textarea:focus,
.eco-contact-form .wpcf7 select:focus {
  border-color: var(--color-forest) !important;
  outline: none !important;
}

.eco-contact-form .wpcf7 input::placeholder,
.eco-contact-form .wpcf7 textarea::placeholder {
  color: var(--fg-muted) !important;
}

/* Checkboxes en radio — fix gebroken word-wrap */
.eco-contact-form .wpcf7-checkbox,
.eco-contact-form .wpcf7-radio {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 20px !important;
}
.eco-contact-form .wpcf7-list-item {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.eco-contact-form .wpcf7-list-item label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  cursor: pointer;
}
.eco-contact-form .wpcf7-list-item input[type="checkbox"],
.eco-contact-form .wpcf7-list-item input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  border: 1.5px solid var(--color-sand-dark) !important;
  cursor: pointer;
  accent-color: var(--color-forest);
}

/* Submit-knop — gouden pill zoals eco-btn-primary */
.eco-contact-form .wpcf7 input[type="submit"] {
  background-color: var(--color-gold) !important;
  color: var(--color-forest) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 32px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 200ms ease !important;
  width: auto !important;
  display: inline-block !important;
  margin-top: 8px !important;
}
.eco-contact-form .wpcf7 input[type="submit"]:hover {
  background-color: var(--color-gold-dark) !important;
}

/* Response berichten */
.eco-contact-form .wpcf7-response-output {
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  margin-top: 16px !important;
  border-width: 1.5px !important;
}

/* ================================================================
   RESPONSIVE AANPASSINGEN
   ================================================================ */

/* Tablet (max 900px) */
@media (max-width: 900px) {
  .eco-hero-section .wp-block-columns .wp-block-column {
    flex-basis: 100% !important;
    flex-grow: 1 !important;
  }
  .eco-hero-section .wp-block-columns {
    flex-wrap: wrap !important;
    gap: 32px !important;
  }
}

/* Mobiel (max 768px) */
@media (max-width: 768px) {
  .eco-hero-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .eco-hero-section h1 {
    font-size: 2.25rem !important;
    text-align: center;
  }
  .eco-hero-section p {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .eco-hero-section .wp-block-columns {
    flex-direction: column !important;
    align-items: center !important;
  }
  /* Afbeelding eerst (order:1), tekst eronder (order:2) — conform mockup */
  .eco-hero-section .wp-block-columns .wp-block-column:first-child {
    order: 2 !important;
    width: 100% !important;
    flex-basis: 100% !important;
    min-width: 100% !important;
  }
  .eco-hero-section .wp-block-columns .wp-block-column:last-child {
    order: 1 !important;
    width: 100% !important;
    flex-basis: 100% !important;
    min-width: 100% !important;
  }
  /* Knoppen stapelen op mobiel */
  .eco-hero-section .wp-block-buttons {
    flex-direction: column !important;
    align-items: center !important;
  }
  .eco-hero-section .wp-block-button {
    width: 100% !important;
    max-width: 320px;
    text-align: center;
  }
  .eco-hero-section .wp-block-button__link {
    display: block !important;
    width: 100% !important;
  }
  .eco-section-cream,
  .eco-section-forest,
  .eco-section-sand,
  .eco-section-white {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .eco-cols-2 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* Kaarten stapelen op mobiel */
  .wp-block-columns:has(> .eco-card) {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .eco-card.wp-block-column {
    flex-basis: 100% !important;
    min-width: 100% !important;
  }
  /* Navigatie (Blocksy mobiel) */
  .ct-header .ct-menu {
    gap: 16px !important;
  }
}

/* ================================================================
   PORTFOLIO-PROJECTPAGINA'S (single elemenfolio, bijv. /portfolio/slaapkamer-stucen/)
   Was onbewerkt Blocksy-standaard: kale titel, ongestylede categorie-labels,
   vierkante galerijfoto's zonder afronding of ruimte.
   ================================================================ */
body.single-elemenfolio .hero-section {
  background-color: var(--color-cream) !important;
  padding: 48px clamp(20px, 5vw, 60px) 8px !important;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}
body.single-elemenfolio .entry-header h1.page-title {
  color: var(--color-forest) !important;
  font-family: var(--font-sans) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 14px !important;
}
body.single-elemenfolio .entry-meta {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-family: var(--font-sans) !important;
}
body.single-elemenfolio .entry-meta .meta-author {
  display: none;
}
body.single-elemenfolio .entry-meta .meta-categories a,
body.single-elemenfolio .entry-meta a[class*="ct-term-"] {
  background: rgba(201, 162, 106, 0.18) !important;
  color: var(--color-gold-dark) !important;
  border-radius: var(--radius-pill) !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
}
body.single-elemenfolio .entry-meta .meta-date,
body.single-elemenfolio .entry-meta .ct-meta-element-date {
  color: var(--fg-muted) !important;
  font-size: 13px !important;
}
body.single-elemenfolio .entry-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px) 24px !important;
  box-sizing: border-box;
}
body.single-elemenfolio .entry-content > p.wp-block-paragraph:first-of-type {
  font-family: var(--font-sans) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--fg-muted) !important;
  max-width: 720px;
  margin-bottom: 28px !important;
}
body.single-elemenfolio .wp-block-gallery {
  gap: 16px !important;
}
body.single-elemenfolio .wp-block-gallery .wp-block-image img {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
body.single-elemenfolio .wp-block-gallery .wp-block-image img:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px);
}

/* Terugknop naar Mijn werk, toegevoegd via functions.php content-filter */
.eco-portfolio-back {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px) 60px !important;
  box-sizing: border-box;
}
.eco-portfolio-back a {
  display: inline-block;
  color: var(--color-slate) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.eco-portfolio-back a:hover {
  color: var(--color-forest) !important;
}

/* ================================================================
   KENNISBANK / BLOG-ARCHIEF — EcoHoorn kaartstijl
   (was onbewerkt Blocksy-standaard: afwijkende kleuren t.o.v. de rest van de site)
   ================================================================ */
.entries[data-archive] {
  gap: 24px !important;
}
.entry-card {
  background-color: var(--color-sand) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 20px !important;
  border: none !important;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.entry-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px);
}
/* Foto bewust breder dan de tekstkolommen: laat de afbeelding tot de
   kaartranden lopen (bleed), terwijl titel/tekst binnen de padding blijven */
.entry-card .ct-media-container {
  display: block;
  margin: 14px -20px !important;
  width: calc(100% + 40px) !important;
  max-width: none !important;
  border-radius: 0 !important;
  overflow: hidden;
}
.entry-card .ct-media-container img {
  width: 100% !important;
  height: auto;
  object-fit: cover;
  display: block;
}
.entry-card .entry-title,
.entry-card .entry-title a {
  font-family: var(--font-sans) !important;
  color: var(--color-forest) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
.entry-card .entry-title a:hover {
  color: var(--color-gold-dark) !important;
}
.entry-card .entry-excerpt p {
  font-family: var(--font-sans) !important;
  color: var(--fg-muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
/* Categorie-badges — Blocksy geeft elke term standaard een eigen (vaak afwijkende) kleur;
   hier altijd overschreven naar de gouden eco-label stijl */
.entry-meta .meta-categories a,
.entry-meta a[class*="ct-term-"] {
  background: rgba(201, 162, 106, 0.18) !important;
  color: var(--color-gold-dark) !important;
  border-radius: var(--radius-pill) !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
}
.entry-meta .meta-author a,
.entry-meta .meta-date,
.entry-meta .ct-meta-element-date,
.entry-meta .ct-meta-element-author {
  color: var(--fg-muted) !important;
  font-size: 12px !important;
  font-family: var(--font-sans) !important;
}

/* ================================================================
   PAGINATITEL-DUPLICATIE — Blocksy print automatisch een eigen
   h1.page-title bóven de content, terwijl deze pagina's al hun eigen
   H1 in de content hebben. Voorkomt dubbele titels.
   (Nieuwe pagina met eigen content-H1? Voeg het page-id hieronder toe.)
   ================================================================ */
body.page-id-13 h1.page-title,
body.page-id-14 h1.page-title,
body.page-id-15 h1.page-title,
body.page-id-16 h1.page-title,
body.page-id-17 h1.page-title,
body.page-id-18 h1.page-title,
body.page-id-32 h1.page-title,
body.page-id-59 h1.page-title,
body.page-id-657 h1.page-title,
body.page-id-693 h1.page-title {
  display: none !important;
}

/* ================================================================
   ERVARINGEN — reviewkaarten (sterren + citaat + datum)
   ================================================================ */
.eco-stars {
  color: var(--color-gold) !important;
  font-size: 18px !important;
  letter-spacing: 3px;
  margin-bottom: 10px !important;
}
.eco-review-date {
  font-size: 12px !important;
  color: var(--fg-muted) !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}
.eco-review-text.eco-review-collapsed {
  max-height: 4.6em;
  overflow: hidden;
  position: relative;
}
.eco-review-text.eco-review-collapsed::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1.6em;
  background: linear-gradient(to bottom, rgba(231,229,223,0), var(--color-sand));
}
.eco-review-text.eco-review-expanded {
  max-height: none;
}
.eco-review-toggle {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 8px !important;
  display: inline-block;
  color: var(--color-slate) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  text-decoration: underline;
}
.eco-review-toggle:hover {
  color: var(--color-forest) !important;
}

/* ================================================================
   ONS WERK — eigen portfolio-grid (Powerfolio/Elementor is eraf;
   pagina is nu een gewone WordPress-pagina). De markup komt uit de
   [eco_portfolio]-shortcode in functions.php, samen met de filter-JS.
   ================================================================ */

.eco-portfolio-filter-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 20px 0 8px;
}
.eco-portfolio-filter-label:first-of-type {
  margin-top: 24px;
}
.eco-portfolio-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 8px;
}
.eco-portfolio-filter:last-of-type {
  margin-bottom: 32px;
}
.eco-portfolio-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  background-color: var(--color-sand);
  color: var(--color-forest);
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.eco-portfolio-filter-btn:hover {
  background-color: var(--color-gold-light);
}
.eco-portfolio-filter-btn.is-active {
  background-color: var(--color-gold);
  color: var(--color-forest);
}

.eco-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 900px) {
  .eco-portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .eco-portfolio-grid { grid-template-columns: 1fr; }
}

.eco-portfolio-item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.eco-portfolio-item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.eco-portfolio-item.eco-portfolio-hidden {
  display: none;
}
.eco-portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.eco-portfolio-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(38,57,40,0.88), rgba(38,57,40,0) 75%);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eco-portfolio-title {
  color: var(--color-cream);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
}
.eco-portfolio-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.eco-portfolio-cat {
  background: transparent;
  color: var(--color-cream);
  border: 1px solid rgba(245, 244, 239, 0.45);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ================================================================
   AANPAK-LABELS (Ons Werk)

   Vier aanpakken, alle vier binnen de zes huisstijlkleuren:

     bouwbiologisch  forest #263928  + cream tekst   11,2:1
     biobased        sage   #5c7651  + cream tekst    4,6:1
     deels-biobased  goud   #c9a26a  + forest tekst   5,2:1
     traditioneel    zand-donker #cdc9be + forest     7,5:1

   SLATE IS HIER BEWUST NIET GEBRUIKT. Als pilvulling haalt #5f8f99
   maar 3,2:1 met cream tekst en 3,5:1 met forest tekst. Allebei
   onder AA voor tekst van deze grootte. Slate blijft waar het
   designsysteem hem had staan: links en info. Zoek dus geen
   "vergeten" vierde merkkleur, die is er niet.

   GOUD draagt nooit tekst op een licht vlak (2,2:1 op cream) maar
   werkt uitstekend als vulling MET forest tekst. Vandaar dat goud
   hier een achtergrond is en geen tekstkleur.

   Actief en inactief leunen niet op kleur alleen: de actieve knop
   krijgt er een vinkje bij en aria-pressed="true". Iemand die
   kleuren slecht onderscheidt ziet het verschil dus ook.

   Een aanpak-term zonder eigen regel hieronder valt terug op
   zand-donker met forest tekst. Die blijft leesbaar, dus een nieuwe
   term breekt nooit iets; hij krijgt alleen nog geen eigen kleur.
   ================================================================ */

/* ── De filterrij "Aanpak" ─────────────────────────────────────── */
.eco-portfolio-filter[data-filter-group="aanpak"] .eco-portfolio-filter-btn:hover {
  background-color: var(--color-sand-dark);
}

/* Het vinkje op de actieve knop, getekend met twee randen. */
.eco-portfolio-filter[data-filter-group="aanpak"] .eco-portfolio-filter-btn.is-active::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 9px;
  margin-bottom: 2px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.eco-portfolio-filter[data-filter-group="aanpak"] .eco-portfolio-filter-btn.is-active {
  background-color: var(--color-sand-dark);
  color: var(--color-forest);
}

/* "Alles" krijgt geen eigen merkkleur: dat zou suggereren dat het
   ook een aanpak is. Alleen een rand, via inset box-shadow zodat de
   knop niet verspringt. */
.eco-portfolio-filter[data-filter-group="aanpak"] .eco-portfolio-filter-btn[data-filter="all"].is-active {
  background-color: transparent;
  color: var(--color-forest);
  box-shadow: inset 0 0 0 2px var(--color-forest);
}

.eco-portfolio-filter[data-filter-group="aanpak"] .eco-portfolio-filter-btn[data-filter="bouwbiologisch"].is-active {
  background-color: var(--color-forest);
  color: var(--color-cream);
}
.eco-portfolio-filter[data-filter-group="aanpak"] .eco-portfolio-filter-btn[data-filter="biobased"].is-active {
  background-color: var(--color-sage);
  color: var(--color-cream);
}
.eco-portfolio-filter[data-filter-group="aanpak"] .eco-portfolio-filter-btn[data-filter="deels-biobased"].is-active {
  background-color: var(--color-gold);
  color: var(--color-forest);
}
.eco-portfolio-filter[data-filter-group="aanpak"] .eco-portfolio-filter-btn[data-filter="traditioneel"].is-active {
  background-color: var(--color-sand-dark);
  color: var(--color-forest);
}

/* ── Het label op de tegel ─────────────────────────────────────── */
/* De vulling is dekkend, want de tegel is een foto en die kennen we
   niet vooraf. Het lichte randje maakt het forest-label los van de
   donkere verloopband onderaan de tegel; op de andere drie is het
   een rustig randje dat de pil van de foto scheidt. */
.eco-portfolio-aanpak {
  background: var(--color-sand-dark);
  color: var(--color-forest);
  border: 1px solid rgba(245, 244, 239, 0.35);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.eco-portfolio-aanpak[data-aanpak="bouwbiologisch"] {
  background: var(--color-forest);
  color: var(--color-cream);
}
.eco-portfolio-aanpak[data-aanpak="biobased"] {
  background: var(--color-sage);
  color: var(--color-cream);
}
.eco-portfolio-aanpak[data-aanpak="deels-biobased"] {
  background: var(--color-gold);
  color: var(--color-forest);
}
.eco-portfolio-aanpak[data-aanpak="traditioneel"] {
  background: var(--color-sand-dark);
  color: var(--color-forest);
}

/* ================================================================
   PAGINABREDE SECTIES (v5.0, herzien in v5.1)
   ----------------------------------------------------------------
   De eco-secties waren afgeronde blokken binnen een kolom. Nu loopt
   de ACHTERGROND van rand tot rand, terwijl de INHOUD in de kolom
   blijft, zoals op /afstuderen.

   Waarom zo simpel: de contentwrapper .entry-content is op deze
   pagina's al precies zo breed als de header (gemeten op 9 pagina's,
   desktop en mobiel). De secties werden alleen smaller gemaakt door
   Blocksy (width: var(--theme-block-width)) en WordPress (max-width
   + margin:auto voor kinderen van een constrained layout). Die twee
   zetten we hier uit. v5.0 rekende met de schermbreedte (100vw /
   gemeten --eco-vw); dat gaf op sommige apparaten een paar pixels
   verschil met de header. Deze versie hangt nergens van af.

   De inhoud blijft vanzelf in de kolom: elke sectie is zelf een
   constrained layout, en WordPress centreert en begrenst haar
   kinderen op de breedte die in de editor is ingesteld.
   ================================================================ */
.entry-content > .eco-hero-section,
.entry-content > .eco-section-cream,
.entry-content > .eco-section-sand,
.entry-content > .eco-section-white,
.entry-content > .eco-section-forest {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Geen ruimte tussen de banen: anders zie je de paginakleur ertussendoor. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

/* ----------------------------------------------------------------
   GEEN CREMESTROOK ROND DE :is(.eco-hero-section, .eco-section-cream, .eco-section-sand, .eco-section-white, .eco-section-forest)
   Blocksy geeft de contentwrapper .ct-container-full 60px padding
   boven en onder. Zolang de secties binnen de container stonden zag
   je dat als normale witruimte, maar nu de banen paginabreed zijn
   levert het een crèmekleurige strook op tussen de header en de
   eerste baan (en onder de laatste). Die padding gaat er daarom af,
   maar ALLEEN op pagina's die echt met zo'n baan beginnen of eindigen
   — blogartikelen en de kennisbank houden hun normale witruimte.
   ---------------------------------------------------------------- */
.ct-container-full:has(> article > .entry-content > :is(.eco-hero-section, .eco-section-cream, .eco-section-sand, .eco-section-white, .eco-section-forest):first-child) {
  padding-top: 0 !important;
}
.ct-container-full:has(> article > .entry-content > :is(.eco-hero-section, .eco-section-cream, .eco-section-sand, .eco-section-white, .eco-section-forest):last-child) {
  padding-bottom: 0 !important;
}

/* Het tweede deel van dezelfde strook: Blocksy zet boven de inhoud een
   paginatitelblok (.hero-section) met standaard 40px ondermarge. De
   titel zelf is op deze pagina's verborgen (0px hoog), maar de marge
   bleef staan en schoof door de container heen naar boven — 40px
   creme tussen header en eerste baan, op alle pagina's gemeten. */
article:has(> .entry-content > :is(.eco-hero-section, .eco-section-cream, .eco-section-sand, .eco-section-white, .eco-section-forest):first-child) > .hero-section {
  margin-bottom: 0 !important;
}

/* ----------------------------------------------------------------
   ALLES OP EEN LINKERKANT IN LINKSUITGELIJNDE SECTIES
   WordPress centreert elk kind van een sectie met margin:auto. Voor
   elementen zo breed als de kolom is dat prima, maar een smaller
   element (de pil, de 540px-alinea in de hero) belandt zo midden in
   de kolom, en de pil zelf, als inline-element, zelfs tegen de rand.
   Gemeten op Contact: pil op 60px, kop op 193px, alinea op 523px.
   Hier zetten we elk kind op de linkerkant van de kolom. --eco-kolom
   komt uit functions.php (per sectie ingesteld in de editor).
   Forest-secties doen niet mee: die zijn bewust gecentreerd.
   ---------------------------------------------------------------- */
.entry-content > :is(.eco-hero-section, .eco-section-cream, .eco-section-sand, .eco-section-white) > :not(.alignfull):not(.alignwide):not(style) {
  margin-left: max(0px, calc((100% - var(--eco-kolom, 1200px)) / 2)) !important;
  margin-right: auto !important;
}

/* Op mobiel centreert het thema kop en tekst in de hero (zie de
   @media-regel bij 768px). De pil moet dan mee, anders staat die als
   enige links. De dubbele selector is nodig om de uitlijnregel
   hierboven (die zwaarder weegt) te overstemmen. */
@media (max-width: 768px) {
  .entry-content > .eco-hero-section > .eco-label:not(.alignfull):not(.alignwide),
  .eco-hero-section .wp-block-column > .eco-label {
    display: flex !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ================================================================
   HEADER DONKERGROEN (v5.0)
   ----------------------------------------------------------------
   De kleuren zelf staan hierboven bij BLOCKSY HEADER, op de plek waar
   ze altijd al stonden — die zijn van creme naar forest omgezet.
   Hieronder alleen wat er NIEUW bij komt kijken zodra die balk donker
   is: het uitklapmenu, en de hamburger op mobiel.

   Let op: het logo is donkergroen en valt weg op deze achtergrond.
   Zie logo/ bij dit thema voor een lichte versie om te uploaden.
   ================================================================ */

/* Uitklapmenu (Diensten) - anders een witte doos onder een groene balk */
.ct-header .sub-menu {
  background-color: var(--color-forest-dark) !important;
  border: 1px solid rgba(245, 244, 239, 0.12) !important;
}
.ct-header .sub-menu a,
.ct-header .sub-menu .ct-menu-link {
  color: rgba(245, 244, 239, 0.8) !important;
}
.ct-header .sub-menu a:hover,
.ct-header .sub-menu .ct-menu-link:hover {
  color: var(--color-gold) !important;
}

/* Hamburger op mobiel */
.ct-header .ct-header-trigger,
.ct-header [data-id="trigger"] {
  color: var(--color-cream) !important;
  --theme-icon-color: var(--color-cream);
  --theme-icon-hover-color: var(--color-gold);
}