/*
Theme Name: Econox Group
Theme URI: https://econox-group.nl
Author: Econox Group
Author URI: https://econox-group.nl
Description: Maatwerk thema voor Econox Group — moederorganisatie van Econox, Econox Belgium, MaxiCool, Ventilatieland en Ventigo. Bevat nieuws, vacatures (met eigen contenttype), merkenoverzicht en een NL/EN/FR taalwisselaar.
Version: 1.28.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: econox-group
Tags: business, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Variabelen (huisstijl Econox Group)
   ========================================================================== */
:root{
  --group-primary:#2c394b;
  --group-primary-dark:#1e2631;
  --group-accent:#e94f33;
  --group-accent-dark:#7a2014;
  --group-slate:#5b7086;
  --group-light:#e2e8f0;
  --group-peach:#e5a988;
  --group-cream:#f7f5f0;

  /* Merkkleuren (alleen voor merkkaarten) */
  --econox-red:#e30613;
  --econox-black:#111110;
  --vl-blue:#0092d3;
  --vl-darkblue:#1d3e73;
  --vl-orange:#f6911e;
  --ventigo-darkblue:#21457a;
  --ventigo-blue:#0091e2;
  --maxicool-darkblue:#274972;
  --maxicool-lightblue:#abd1ff;

  --bg:var(--group-cream);
  --bg-soft:var(--group-light);
}

/* ==========================================================================
   2. Basis
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--group-primary);
  background:var(--bg);
  line-height:1.6;
}

/* Footer altijd onderaan, ook op korte pagina's */
.site-wrapper{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.site-content{flex:1 0 auto;}
.site-footer{flex-shrink:0;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;height:auto;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* Het hidden-attribuut moet altijd winnen.
   Zonder deze regel bleef een verborgen vacaturekaart zichtbaar: .job-card heeft
   display:flex, en een auteursregel weegt zwaarder dan de [hidden]-regel van de
   browser zelf. Dit geldt voor elk element dat via JavaScript verborgen wordt. */
[hidden]{display:none!important;}

/* Toegankelijkheid: skip-link */
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--group-primary);color:#fff;
  padding:10px 18px;z-index:9999;font-weight:700;
}
.skip-link:focus{left:8px;top:8px;}

.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important;
}

/* WordPress admin bar correctie.
   Boven 600px is de adminbalk position:fixed -> header moet 32px zakken.
   Op/onder 600px is de balk position:absolute (scrollt weg) -> geen offset. */
body.admin-bar .site-header{top:32px;}
@media screen and (max-width:600px){
  body.admin-bar .site-header{top:0;}
}

/* ==========================================================================
   3. Prototype-melding (optioneel, uit te zetten in Customizer)
   ========================================================================== */
.prototype-flag{
  background:var(--group-primary);
  color:#fff;text-align:center;font-size:13px;padding:6px 12px;letter-spacing:.3px;
}

/* ==========================================================================
   4. Header
   ========================================================================== */
.site-header{
  position:relative;z-index:50;
  background:#fff;border-bottom:1px solid #eee;
  transition:padding .25s ease;
}
body.has-sticky-header .site-header{
  position:sticky;top:0;
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 0;transition:padding .25s ease;gap:20px;
}
.nav-right{
  display:flex;align-items:center;gap:16px;flex-shrink:0;
}
.site-header.scrolled .nav{padding:12px 0;}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.logo-img{height:60px;width:auto;display:block;transition:height .25s ease;}
.site-header.scrolled .logo-img{height:36px;}
.logo-text{font-size:20px;font-weight:800;color:var(--group-primary);line-height:1.15;}
.logo-text small{
  display:block;font-size:10px;font-weight:600;color:var(--group-slate);
  letter-spacing:3px;text-transform:uppercase;
}

nav.links{display:flex;gap:32px;font-weight:600;font-size:15px;}
nav.links > ul{display:flex;gap:32px;align-items:center;}
nav.links li{position:relative;}
nav.links a{padding:6px 0;border-bottom:2px solid transparent;transition:.2s;display:inline-block;}

/* ---- Uitklapmenu ---- */
nav.links .sub-menu{
  display:block;
  position:absolute;top:100%;left:-18px;
  min-width:230px;
  background:#fff;
  border:1px solid var(--group-light);
  border-radius:8px;
  box-shadow:0 14px 34px rgba(44,57,75,.13);
  padding:8px 0;
  margin:10px 0 0;
  flex-direction:column;
  gap:0;
  /* Dichtgeklapt, maar wel bereikbaar voor schermlezers en toetsenbord. */
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index:60;
}
nav.links li:hover > .sub-menu,
nav.links li:focus-within > .sub-menu,
nav.links li.submenu-open > .sub-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
/* Onzichtbare brug, zodat het menu niet dichtklapt als je ernaartoe beweegt. */
nav.links li.menu-item-has-children::after{
  content:"";position:absolute;top:100%;left:0;right:0;height:12px;
}
nav.links .sub-menu li{width:100%;}

/* ---- Derde niveau: schuift uit naast het tweede ----
   Het paneel begint 9px boven het item (8px padding + 1px rand van het paneel),
   zodat de eerste regel precies gelijk staat met het item waar je op staat.
   Er zit géén ruimte tussen niveau 2 en 3: met een gat valt het menu dicht
   zodra je met de muis van het ene naar het andere beweegt. */
nav.links .sub-menu .sub-menu{
  top:-9px;left:100%;
  margin:0;
  transform:translateX(-6px);
}
nav.links .sub-menu li:hover > .sub-menu,
nav.links .sub-menu li:focus-within > .sub-menu,
nav.links .sub-menu li.submenu-open > .sub-menu{
  transform:translateX(0);
}
/* De brug van niveau 1 wijst naar onderen; op niveau 2 zou die het paneel
   ten onrechte bedekken. Daar is hij niet nodig, want de panelen raken elkaar. */
nav.links .sub-menu li.menu-item-has-children::after{content:none;}

/* Te weinig ruimte rechts? Dan klapt het paneel naar links uit
   (klasse wordt door script.js gezet aan de hand van de vensterbreedte). */
nav.links .sub-menu li.klap-links > .sub-menu{
  left:auto;right:100%;
  transform:translateX(6px);
}
nav.links .sub-menu li.klap-links:hover > .sub-menu,
nav.links .sub-menu li.klap-links:focus-within > .sub-menu,
nav.links .sub-menu li.klap-links.submenu-open > .sub-menu{
  transform:translateX(0);
}

/* Pijltje van niveau 2 wijst naar de kant waar het paneel opengaat. */
nav.links .sub-menu .menu-item-has-children > a{
  display:flex;align-items:center;gap:10px;
}
nav.links .sub-menu .menu-item-has-children > a::after{
  content:"\f105"; /* chevron-right */
  margin-left:auto;
}
nav.links .sub-menu .menu-item-has-children.klap-links > a::after{
  content:"\f104"; /* chevron-left */
  margin-left:auto;
}
/* Niet meedraaien: bij een pijl naar de zijkant staat 180° verkeerd. */
nav.links .sub-menu .menu-item-has-children:hover > a::after,
nav.links .sub-menu .menu-item-has-children.submenu-open > a::after{
  transform:none;
}
nav.links .sub-menu a{
  display:block;width:100%;
  padding:9px 20px;
  border-bottom:none;
  font-weight:600;font-size:14.5px;
  color:var(--group-primary);
  white-space:nowrap;
}
nav.links .sub-menu a:hover{background:var(--bg-soft);color:var(--group-accent);}

/* Pijltje bij items met een submenu */
nav.links .menu-item-has-children > a::after{
  content:"\f107"; /* chevron-down */
  font-family:"Font Awesome 6 Free";font-weight:900;
  font-size:11px;margin-left:7px;display:inline-block;
  transition:transform .16s ease;
}
nav.links .menu-item-has-children:hover > a::after,
nav.links .menu-item-has-children.submenu-open > a::after{transform:rotate(180deg);}

/* Knop om op mobiel uit te klappen (wordt met JavaScript toegevoegd) */
.submenu-toggle{
  display:none;background:none;border:none;cursor:pointer;
  color:var(--group-slate);padding:6px 10px;font-size:14px;line-height:1;
}
nav.links a:hover,
nav.links li.current-menu-item > a,
nav.links li.current_page_item > a,
nav.links li.current-menu-parent > a{
  border-color:var(--group-accent);color:var(--group-accent);
}

.nav-cta{
  background:var(--group-accent);color:#fff;padding:10px 20px;border-radius:4px;
  font-weight:700;font-size:14px;transition:.2s;white-space:nowrap;
}
.nav-cta:hover{background:var(--group-accent-dark);color:#fff;}

.lang-switch{display:flex;border:1px solid var(--group-light);border-radius:20px;padding:2px;gap:2px;}
.lang-switch button{
  border:none;background:none;padding:6px 12px;border-radius:16px;font-weight:700;
  font-size:12.5px;cursor:pointer;color:var(--group-slate);transition:.15s;font-family:inherit;
}
.lang-switch button.active{background:var(--group-primary);color:#fff;}
.lang-switch a{
  padding:6px 12px;border-radius:16px;font-weight:700;font-size:12.5px;color:var(--group-slate);
}
.lang-switch a.active{background:var(--group-primary);color:#fff;}

.menu-toggle{
  display:none;font-size:22px;background:none;border:none;cursor:pointer;color:var(--group-primary);
}

/* ==========================================================================
   4b. Bollenpatroon (airflow)

   De motieven zijn kant-en-klaar aangeleverd en op inktgrens uitgesneden, dus ze
   vullen hun eigen kader volledig. Daardoor sluiten ze exact aan op de schermrand
   zonder dat de CSS iets hoeft te compenseren:
     assets/airflow-hero.svg    441 x 676   (lichtblauw)
     assets/airflow-footer.svg  922 x 316   (lichtblauw)
     assets/airflow-page.svg    382 x 1430  (oranje)
   ========================================================================== */
.ec-dots,
.ec-dots-bg{
  position:absolute;
  pointer-events:none;      /* nooit in de weg zitten van links */
  background-repeat:no-repeat;
}

/* ---- Homepage hero: tegen de rechterrand, tegen de onderkant ---- */
.hero .ec-dots{
  right:0;bottom:0;
  width:441px;height:676px;
  background-image:url('assets/airflow-hero.svg');
  background-position:right bottom;
  background-size:441px 676px;
  z-index:1;
}

/* ---- Footer: tegen de rechteronderhoek. Kleiner formaat, zodat het motief
        lager begint en de menu-items leesbaar blijven. ---- */
.site-footer .ec-dots{
  right:0;bottom:0;
  width:738px;height:253px;
  background-image:url('assets/airflow-footer.svg');
  background-position:right bottom;
  background-size:738px 253px;
  z-index:1;
}

/* ---- Pagina's: smalle strook rechts. Begint onder de bannerafbeelding
        (de bovenkant wordt per pagina meegegeven) en sluit rechts aan. ---- */
.ec-dots-bg{
  /* top = onderkant van de banner, bottom:0 = tot het einde van de pagina-inhoud.
     De afbeelding houdt zijn eigen formaat en wordt vanaf de bovenkant getoond; is
     de pagina korter, dan wordt het motief simpelweg afgekapt. Zo hoeft de hoogte
     nooit geraden te worden en blijft het beeld op elke pagina hetzelfde. */
  top:var(--ec-band-top,0);
  right:0;
  bottom:0;
  width:382px;
  min-height:420px;
  background-image:url('assets/airflow-page.svg');
  background-position:right top;
  background-size:382px 1430px;
  z-index:1;
}

/* Content ligt altijd boven het motief; alleen de bannerfoto blijft eronder. */
.site-content{position:relative;overflow:hidden;}
.site-content > section{position:relative;z-index:2;}
.site-content > section.page-hero{z-index:auto;}

/* ==========================================================================
   5. Hero (homepage)
   ========================================================================== */
.hero{
  --ec-hero-overlay:.88;
  background:var(--group-cream);color:var(--group-primary);
  padding:90px 0 80px;position:relative;overflow:hidden;
  display:flex;align-items:center;
}
/* Zachte oranje gloed — alleen zichtbaar zonder achtergrondfoto. */
.hero::after{
  content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;
  background:var(--group-accent);opacity:.1;border-radius:50%;
}
/* Donkere laag over de foto, zodat de tekst leesbaar blijft. */
body.has-hero-image .hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(
    100deg,
    rgba(30,38,49,var(--ec-hero-overlay)) 0%,
    rgba(44,57,75,calc(var(--ec-hero-overlay) * .9)) 100%
  );
  z-index:0;
}
body.has-hero-image .hero::after{display:none;}
body.has-hero-image .hero{color:#fff;}
body.has-hero-image .hero h1{color:#fff;}
body.has-hero-image .hero p{color:rgba(255,255,255,.86);}
body.has-hero-image .hero .stats{border-top-color:rgba(255,255,255,.22);}
body.has-hero-image .hero .stats span{color:#fff;}
body.has-hero-image .hero .btn-outline{border-color:#fff;color:#fff;}
body.has-hero-image .hero .btn-outline:hover{background:#fff;color:var(--group-primary);}

.hero .wrap{position:relative;z-index:2;width:100%;}

/* Bollenmotief: wit op de foto, subtiel donker zonder foto. */
.hero h1{font-size:44px;font-weight:800;max-width:720px;line-height:1.2;}
.hero h1 em{font-style:normal;color:var(--group-accent);}
.hero p{margin-top:18px;font-size:18px;max-width:600px;color:var(--group-slate);}
.hero-buttons{margin-top:32px;display:flex;gap:16px;flex-wrap:wrap;}

.btn{
  display:inline-block;padding:13px 26px;border-radius:4px;font-weight:700;font-size:15px;
  transition:.2s;border:none;cursor:pointer;font-family:inherit;
}
.btn-primary{background:var(--group-accent);color:#fff;}
.btn-primary:hover{background:var(--group-accent-dark);color:#fff;}
.btn-outline{border:2px solid var(--group-primary);color:var(--group-primary);background:transparent;}
.btn-outline:hover{background:var(--group-primary);color:#fff;}

/* ---- Knop op het vacature-overzicht: spring naar de vacatures ---- */
/* Links uitgelijnd op dezelfde rasterlijn als .wrap: daarmee staat de knop
   precies onder de linkerrand van het witte introblok en gelijk met het
   kernwaarden-blok en de filterbalk eronder. Alleen de introtekst zelf ligt
   verder naar binnen, door de binnenmarge van het witte blok. */
.jobs-scroll{
  display:flex;justify-content:flex-start;
  max-width:1180px;margin:26px auto 0;padding:0 24px;
  position:relative;z-index:2;
}
.jobs-scroll-btn{display:inline-flex;align-items:center;gap:10px;}
.jobs-scroll-btn i{transition:transform .2s ease;}
.jobs-scroll-btn:hover i{transform:translateY(3px);}

/* De ruimte onder de knop staat verderop, direct na de standaardmarge van
   .section — zie "Secties". */

/* Ruimte boven het anker, zodat de meescrollende header de filterbalk
   niet bedekt zodra je erheen springt. */
.jobs-anchor{scroll-margin-top:110px;}

.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:60px;
  border-top:1px solid rgba(44,57,75,.15);padding-top:32px;
}
.stats > div{text-align:left;}
.stats strong{
  display:block;font-size:36px;font-weight:800;color:var(--group-accent);line-height:1.15;
}
.stats span{
  font-size:15px;font-weight:700;color:var(--group-primary);letter-spacing:.4px;text-transform:uppercase;
}

/* ==========================================================================
   6. Sub-pagina hero
   ========================================================================== */
.page-hero{
  background:var(--group-cream);padding:64px 0 40px;
  position:relative;overflow:hidden;
}
.page-hero .wrap{position:relative;z-index:2;}

/* Donker blok — aan/uit via Weergave → Aanpassen → Paginakoppen. */
body.has-dark-pagehero .page-hero:not(.has-banner){
  background:linear-gradient(105deg, var(--group-primary-dark) 0%, var(--group-primary) 100%);
  padding:56px 0 52px;
}

/*
 * ---- Bannerfoto per pagina ----
 * De foto is een eigen laag met een VASTE hoogte, zodat de banner op elke pagina
 * exact even hoog is. Het witte titelblok valt over de onderrand en groeit naar
 * onderen bij een langere introtekst — de banner wordt daar dus niet hoger van.
 */
.page-hero{overflow:visible;}

.page-hero.has-banner{
  padding:0;
  background:none;
  display:block;
  min-height:0;
}
.page-hero-media{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  width:100%;
}
.page-hero.has-banner > .wrap{
  position:relative;
  width:100%;
  padding-bottom:0;
}

/* Het witte titelblok, op leesbreedte */
.page-hero-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 16px 40px rgba(44,57,75,.13);
  padding:32px 38px 34px;
  max-width:760px;                 /* zelfde leesbreedte als de tekstkolom */
  margin-right:auto;               /* links uitgelijnd, niet gecentreerd */
  text-align:left;
  position:relative;z-index:2;
}
.page-hero.has-banner .page-hero-card{
  margin-top:-96px;                /* valt over de onderrand van de foto heen */
}
.page-hero-card h1{margin:0;max-width:none;text-align:left;}
.page-hero-sub{
  margin:14px 0 0;font-size:16.5px;line-height:1.6;
  color:var(--group-slate);max-width:62ch;
}
.page-hero-card .section-tag{margin-bottom:8px;}
.page-hero-card p{margin:12px 0 0;color:var(--group-slate);}
.page-hero-card .back-link{margin-bottom:14px;}
.page-hero-card .news-date{margin-bottom:6px;display:block;}
.page-hero-card .job-meta{margin-top:14px;}

/* Ruimte onder het uitstekende blok. */
.page-hero.has-banner + .section{padding-top:56px;}

/* Zonder banner: geen wit blok nodig, gewoon de kop op de achtergrond. */
.page-hero:not(.has-banner) .page-hero-card{
  background:transparent;box-shadow:none;padding:0;max-width:760px;
}
body.has-dark-pagehero .page-hero:not(.has-banner) h1{color:#fff;}
body.has-dark-pagehero .page-hero:not(.has-banner) p{color:rgba(255,255,255,.84);}
body.has-dark-pagehero .page-hero:not(.has-banner) .section-tag{color:var(--group-peach);}
body.has-dark-pagehero .page-hero:not(.has-banner) .back-link{color:rgba(255,255,255,.75);}
body.has-dark-pagehero .page-hero:not(.has-banner) .back-link:hover{color:#fff;}
body.has-dark-pagehero .page-hero:not(.has-banner) .news-date{color:var(--group-peach);}
body.has-dark-pagehero .page-hero:not(.has-banner) .merk-markt{color:var(--group-peach);}
body.has-dark-pagehero .page-hero:not(.has-banner) .job-meta{color:rgba(255,255,255,.8);}
body.has-dark-pagehero .page-hero:not(.has-banner) .job-meta i{color:var(--group-peach);}
body.has-dark-pagehero .page-hero .country-badge-static{
  background:rgba(255,255,255,.14);color:#fff;
}

/* Oranje bollen, zodat de paginakop zich onderscheidt van de homepage. */
/* Sluit de eerste sectie netjes aan op de page-hero (voorheen 90px = te veel lucht) */
.page-hero + .section{padding-top:44px;}
.single-merk .page-hero{padding-bottom:30px;}
.single-merk .page-hero + .section{padding-top:34px;}
.hero + .section{padding-top:70px;}
.page-hero h1{font-size:34px;font-weight:800;color:var(--group-primary);max-width:760px;line-height:1.2;}
.page-hero p{margin-top:14px;font-size:16px;color:var(--group-slate);max-width:640px;}
/* display:flex + fit-content zorgt dat de link een eigen regel pakt. Voorheen
   inline-flex, waardoor het label erachter op dezelfde regel bleef staan. */
.back-link{
  display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;
  color:var(--group-slate);margin:0 0 20px;transition:.15s;
  width:-moz-fit-content;width:fit-content;
}
.back-link:hover{color:var(--group-accent);}

/* ==========================================================================
   7. Secties
   ========================================================================== */
.section{padding:90px 0;}

/* De knop naar de vacatures staat tússen het introblok en de sectie eronder.
   Daardoor sluit `.page-hero + .section` niet meer aan en viel die sectie terug
   op de 90px hierboven — vandaar het gat onder de knop. Deze regel staat bewust
   ná de standaardmarge, zodat hij wint op zowel specificiteit als volgorde. */
.jobs-scroll + .section{padding-top:30px;}
.section-tag{
  display:inline-block;color:var(--group-accent);font-weight:700;font-size:13px;
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px;
}
h2{font-size:32px;font-weight:800;margin-bottom:14px;color:var(--group-primary);}
.lead{font-size:17px;color:var(--group-slate);max-width:680px;}
/* Kop direct gevolgd door tekst: strakker op elkaar */
h2 + .lead,
h2 + p{margin-top:-2px;}
.section-tag + h1,
.section-tag + h2{margin-top:2px;}
.section-cta{margin-top:36px;}

/* Onzichtbaar ankerpunt, zodat oudere links (#bedrijven) blijven werken
   zonder dat er ruimte of een streep in beeld komt. */
.anchor-alias{display:block;height:0;overflow:hidden;}

/* Genoeg ruimte onder de vaste header wanneer je via een anker naar een
   sectie springt. */
.section[id],.hero[id],.anchor-alias{scroll-margin-top:110px;}

/* Over ons */
.section-soft{background:var(--bg-soft);}

/* ---- Doorlopend kleurverloop over de homepage ----
   Aan te zetten in de Customizer (Opties). De secties wisselen elkaar af: de ene
   loopt van crème naar lichtgrijs, de volgende weer terug. Doordat elke sectie
   begint in de kleur waarin de vorige eindigt, ontstaat er nergens een harde rand
   en krijgt de pagina meer beweging dan met vlakke vlakken.

   Deze regels staan bewust ná .section-soft: gelijke specificiteit, dus de
   volgorde bepaalt welke wint. */
.section-verloop-neer{background:linear-gradient(180deg,var(--group-cream) 0%,var(--bg-soft) 100%);}
.section-verloop-op{background:linear-gradient(180deg,var(--bg-soft) 0%,var(--group-cream) 100%);}
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start;margin-top:40px;}
.about-grid p{margin-bottom:16px;color:var(--group-primary);font-size:15.5px;}
.about-cta{margin-top:24px;}
.value-cards{display:grid;gap:16px;align-content:start;}
.value-card{
  background:#fff;border:1px solid var(--group-light);border-radius:8px;padding:22px;
  display:flex;gap:16px;align-items:flex-start;
}
.value-card i{color:var(--group-accent);font-size:22px;margin-top:2px;}
.value-card h4{font-size:16px;margin-bottom:4px;color:var(--group-primary);}
.value-card p{font-size:14px;color:var(--group-slate);margin:0;}

/* ---- Variant "uitgelicht" voor de over ons-sectie ----
   Te wisselen in de Customizer (Sectie — Over ons). De klassieke variant blijft
   ongewijzigd: alles hieronder hangt onder .about-uitgelicht.

   Wat er anders is: de tekst staat in een wit blok zodat hij loskomt van de
   achtergrond, de kop is groter, het label krijgt een accentstreepje, en de drie
   kaarten krijgen een pictogram in een gekleurde cirkel plus een lichte
   schaduw — samen geeft dat meer diepte dan het vlakke grijs van nu. */
/* Het kleurverloop zit niet meer hier maar in .section-verloop-*, zodat het over
   de hele homepage doorloopt en losstaat van de keuze tussen uitgelicht en
   klassiek. */

/* Kop en label blijven bewust gelijk aan alle andere secties: dezelfde grootte
   en geen accentstreepje. Het onderscheid komt van de witte blokken en de
   kaarten, niet van afwijkende typografie. */
/* De tekstkolom staat bewust NIET in een wit vlak. Met de drie kaarten ernaast
   werden dat vier witte blokken naast elkaar, en dan valt niets meer op. Het
   accent ligt nu alleen bij de kaarten. */
.about-uitgelicht .about-grid{margin-top:34px;align-items:start;}
.about-uitgelicht .value-cards{gap:14px;}
.about-uitgelicht .value-card{
  border:none;border-left:3px solid transparent;
  box-shadow:0 8px 22px rgba(44,57,75,.07);
  padding:20px 22px;align-items:center;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.about-uitgelicht .value-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(44,57,75,.13);
  border-left-color:var(--group-accent);
}
.about-uitgelicht .value-card i{
  background:rgba(233,79,51,.10);
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;margin-top:0;flex-shrink:0;
}
.about-uitgelicht .value-card h4{font-size:17px;margin-bottom:3px;}


/* ==========================================================================
   8. Merkenkaarten
   ========================================================================== */
.brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;}
.brand-card{
  border-radius:10px;overflow:hidden;border:1px solid var(--group-light);
  display:flex;flex-direction:column;transition:transform .2s, box-shadow .2s;background:#fff;
}
.brand-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(44,57,75,.12);}
.brand-top{
  background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:34px 24px 24px;border-bottom:4px solid var(--group-slate);position:relative;
  min-height:112px;text-decoration:none;transition:background .15s;
}
a.brand-top:hover{background:#fcfcfb;}
.brand-top img,
.brand-logo{max-height:40px;max-width:82%;object-fit:contain;width:auto;}
.brand-word{font-size:22px;font-weight:800;letter-spacing:.3px;color:var(--group-primary);}
.country-badge{
  position:absolute;top:14px;right:16px;font-size:10.5px;font-weight:700;color:var(--group-slate);
  background:var(--group-light);padding:4px 11px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.3px;
}
.brand-body{
  padding:20px 24px 26px;flex:1 1 auto;display:flex;flex-direction:column;
  min-width:0; /* voorkomt dat lange tekst buiten de kaart valt */
}
.brand-market{
  font-size:13px;font-weight:700;color:#111110;text-align:left;text-transform:uppercase;
  letter-spacing:.4px;margin-bottom:8px;display:block;
}
/* Hier stond eerder flex:1 (= flex-basis:0). Samen met overflow:hidden op de kaart
   werd langere tekst daardoor afgekapt. De link wordt nu met margin-top:auto naar
   onderen geduwd, zodat de tekst altijd zijn eigen hoogte krijgt. */
.brand-body p{
  font-size:14px;color:var(--group-slate);
  margin:0;min-width:0;overflow-wrap:break-word;
}
.brand-link{
  margin-top:auto;padding-top:16px;font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;gap:6px;
  color:var(--group-accent);align-self:flex-start;
}
.news-card-body p, .job-card p{min-width:0;overflow-wrap:break-word;}
.brand-link i{font-size:12px;transition:transform .15s;}
.brand-card:hover .brand-link i,
.news-card:hover .brand-link i,
.job-card:hover .brand-link i{transform:translateX(3px);}

/* ---- Verkoopmerken: de merken die wij verkopen ----
   Exact dezelfde kaart als de blokken op de homepage: drie naast elkaar en
   alle kaarten even hoog. Alleen twee dingen wijken af, en dat moet ook:

   - grid-auto-rows:1fr — op de homepage staat één rij kaarten, hier kunnen het
     zeven rijen zijn. Zonder deze regel krijgt elke rij zijn eigen hoogte, en
     dan verspringen de logo's per rij. Nu is elke rij zo hoog als de hoogste
     kaart van het hele raster.
   - de marge boven het raster, want dit raster staat in een pagina met eigen
     tekst erboven in plaats van onder een sectiekop. */
.verkoopmerk-grid{
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:1fr;
  margin-top:22px;
}
/* Vullen tot de volle rijhoogte, anders "zweeft" een lage kaart bovenin. */
.verkoopmerk-card{height:100%;}

/* Zonder ingevulde markt of tekst staat de link direct onder het logo; dan is
   de extra bovenruimte van .brand-link niet nodig. */
.verkoopmerk-card .brand-body > .brand-link:first-child{padding-top:0;}

/* In de pagina-inhoud krijgt het raster geen opsommingstekens of inspringing
   van .entry-content mee. */
.entry-content .verkoopmerk-grid{padding:0;margin-top:22px;}

.intl-note{
  margin-top:24px;font-size:13px;color:var(--group-slate);background:var(--bg-soft);
  border-left:3px solid var(--vl-blue);padding:12px 16px;border-radius:4px;
}

/* Losse merkpagina */
.merk-header{margin-top:2px;}
.merk-header h1{margin:0;}
.merk-markt{
  font-size:13px;font-weight:700;color:var(--group-accent);text-transform:uppercase;
  letter-spacing:1.2px;margin:0 0 8px;
}
/* Strak op elkaar: titel en de eerste alinea van de inhoud. */
.page-hero .merk-header + *{margin-top:10px;}
.country-badge-static{position:static;display:inline-block;margin-top:10px;}
.merk-content{max-width:760px;}
.merk-cta{margin-top:28px;}
.merk-cta .btn i{margin-left:8px;font-size:12px;}

/* ==========================================================================
   9. Nieuws
   ========================================================================== */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;}
.news-list{display:grid;gap:24px;margin-top:40px;}
.news-card{
  background:#fff;border:1px solid var(--group-light);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s, box-shadow .2s;
}
.news-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(44,57,75,.12);}
.news-thumb{display:block;}
.news-thumb img{width:100%;height:180px;object-fit:cover;}
.news-card-body{padding:24px;display:flex;flex-direction:column;flex:1;}
.news-date{
  font-size:12.5px;font-weight:700;color:var(--group-accent);text-transform:uppercase;
  letter-spacing:.4px;margin-bottom:8px;
}
.news-card h3{font-size:19px;margin-bottom:10px;color:var(--group-primary);line-height:1.35;}
.news-card h3 a:hover{color:var(--group-accent);}
.news-card p{font-size:14px;color:var(--group-slate);margin:0;}
.news-list .news-card p{font-size:15px;}

/* Losse berichtinhoud */
/* Volledige breedte. Wil je een smallere leesbreedte, zet die dan aan via
   Weergave → Aanpassen → Econox Group → Opties. */
/* Vaste leesbreedte, gelijk aan de vacaturepagina (.job-detail) en aan het witte
   titelblok bovenaan. Belangrijk: de bollenstrook rechts is 382px breed binnen een
   container van 1180px. Met 760px tekst blijft er ruimte over, zodat lopende tekst
   nooit over het motief valt. Kaarten en rasters mogen wél container-breed zijn:
   die liggen bovenop het motief en dat is de bedoeling. */
.entry-content{max-width:760px;}
body.econox-volle-breedte .entry-content{max-width:none;}
.entry-content p{margin-bottom:16px;font-size:16px;}

/* Kaarten in de pagina-inhoud houden hun eigen tekstgrootte.
   Zonder deze regel wint `.entry-content p` (zelfde gewicht, maar later in dit
   bestand) en werd de tekst op een merkkaart 16px met 16px marge eronder — dus
   groter dan precies dezelfde kaart op de homepage. */
.entry-content .brand-card p{font-size:14px;margin-bottom:0;}
.entry-content h2{font-size:26px;margin-top:32px;margin-bottom:10px;}
.entry-content > *:first-child{margin-top:0;}
.entry-content h2 + p,
.entry-content h3 + p,
.entry-content h2 + ul,
.entry-content h3 + ul{margin-top:0;}
.entry-content h3{font-size:20px;margin-top:26px;margin-bottom:10px;color:var(--group-primary);}
.entry-content ul,.entry-content ol{margin:0 0 18px 0;}
.entry-content ul li{position:relative;padding-left:22px;margin-bottom:8px;}
.entry-content ul li::before{
  content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
  background:var(--group-accent);border-radius:50%;
}
.entry-content ol{padding-left:22px;list-style:decimal;}
.entry-content ol li{margin-bottom:8px;}
.entry-content img{border-radius:8px;margin:20px 0;}
.entry-content blockquote{
  border-left:3px solid var(--group-accent);padding-left:18px;margin:20px 0;
  font-style:italic;color:var(--group-slate);
}
.entry-content a{color:var(--group-accent);text-decoration:underline;}
.featured-image{margin-bottom:32px;}
.featured-image img{border-radius:10px;width:100%;max-height:420px;object-fit:cover;}

/* ==========================================================================
   10. Vacatures
   ========================================================================== */
.job-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px;}
.job-card{
  background:#fff;border:1px solid var(--group-light);border-radius:10px;padding:26px;
  display:flex;flex-direction:column;gap:10px;transition:transform .2s, box-shadow .2s;
}
.job-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(44,57,75,.12);}
.job-card h3{font-size:18px;color:var(--group-primary);}
.job-card h3 a:hover{color:var(--group-accent);}
.job-card p{font-size:14px;color:var(--group-slate);}
.job-meta{display:flex;gap:14px;font-size:12.5px;color:var(--group-slate);flex-wrap:wrap;font-weight:600;}
.job-meta span{display:inline-flex;align-items:center;gap:6px;}
.job-meta i{color:var(--group-accent);}
/* De business of het merk waar de vacature bij hoort. Iets nadrukkelijker dan de
   overige gegevens, want dit is waar de bezoeker als eerste op scant. */
.job-meta .job-bedrijf{color:var(--group-primary);font-weight:700;}
.job-meta .job-bedrijf a{border-bottom:1px solid transparent;transition:.15s;}
.job-meta .job-bedrijf a:hover{color:var(--group-accent);border-bottom-color:var(--group-accent);}
body.has-dark-pagehero .page-hero:not(.has-banner) .job-meta .job-bedrijf,
body.has-dark-pagehero .page-hero:not(.has-banner) .job-meta .job-bedrijf a{color:#fff;}

/* ==========================================================================
   Puntenkaarten — één kaart met regels, gedeeld door het visieblok en het
   werken-bij-blok. Beide gebruiken dezelfde opbouw, dus dezelfde opmaak.
   ========================================================================== */
.punt-kaarten{
  list-style:none;padding:0;margin:20px 0 0;
  background:#fff;border-radius:12px;
  box-shadow:0 10px 26px rgba(44,57,75,.08);
  overflow:hidden;
}
/* Pictogram links, tekst rechts, allebei bovenaan uitgelijnd. */
.punt-kaart{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 24px;margin:0;
}
.punt-inhoud{flex:1;min-width:0;}
/* Bewust gericht op .punt-inhoud en niet op .punt-kaart span.
   Die laatste vorm (klasse + element) weegt zwaarder dan .punt-teken en
   overschreef daardoor de display, de regelhoogte en de kleur van het
   pictogram — het teken stond dan links-boven in de cirkel en werd grijs. */
.punt-inhoud strong,
.punt-inhoud h3{
  display:block;font-size:15.5px;font-weight:700;line-height:1.35;
  color:var(--group-primary);margin:0 0 3px;
}
.punt-inhoud span,
.punt-inhoud p{
  display:block;font-size:14.5px;color:var(--group-slate);line-height:1.65;margin:0;
}

/* Het pictogram in een gekleurde cirkel.
   line-height:1 en flex-centrering zijn hier nodig: zonder die twee zakt het
   teken naar links-boven omdat een pictogramfont zijn eigen regelhoogte
   meebrengt. */
.punt-teken{
  flex-shrink:0;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--group-accent);
  background:rgba(233,79,51,.10);
  font-size:14px;line-height:1;
  /* Even hoog als de eerste tekstregel, zodat kop en pictogram uitlijnen. */
  margin-top:1px;
}
.punt-teken i{display:block;line-height:1;}

/* De blokken staan meestal in de pagina-inhoud, en die heeft eigen
   lijstopmaak: een oranje bolletje vóór elk item en extra ruimte links.
   Dat zetten we hier uit — anders staat er een bullet naast het pictogram en
   schuift de tekst weg. */
.entry-content .punt-kaarten{margin:20px 0 0;padding:0;}
.entry-content .punt-kaart{padding:18px 24px;margin:0;}
.entry-content .punt-kaart::before{content:none;display:none;}

/* ==========================================================================
   Blok: visie en missie (shortcode [econox-visie])
   ========================================================================== */
.visie-blok{margin:34px 0 8px;}
.visie-doen{margin-top:32px;}
.visie-doen h3{font-size:22px;color:var(--group-primary);margin-bottom:10px;}
.visie-doen-intro{font-size:15.5px;color:var(--group-slate);max-width:760px;margin:0;}

/* ==========================================================================
   Blok: werken bij
   ========================================================================== */
/* Geen eigen achtergrond: het blok staat op de achtergrond van de pagina.
   Een eigen kleur of verloop gaf een zichtbare rand met wat erboven of
   eronder staat, omdat het blok op het overzicht en op een losse vacature op
   een andere plek terechtkomt. */
.werken-bij{background:none;}
.werken-bij h2{font-size:26px;}
.werken-bij .werken-bij-tweede{margin-top:46px;}

/* ==========================================================================
   Banner boven de footer
   ========================================================================== */
.footer-banner{
  width:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* Op een telefoon blijft van een brede foto niets over: dan liever niets. */
@media(max-width:767px){
  .footer-banner{display:none;}
}

/* ---- Filterbalk op het vacature-overzicht ---- */
.job-filters{margin-bottom:28px;}
.job-filters-row{
  display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;
  background:#fff;border:1px solid var(--group-light);border-radius:10px;padding:18px 20px;
}
.job-filter{display:flex;flex-direction:column;gap:6px;min-width:180px;flex:1 1 180px;}
.job-filter label{
  font-size:12px;font-weight:700;color:var(--group-slate);
  text-transform:uppercase;letter-spacing:.6px;
}
.job-filter select{
  font-family:inherit;font-size:14px;color:var(--group-primary);
  padding:9px 12px;border:1px solid var(--group-light);border-radius:6px;
  background:#fff;cursor:pointer;width:100%;
}
.job-filter select:focus{outline:2px solid var(--group-accent);outline-offset:1px;}
.job-filter-reset{
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  background:none;border:none;color:var(--group-accent);
  padding:10px 4px;text-decoration:underline;
}
.job-filter-reset:hover{color:var(--group-accent-dark);}
.job-filter-count{
  font-size:13px;color:var(--group-slate);font-weight:600;margin-top:12px;
}
.job-filters .no-results{margin-top:16px;}
@media(max-width:640px){
  /* Op mobiel onder elkaar, anders worden de lijsten te smal om te lezen. */
  .job-filter{flex:1 1 100%;}
}

/* Op smallere schermen wat minder ruimte in de kaarten. */
@media(max-width:900px){
  .punt-kaart,
  .entry-content .punt-kaart{padding:16px 18px;}
  .visie-doen h3{font-size:20px;}
  .werken-bij h2{font-size:22px;}
}

.jobs-cta{
  margin-top:40px;display:flex;justify-content:space-between;align-items:center;
  background:var(--group-primary-dark);border-radius:10px;padding:32px;flex-wrap:wrap;gap:20px;color:#fff;
}
.jobs-cta h3{font-size:20px;margin-bottom:8px;color:#fff;}
.jobs-cta p{font-size:14px;color:var(--group-light);max-width:520px;}
.job-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.job-tags span{
  background:rgba(255,255,255,.1);color:var(--group-peach);padding:6px 14px;
  border-radius:20px;font-size:12.5px;font-weight:600;
}

/* Vacature detail */
.job-detail{max-width:760px;}
.job-detail .job-meta{margin:18px 0 32px;font-size:13.5px;}
.job-detail h3{margin-top:30px;margin-bottom:12px;color:var(--group-primary);font-size:19px;}
.job-detail p{color:var(--group-primary);font-size:15px;margin-bottom:10px;}
.job-detail ul{margin-bottom:10px;}
.job-detail ul li{
  position:relative;padding-left:22px;margin-bottom:8px;color:var(--group-primary);font-size:15px;
}
.job-detail ul li::before{
  content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  background:var(--group-accent);border-radius:50%;
}
.job-detail .btn-primary{margin-top:24px;}

/* ==========================================================================
   11. Contact
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:44px;}
.contact-info li{display:flex;gap:14px;margin-bottom:20px;font-size:14.5px;align-items:flex-start;}
.contact-info i{color:var(--group-accent);width:18px;margin-top:3px;}
.contact-info a:hover{color:var(--group-accent);}
.contact-map{
  background:var(--bg-soft);border:1px dashed var(--group-slate);border-radius:8px;
  display:flex;align-items:center;justify-content:center;min-height:260px;
  color:var(--group-slate);font-size:14px;flex-direction:column;gap:8px;overflow:hidden;
}
.contact-map i{font-size:28px;color:var(--group-accent);}
.contact-map iframe{width:100%;height:100%;min-height:260px;border:0;display:block;}

/* Contactpagina — snelle links en locatiekaarten */
.ec-intro{max-width:760px;}
.ec-quick{
  display:flex;flex-wrap:wrap;gap:14px;
  margin:28px 0 0;padding:0;list-style:none;
}
.ec-quick li{margin:0;padding:0;}
.ec-quick li::before{content:none;}
.ec-quick a{
  display:inline-flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--group-light);
  border-radius:6px;padding:11px 18px;
  font-weight:700;font-size:14.5px;
  color:var(--group-primary);text-decoration:none;transition:.15s;
}
.ec-quick a:hover{border-color:var(--group-accent);color:var(--group-accent);}
.ec-quick i{color:var(--group-accent);}

.ec-divider{
  border:0;border-top:1px solid var(--group-light);
  margin:52px 0 40px;
}

.ec-locations{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:24px;margin:32px 0 0;
}
.ec-loc{
  background:#fff;border:1px solid var(--group-light);
  border-radius:10px;padding:28px 28px 26px;
  border-top:4px solid var(--group-slate);
  display:flex;flex-direction:column;min-width:0;
}
.ec-loc-label{
  font-size:11.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--group-accent);margin:0 0 6px;
}
.ec-loc h3{font-size:20px;margin:0 0 14px;color:var(--group-primary);}
.ec-loc address{
  font-style:normal;font-size:15px;line-height:1.65;
  color:var(--group-primary);margin:0 0 16px;
}
.ec-loc dl{
  margin:0 0 18px;font-size:14.5px;
  display:grid;grid-template-columns:22px 1fr;
  gap:9px 10px;align-items:start;
}
.ec-loc dt{margin:0;color:var(--group-accent);text-align:center;}
.ec-loc dd{margin:0;color:var(--group-primary);min-width:0;overflow-wrap:break-word;}
.ec-loc dd a{color:inherit;text-decoration:none;}
.ec-loc dd a:hover{color:var(--group-accent);text-decoration:underline;}
.ec-loc-note{
  font-size:13.5px;color:var(--group-slate);margin:0 0 18px;
}
.ec-loc-map{
  margin-top:auto;font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;gap:7px;
  color:var(--group-accent);text-decoration:none;align-self:flex-start;
}
.ec-loc-map:hover{text-decoration:underline;}

.ec-closing{
  background:var(--group-light);border-radius:10px;
  padding:30px 32px;margin-top:44px;
}
.ec-closing h3{margin:0 0 8px;font-size:19px;color:var(--group-primary);}
.ec-closing p{margin:0;color:var(--group-slate);font-size:15px;}
.ec-closing-cta{margin-top:18px !important;}

/* ==========================================================================
   12. Footer
   ========================================================================== */
.site-footer{
  background:var(--group-primary);color:var(--group-light);
  padding:52px 0 40px;font-size:13px;
  position:relative;overflow:hidden;
}
.site-footer .wrap{position:relative;z-index:2;}
/* Witte bollen, rechtsonder. */
.footer-grid{display:flex;flex-direction:column;gap:24px;}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:center;}
.footer-brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.footer-logo{display:flex;align-items:center;gap:12px;}
.footer-logo-img{height:34px;width:auto;display:block;}
.footer-logo strong{font-size:18px;color:#fff;}
.footer-tagline{color:var(--group-light);font-size:13px;}
.footer-brands{display:flex;}
.footer-menu{
  display:flex;flex-wrap:wrap;align-items:center;
  list-style:none;margin:0;padding:0;gap:0;
}
.footer-menu li{display:flex;align-items:center;list-style:none;}
/* Scheidingsteken alleen TUSSEN twee items — niet vooraan en niet aan het eind. */
.footer-menu li + li::before{
  content:"\00B7";
  color:var(--group-slate);
  padding:0 10px;
  line-height:1;
}
.footer-brands a{color:var(--group-light);font-weight:600;}
.footer-brands a:hover{color:#fff;}
.footer-contact{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:22px;font-size:13.5px;
}
.footer-contact span,.footer-contact a{display:inline-flex;align-items:center;gap:8px;color:var(--group-light);}
.footer-contact a:hover{color:#fff;}
.footer-contact i{color:var(--group-accent);width:14px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;}

/* ==========================================================================
   13. Paginering & losse elementen
   ========================================================================== */
.pagination{margin-top:44px;display:flex;gap:8px;flex-wrap:wrap;}
.pagination .page-numbers{
  padding:9px 15px;border:1px solid var(--group-light);border-radius:4px;background:#fff;
  font-weight:600;font-size:14px;color:var(--group-primary);
}
.pagination .page-numbers.current{background:var(--group-primary);color:#fff;border-color:var(--group-primary);}
.pagination .page-numbers:hover:not(.current){border-color:var(--group-accent);color:var(--group-accent);}

.no-results{
  background:#fff;border:1px solid var(--group-light);border-radius:10px;padding:34px;
  color:var(--group-slate);margin-top:40px;
}

/* ==========================================================================
   14. Responsief
   ========================================================================== */
@media(max-width:900px){
  .about-grid,.contact-grid{grid-template-columns:1fr;}
  .brand-grid,.news-grid,.job-grid{grid-template-columns:repeat(2,1fr);}
  .ec-locations{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .hero h1{font-size:36px;}
  nav.links ul{gap:22px;}
  /* Tussenstap: op tablet iets kleiner, anders nemen de motieven te veel ruimte. */
  .hero .ec-dots{width:304px;height:466px;background-size:304px 466px;}
  .site-footer .ec-dots{width:512px;height:175px;background-size:512px 175px;}
  .ec-dots-bg{width:270px;background-size:270px 1010px;}
  .page-hero{margin-left:24px;margin-right:24px;max-width:none;}
}
@media(max-width:820px){
  /* Menu klapt uit direct ONDER de header (niet op een vaste hoogte),
     zodat het altijd goed staat — ook als de header krimpt of de
     prototype-balk aan staat. */
  nav.links{
    position:absolute;top:100%;left:0;right:0;
    background:#fff;flex-direction:column;align-items:flex-start;
    padding:18px 24px 22px;gap:16px;
    border-bottom:1px solid #eee;
    box-shadow:0 12px 24px rgba(44,57,75,.1);
    display:none;
    max-height:calc(100vh - 100%);
    overflow-y:auto;
  }
  nav.links.open{display:flex;}
  nav.links > ul{flex-direction:column;gap:4px;width:100%;align-items:stretch;}
  nav.links li{width:100%;}
  nav.links > ul > li > a{display:block;width:100%;padding:10px 0;}

  /* Op mobiel klapt het submenu open met een tik op het pijltje. */
  nav.links .menu-item-has-children{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  }
  nav.links .menu-item-has-children > a{flex:1;}
  nav.links .menu-item-has-children > a::after{display:none;}
  nav.links .menu-item-has-children::after{display:none;}
  .submenu-toggle{display:block;}

  nav.links .sub-menu{
    position:static;width:100%;
    border:none;box-shadow:none;background:transparent;
    padding:0 0 6px 14px;margin:0;
    border-left:2px solid var(--group-light);
    /* Op mobiel echt inklappen, zodat het geen ruimte inneemt. */
    display:none;opacity:1;visibility:visible;transform:none;
  }
  nav.links li.submenu-open > .sub-menu{display:block;}
  nav.links li:hover > .sub-menu,
  nav.links li:focus-within > .sub-menu{display:none;}
  nav.links li.submenu-open > .sub-menu{display:block;}
  nav.links .sub-menu a{padding:8px 0;}

  /* Derde niveau op mobiel: geen uitschuiven, maar een ingesprongen
     accordeon onder niveau 2. De regels van het derde niveau hierboven
     wegen zwaarder dan de mobiele regels, dus zetten we ze hier expliciet
     terug — anders staat het paneel op de telefoon verschoven. */
  nav.links .sub-menu .sub-menu{
    top:auto;left:auto;right:auto;
    transform:none;
    margin:0;
    padding:0 0 4px 14px;
  }
  nav.links .sub-menu li.klap-links > .sub-menu{
    left:auto;right:auto;transform:none;
  }
  /* Alleen het knopje mag het pijltje tonen, niet ook nog de link zelf. */
  nav.links .sub-menu .menu-item-has-children > a::after,
  nav.links .sub-menu .menu-item-has-children.klap-links > a::after{
    content:none;display:none;
  }
  nav.links .sub-menu .menu-item-has-children > a{display:block;}
  .menu-toggle{display:block;}
  .nav-cta{display:none;}
  .nav{gap:12px;}
}

@media(max-width:640px){
  .hero h1{font-size:30px;}
  .hero{
    padding:52px 0 48px;
    min-height:0 !important;   /* ingestelde hoogte niet forceren op mobiel */
  }
  .hero p{font-size:16px;}
  /* Motieven proportioneel kleiner op mobiel, zodat ze niet domineren. */
  .hero .ec-dots{width:220px;height:337px;background-size:220px 337px;}
  .site-footer .ec-dots{width:369px;height:127px;background-size:369px 127px;}
  .ec-dots-bg{width:190px;background-size:190px 711px;}
  body.has-dark-pagehero .page-hero{padding:36px 20px 34px;}
  .page-hero{
    margin:16px 14px 0;border-radius:12px;
    padding-left:20px;padding-right:20px;
  }
  .page-hero.has-banner .page-hero-card{margin-top:-64px;}
  .page-hero.has-banner + .section{padding-top:44px;}
  /* Iets meer contrast op de bannerfoto: op een klein scherm valt tekst sneller weg. */
  .page-hero.has-banner{--ec-banner-dim:.88;}
  /* Iets meer contrast in de overlay, want op mobiel valt tekst sneller weg. */
  body.has-hero-image .hero{--ec-hero-overlay:.92;}
  .section{padding:56px 0;}
  .page-hero{padding:44px 0 30px;}
  .page-hero + .section{padding-top:34px;}
  .hero + .section{padding-top:52px;}
  .jobs-scroll{margin-top:20px;}
  .jobs-scroll + .section{padding-top:24px;}
  .brand-grid,.news-grid,.job-grid{grid-template-columns:1fr;}
  .ec-loc{padding:24px 22px;}
  .ec-closing{padding:24px 22px;}
  .ec-divider{margin:40px 0 30px;}
  .stats{grid-template-columns:1fr 1fr;gap:22px;margin-top:44px;padding-top:26px;}
  .stats strong{font-size:28px;}
  .stats span{font-size:13px;}
  .jobs-cta{flex-direction:column;align-items:flex-start;padding:26px;}
  .page-hero h1{font-size:26px;}
  h2{font-size:25px;}
  .hero-buttons{gap:12px;}
  .btn{padding:12px 22px;font-size:14.5px;}
  .footer-contact{gap:12px;}
  .merk-header h1{font-size:26px;}
  .footer-top{flex-direction:column;align-items:flex-start;}
  .wrap{padding:0 18px;}
  .entry-content p,.entry-content ul li{font-size:15.5px;}
}

@media(max-width:420px){
  .stats{grid-template-columns:1fr;gap:18px;}
  .lang-switch button{padding:5px 9px;font-size:12px;}
}