/* House of Bubbles — huisstijl voor NATIVE Elementor-widgets (heading/text/button)
   + container-hulpklassen. De pagina's worden met echte Elementor-elementen
   gebouwd; deze CSS trekt de output in de merkstijl. */

/* Elementor global-kit kleuren overschrijven naar het HOB-merkpalet.
   De default-kit zet primary=#6EC1E4 (blauw) op koppen en accent=#61CE70
   (groen) op knoppen via --e-global-color-*; we mappen ze op de merkkleuren
   zodat ALLE native Elementor-widgets meteen on-brand renderen. */
:root,body.elementor-page{
  --e-global-color-primary:var(--hob-espresso);
  --e-global-color-secondary:var(--hob-olive);
  --e-global-color-text:var(--hob-text-muted);
  --e-global-color-accent:var(--hob-olive);
}

/* Koppen */
.elementor-widget.hob-el-eyebrow .elementor-heading-title{font-size:var(--hob-eyebrow);text-transform:uppercase;letter-spacing:.14em;font-weight:500;color:var(--hob-olive)}
.elementor-widget.hob-el-h1 .elementor-heading-title{font-family:var(--hob-font-head);font-size:var(--hob-h1);font-weight:var(--hob-fw-black);line-height:1.06;color:var(--hob-espresso)}
.elementor-widget.hob-el-h1 .elementor-heading-title .is-normal{font-weight:var(--hob-fw-book)}
.elementor-widget.hob-el-h2 .elementor-heading-title{font-family:var(--hob-font-head);font-size:var(--hob-h2);font-weight:var(--hob-fw-black);line-height:1.12;color:var(--hob-espresso)}
.elementor-widget.hob-el-h3 .elementor-heading-title{font-family:var(--hob-font-head);font-size:1.2rem;font-weight:var(--hob-fw-bold);color:var(--hob-olive)}
.elementor-heading-title em{font-style:italic;font-weight:var(--hob-fw-medium)}
.elementor-heading-title .hob-thin{font-weight:var(--hob-fw-thin)}

/* Tekst */
.hob-el-text .elementor-widget-container{color:var(--hob-text-muted);line-height:1.6;font-size:1rem}
.hob-el-lead .elementor-widget-container{color:var(--hob-text-muted);line-height:1.6;font-size:1.05rem;max-width:48ch}
.hob-el-center .elementor-widget-container,.hob-el-center .elementor-heading-title{text-align:center}
.hob-el-center.hob-el-lead .elementor-widget-container{margin-inline:auto}

/* Knoppen (overschrijf Elementor-default) — referentie "Ontdek B.A.A.S" (groen)
   naast "Bekijk boxen" (licht): volledige pil (klantcorrectie 2026-07-06: knoppen
   blijven pil, alleen kaarten/keuzevakken kregen 20px), royale padding, vette tekst.
   Specificiteit (.elementor-widget.hob-el-btn*) verslaat Elementor's post-CSS
   regel .elementor-widget-button .elementor-button{background:var(--accent)}. */
.elementor-widget.hob-el-btnp .elementor-button,.elementor-widget.hob-el-btns .elementor-button{border-radius:var(--hob-radius-pill);padding:1rem 2.1rem;font-family:var(--hob-font-body);font-weight:var(--hob-fw-bold);font-size:1rem;line-height:1;border:0;transition:background-color .28s,transform .28s}
/* Primair = groen #5e6040 / tekst #eef1f0 */
.elementor-widget.hob-el-btnp .elementor-button{background-color:#5e6040;color:#eef1f0}
.elementor-widget.hob-el-btnp .elementor-button:hover{background-color:#4f512f;transform:translateY(-2px)}
/* Secundair = licht #d1d0c0 / tekst #312b22 */
.elementor-widget.hob-el-btns .elementor-button{background-color:#d1d0c0;color:#312b22}
.elementor-widget.hob-el-btns .elementor-button:hover{background-color:#c6c4b2;transform:translateY(-2px)}

/* Media-blokken: ECHTE afbeeldingen (native image-widget) i.p.v. lege vlakken.
   Cover-crop in een nette kaart met merk-radius; verspringend ritme via --short. */
.hob-el-media{align-self:stretch}
.hob-el-media .hob-el-img,.hob-el-media .elementor-widget-image{width:100%;height:100%}
.hob-el-media .elementor-widget-image .elementor-widget-container,.hob-el-media .elementor-image{height:100%}
.hob-el-img img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--hob-radius-card)}
.hob-el-media .hob-el-img img{min-height:clamp(240px,32vw,440px);max-height:clamp(240px,32vw,440px)}
.hob-el-media--short .hob-el-img img{min-height:clamp(200px,26vw,360px);max-height:clamp(200px,26vw,360px);margin-top:2.5rem}

/* HERO-visual: hero-foto (cover, rounded) + draaiende sticker rechtsboven.
   Home (.hob-el-herovisual) en Zakelijk (body.page-id-28 .hob-el-media, zie
   hieronder) delen letterlijk dezelfde .hob-sticker--spin-klasse en -regels,
   zodat de badge op beide pagina's gegarandeerd identiek oogt (klantvraag
   31-7: "precies dezelfde spinner"). Eerder had Zakelijk een eigen
   "hob-zakelijk-sticker"-klasse met eigen (te lage specificiteit) regels, die
   verloor van de generieke .hob-el-img-herofoto-regel (min-height:240px,
   regel 50) - vandaar ook hier expliciet min/max-height gereset. */
.hob-el-herovisual{position:relative;align-self:stretch}
.hob-el-heroimg img{display:block;width:100%;height:auto;border-radius:var(--hob-radius-card);object-fit:cover;min-height:clamp(280px,34vw,460px);max-height:clamp(280px,34vw,460px)}
body.page-id-28 .hob-el-media{position:relative}
.hob-el-herovisual .hob-sticker--spin, body.page-id-28 .hob-sticker--spin {
  position:absolute;bottom:-22px;right:-18px;width:clamp(96px,11vw,150px);z-index:2;
}
.hob-el-herovisual .hob-sticker--spin img, body.page-id-28 .hob-sticker--spin img {
  width:100%;height:auto;min-height:0;max-height:none;border-radius:0;animation:hob-spin 20s linear infinite;
}
@keyframes hob-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .hob-el-herovisual .hob-sticker--spin img, body.page-id-28 .hob-sticker--spin img{animation:none}
}

/* Waardekaart (container) */
.hob-el-vcard{background:var(--hob-surface);border:1px solid var(--hob-border);border-radius:var(--hob-radius-card)}
/* .hob-el-vcard .elementor-widget{width:100%} (regel 140) wint anders van een 1-klasse
   selector — deze widget rendert zonder eigen .elementor-widget-container, dus zowel de
   3-klasse override als de svg zelf moeten hier direct getarget worden. */
.hob-el-vcard .elementor-widget.hob-el-vcard-icon{width:2.5rem;height:2.5rem;flex-shrink:0;color:var(--hob-olive);margin-bottom:.4rem;display:block}
.hob-el-vcard-icon svg{width:100%;height:100%;display:block}
.hob-el-center-text{text-align:center}
.elementor-widget.hob-el-vcard-title .elementor-heading-title,.hob-el-vcard .hob-el-h3 .elementor-heading-title{font-size:1.15rem;color:var(--hob-olive)}
.hob-el-vcard .hob-el-text .elementor-widget-container{font-size:.95rem;line-height:1.5}

/* Ronde B-A-A-S badge (container) */
.hob-el-badge{width:84px;height:84px;border-radius:50%;background:var(--hob-olive);border:2px solid var(--hob-gold)}
.elementor-widget.hob-el-badge .elementor-heading-title,.hob-el-badge .elementor-heading-title{color:var(--hob-ivory)!important;font-size:1.9rem;font-weight:var(--hob-fw-black);line-height:1}
.hob-el-badgewrap .elementor-heading-title{font-size:1rem}

/* Stap-pijl (vervangt het oude 01/02/03-nummer) — goud/olijf accent */
.elementor-widget.hob-el-steparrow .elementor-heading-title{color:var(--hob-gold);font-size:1.7rem;font-weight:var(--hob-fw-black);line-height:1}

/* Founder-quote */
.hob-el-quote .elementor-widget-container{font-family:var(--hob-font-head);font-size:clamp(1.4rem,1rem + 1.6vw,2rem);line-height:1.25;font-weight:var(--hob-fw-black);color:var(--hob-espresso)}

/* Elementor-knop default-overschrijving (geen Elementor-blauw) */
.elementor-button{box-shadow:none}
.hob-el-btnp .elementor-button-link,.hob-el-btns .elementor-button-link{text-decoration:none}

/* ============================================================
   CONTAINER-LAYOUT (native flexbox containers, Elementor 4.x)
   Banden = full-width container met getinte achtergrond; de
   binnen-container is boxed (1200) en verzorgt de kolom-layout.
   Elementor rendert .e-con (flex) → flex_direction/width% pakt
   de kolommen; deze CSS levert spacing, vlakken en accenten.
   ============================================================ */

/* Sectie-band (full-width) met verticale ritmiek — gehalveerd (klantvraag
   22-7: te veel witruimte tussen secties, was 52-88px per band = tot 176px
   tussen twee banden samen). */
.hob-el-band{padding-block:clamp(1.625rem,1rem + 2.5vw,2.75rem)}
.hob-el-band.hob-bg-champagne{background:var(--hob-champagne)}
.hob-el-band.hob-bg-licht{background:var(--hob-bg-soft)}
.hob-el-band.hob-bg-ivory{background:var(--hob-ivory)}
.hob-el-band.hob-bg-wit{background:#F9FAFA}

/* Eerste band op elke pagina: extra ruimte boven zodat de fixed header
   (126px sinds het grotere logo, klantvraag 2026-07-06) de titel niet
   overlapt. .hob-el-band's eigen padding-block (52-88px) is bedoeld als
   sectie-ritmiek, niet als header-marge, dus die overschrijven we hier
   specifiek voor de eerste band (140px = 126px header + veiligheidsmarge). */
.elementor > .hob-el-band:first-child{padding-top:8.75rem}

/* Boxed binnen-container */
.hob-el-wrap{width:100%;max-width:var(--hob-container);margin-inline:auto;padding-inline:var(--hob-gutter);padding-block:0}

/* Verticale stapel met nette tussenruimte (koppen, alinea's, knoppen) */
.hob-el-stack > .e-con-inner,.hob-el-stack{gap:1.15rem}

/* Elementor zet standaard 10px padding op ELKE container (.e-con), ook op
   pure layout-hulpklassen die geen eigen vlak/rand hebben en waar spacing
   al via gap/padding-block geregeld is. Dat stapelde onbedoeld op (klantvraag
   2026-07-06: te veel witruimte tussen stappen + pijl stond los van titel) —
   hier expliciet resetten voor de layout-only wrappers. Kaarten met een eigen
   vlak (reviews, boxinfo, values, configurator-opties) declareren hun eigen
   padding al en blijven dus ongemoeid. */
.hob-el-stack,.hob-el-split,.hob-el-split-3565,.hob-el-grid,.hob-el-badge-item,
.hob-el-step,.hob-el-stepbody-wrap,.hob-el-btnrow,.hob-el-herovisual{padding:0}

/* Gecentreerde kop+intro-blok bovenaan een sectie */
.hob-el-head{text-align:center;max-width:60ch;margin-inline:auto;margin-bottom:2.75rem}
.hob-el-head .elementor-heading-title,.hob-el-head .elementor-widget-container{text-align:center}

/* Twee-koloms split (hero/split/cta): verticaal centreren, ruime gap */
.hob-el-split{align-items:center;gap:clamp(2rem,1rem + 4vw,4rem)}
.hob-el-split--rev{flex-direction:row-reverse}

/* Knoppenrij */
.hob-el-btnrow{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:.4rem}
.hob-el-btnrow.hob-el-center{justify-content:center}

/* VALUE-GRID + BADGE-GRID: koloms bepaald via NATIVE width% per kind-container;
   deze CSS regelt enkel wrap, gap en gelijke hoogte. */
.hob-el-grid{flex-wrap:wrap;align-items:stretch}

/* Value-kaart: zorg dat de kaart de volledige kolomhoogte vult */
.hob-el-vcard{display:flex;flex-direction:column;gap:.5rem;padding:1.5rem 1.6rem}
.hob-el-vcard .elementor-widget{width:100%}

/* Badge-item: ronde badge + label eronder, gecentreerd */
.hob-el-badge-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.85rem}
.hob-el-badge{display:flex;align-items:center;justify-content:center;margin-inline:auto}
.hob-el-badge .elementor-widget-container{display:flex;align-items:center;justify-content:center;height:100%}
.hob-el-badge-item .hob-el-badgelabel .elementor-widget-container{font-size:1rem;color:var(--hob-text-muted);line-height:1.45}
.hob-el-badge-item .hob-el-badgelabel strong{color:var(--hob-espresso);font-weight:var(--hob-fw-bold)}

/* Genummerde stappen (kolom met 01/02/03) */
.hob-el-steps{display:flex;flex-direction:column;gap:.85rem}
.hob-el-step{display:flex;flex-wrap:nowrap;gap:1.1rem;align-items:flex-start}
.hob-el-step .hob-el-steparrow{flex:0 0 auto;margin-top:.1rem}
.hob-el-stepbody-wrap{gap:.25rem;flex:1 1 auto;min-width:0}
.elementor-widget.hob-el-steptitle .elementor-heading-title{font-size:1.15rem;color:var(--hob-espresso);font-weight:var(--hob-fw-bold);margin-bottom:.15rem}

/* Founder */
.hob-el-founder{align-items:flex-start;gap:clamp(2rem,1rem + 4vw,4rem)}
.hob-el-founder .hob-el-media{position:sticky;top:100px;align-self:flex-start}
.hob-el-founder .hob-el-media .hob-el-img img{max-height:none}
@media (max-width:900px){.hob-el-founder .hob-el-media{position:static;align-self:auto}}
.hob-el-sign .elementor-widget-container{margin-top:.75rem}
.hob-el-sign__name{display:block;color:var(--hob-olive);font-family:'Allura',cursive;font-weight:400;font-size:2.5rem;line-height:1.2}
.hob-el-sign__role{display:block;color:var(--hob-text-muted);font-family:var(--hob-font-body,inherit);font-weight:400;font-size:.95rem;margin-top:.15rem}

/* Reviews/contact 35/65 split */
.hob-el-split-3565{align-items:flex-start;gap:clamp(2rem,1rem + 4vw,3.5rem)}
/* Reviews: intro-tekst verticaal centreren t.o.v. de hoge reviews-kolommen. */
.hob-el-reviews-3565{align-items:center}

/* Maatwerk-wrapper (shortcode-widget) krijgt geen extra spacing-conflict */
.hob-el-custom .elementor-widget-container{width:100%}

/* Founder-quote streep */
.hob-el-quote .elementor-widget-container{border-left:3px solid var(--hob-gold);padding-left:1.1rem}

/* ---- Mobiel: native width% overschrijven zodat splits/grids stapelen ---- */
@media (max-width:880px){
  .hob-el-grid4 > .e-con{--width:calc(50% - .65rem)!important}
}
@media (max-width:680px){
  .hob-el-split > .e-con,.hob-el-split{flex-direction:column}
  .hob-el-split > .e-con,.hob-el-founder > .e-con,.hob-el-split-3565 > .e-con{--width:100%!important}
  /* Hero op mobiel: foto/sticker eerst, dan tekst + CTA's (klantvraag 2026-07-06) */
  .elementor > .hob-el-band:first-child .hob-el-split > .e-con:first-child{order:2}
  .elementor > .hob-el-band:first-child .hob-el-split > .e-con:last-child{order:1}
  .hob-el-grid4 > .e-con{--width:100%!important}
  .hob-el-btnrow{justify-content:flex-start}
}