/* =====================================================================
   Comfort Home – v16 afwerking
   Laatste stylesheet op elke pagina. Lost op:
   1. lettertype: Plus Jakarta Sans lokaal en overal hetzelfde
   2. mobiele layout die buiten beeld liep (grid-blowout)
   3. klik-/tikdoelen te klein of afgedekt door de contactbalk
   4. losse onderdelen die niet in de huisstijl stonden
   ===================================================================== */

/* ---------- 1. Lettertype ---------- */
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("/assets/fonts/plus-jakarta-sans-var.woff") format("woff");
  font-weight:200 800;font-style:normal;font-display:swap;
}
:root{--x-font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
html body,
html body *:not(svg):not(svg *):not(code):not(pre):not(kbd){font-family:var(--x-font)!important}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4{letter-spacing:-.02em;text-wrap:balance}
p,li{text-wrap:pretty}
input,select,textarea,button{font:inherit}

/* ---------- 2. Layout: niets mag meer buiten het scherm lopen ---------- */
html,body{max-width:100%;overflow-x:clip}
img,video,svg{max-width:100%}
.x-split>*,.x-story>*,.x-duo>*,.x-article>*,.x-grid2>*,.nl-hero-grid>*,
.airco-sales-hero .wrap>*,.x-hero .x-wrap>*{min-width:0}
@media(max-width:900px){
  .x-split,.x-story,.x-duo,.x-article,.nl-hero-grid{grid-template-columns:minmax(0,1fr)!important}
}
.x-prose{overflow-wrap:anywhere}
.x-prose table{display:block;max-width:100%;overflow-x:auto}

/* Ankerlinks niet onder de vaste header laten vallen */
html{scroll-padding-top:96px}
[id]{scroll-margin-top:96px}

/* ---------- 3. Klikbaarheid ---------- */
a,button,summary,label,[role="button"]{-webkit-tap-highlight-color:rgba(15,168,85,.15)}
summary{cursor:pointer}
/* Broodkruimels: groter tikvlak */
.x-crumb a{display:inline-block;padding:6px 2px;margin:-6px 0}
a.back{display:inline-flex;align-items:center;min-height:40px;padding:4px 0}
/* Links in lopende tekst zijn duidelijk herkenbaar */
.x-prose a:not(.x-btn),.ch-legacy a:not(.x-btn){color:#087a46;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:600}
.x-prose a:not(.x-btn):hover,.ch-legacy a:not(.x-btn):hover{color:#065c35;text-decoration-thickness:2px}
/* Toetsenbordfocus overal zichtbaar */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #19b35f;outline-offset:3px;border-radius:8px}

/* Mobiele contactbalk mag geen knoppen of formulieren afdekken */
@media(max-width:767px){
  body:has(.ch-contact-dock){padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
  /* Op de configurator en offertepagina staat al een eigen actieknop */
  body:has(.wizard-nav) .ch-contact-dock,
  body:has(form[name="offerte-pagina"]) .ch-contact-dock,
  body:has(form[name="contact"]) .ch-contact-dock{display:none!important}
  body:has(.wizard-nav),body:has(form[name="offerte-pagina"]),body:has(form[name="contact"]){padding-bottom:0!important}
}

/* ---------- 4. Homepage: 'Zo werkt het' netjes in een 2x2 raster ---------- */
@media(min-width:901px){
  #werkwijze .x-split{align-items:start}
  #werkwijze .ch-process-scroll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
  #werkwijze .ch-step-link{padding:14px!important;gap:4px}
  #werkwijze .ch-step-thumb{height:auto!important;aspect-ratio:16/10;margin:0 0 10px!important;border-radius:14px}
  #werkwijze .ch-step-link strong{font-size:16px}
  #werkwijze .ch-step-link span:not(.ch-step-thumb){font-size:13.5px;line-height:1.5}
  #werkwijze figure.x-photo{position:sticky;top:110px;margin-top:8px!important}
}
@media(max-width:900px){
  #werkwijze .ch-process-scroll{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory}
  #werkwijze .ch-process-scroll>a{flex:0 0 min(78vw,300px)!important;max-width:min(78vw,300px)!important}
  #werkwijze .ch-step-thumb{height:auto!important;aspect-ratio:16/10}
}
.ch-step-thumb img{object-position:center 35%}

/* Belofte-kaarten: hele kaart klikbaar, gelijke hoogte */
.x-promise{align-items:stretch}
.ch-promise-link{height:100%}

/* ---------- 5. Airco-pagina ---------- */
/* Knop liep over de rand van de kaart */
.setup-card{display:flex;flex-direction:column}
.setup-card .setup-select{display:flex!important;align-items:center;justify-content:center;width:auto!important;margin:auto 22px 22px!important;min-height:48px;text-decoration:none}
.setup-card p{min-height:0!important;margin-bottom:18px}

/* Keuzekaart in de hero: rustiger en beter leesbaar */
.airco-choice-tablet .tablet-body h2{line-height:1.12;letter-spacing:-.03em}
.airco-route-card{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px!important;text-align:left!important;padding:16px!important;position:relative;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.airco-route-card:hover{border-color:#19b35f!important;box-shadow:0 8px 22px rgba(8,90,50,.10);transform:translateY(-1px)}
.airco-route-card b{display:block;font-size:15px;line-height:1.3;text-align:left!important}
.airco-route-card small{display:block;font-size:13px!important;line-height:1.45!important;color:#5b6d64;text-align:left!important;margin-top:3px}
.airco-route-card .route-link{white-space:nowrap;font-size:14px!important;padding:8px 0}
/* hele kaart klikbaar maken via de link */
.airco-route-card .route-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.route-price-note span{font-size:13px!important;line-height:1.5}
@media(max-width:560px){
  .airco-route-card{grid-template-columns:auto minmax(0,1fr)!important}
  .airco-route-card .route-link{grid-column:2}
}

/* Kenmerkenbalk: geen losse tekens als icoon, gelijke vlakken */
.airco-featuregrid{gap:12px!important}
.airco-feature{background:#f3f8f5!important;border:1px solid #e1ece6;border-radius:16px!important;padding:16px 12px!important;text-align:center}
.airco-feature b{font-size:15px;color:#0d3b2c}
.airco-feature small{display:block;margin-top:2px;font-size:13px;color:#5d7067}

/* Merkenstrook: logo's even groot, geen loze ruimte */
.brand-logo-card{display:flex;align-items:center;justify-content:center}
.brand-logo-card img{width:auto!important;height:auto!important;max-width:150px!important;max-height:46px!important;object-fit:contain}
.brand-logo-card img[src*="logo-mhi"]{max-height:64px!important;max-width:120px!important;transform:scale(1.9)}
.airco-config .brand-marquee{margin-bottom:0!important}
.airco-config{padding-bottom:72px!important}

/* ---------- 6. Losse SEO-blokken in de huisstijl ---------- */
.ch-v8{background:#f3f8f5!important;border:1px solid #dcebe2!important;color:#173a2e!important;width:calc(100% - 40px)}
.ch-v8 h2{color:#0c3326!important;font-weight:800;letter-spacing:-.03em}
.ch-v8-point{border-color:#dcebe2!important}
.ch-v8-action{display:inline-flex!important;align-items:center;gap:10px;min-height:50px;padding:0 26px!important;border-radius:999px!important;background:#11a356!important;font-weight:800!important;box-shadow:0 10px 22px rgba(17,163,86,.22)}
.ch-v8-action:hover{background:#0c8c49!important}
.ch-v8-action::after{content:"→"}
.ch-v8-muted{color:#5d7067!important}
@media(max-width:680px){.ch-v8{width:auto}.ch-v8-action{display:flex!important;justify-content:center}}

section[aria-label="Verdiepend advies"]{padding:56px 0!important}
section[aria-label="Verdiepend advies"] h2{font-size:clamp(24px,3vw,32px);margin:0 0 10px;letter-spacing:-.03em}
section[aria-label="Verdiepend advies"] p{color:#5d7067;margin:0 0 20px}
section[aria-label="Verdiepend advies"] ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
section[aria-label="Verdiepend advies"] li a{display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%;padding:16px 18px;border:1px solid #dcebe2;border-radius:16px;background:#fff;color:#0d3b2c;font-weight:700;text-decoration:none;line-height:1.4;transition:border-color .15s,box-shadow .15s}
section[aria-label="Verdiepend advies"] li a::after{content:"→";color:#11a356;flex:none}
section[aria-label="Verdiepend advies"] li a:hover{border-color:#19b35f;box-shadow:0 8px 20px rgba(8,90,50,.08)}
.seo-v6-nav{border-radius:16px!important}
.seo-v6-nav a{font-weight:700}

/* ---------- 7. Omgezette advies-/kennisbankpagina's ---------- */
.ch-meta{opacity:.8;margin-top:6px}
.ch-legacy>*:first-child{margin-top:0}
.ch-legacy h2{margin-top:34px}
.ch-legacy .ch-box{background:#f3f8f5;border:1px solid #dcebe2;border-radius:18px;padding:22px 24px;margin:24px 0}
.ch-legacy .ch-box>h2:first-child{margin-top:0}
.ch-legacy .ch-note{background:#eef8f2;border-left:4px solid #19b35f;border-radius:12px;padding:16px 18px;margin:20px 0}
.ch-legacy .ch-cta-box{background:#062e24;color:#e6f1ec;border-radius:18px;padding:24px 26px;margin:32px 0}
.ch-legacy .ch-cta-box h2,.ch-legacy .ch-cta-box strong{color:#fff;margin-top:0;display:block;font-size:20px}
.ch-legacy .ch-cta-box p{color:#cfe2d8}
.ch-legacy .ch-cta-box a{color:#7ee2a6!important}
.ch-legacy .ch-linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:14px 0 8px}
.ch-legacy .ch-linkgrid>a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:12px 16px;border:1px solid #dcebe2;border-radius:14px;background:#fff;color:#0d3b2c!important;text-decoration:none!important;font-weight:650;line-height:1.35;transition:border-color .15s,box-shadow .15s}
.ch-legacy .ch-linkgrid>a:hover{border-color:#19b35f;box-shadow:0 6px 16px rgba(8,90,50,.08)}
.ch-legacy .ch-linkgrid>a:not(:has(*))::after{content:""}
.ch-legacy .ch-linkcard{position:relative;border:1px solid #dcebe2;border-radius:16px;padding:20px;background:#fff;transition:border-color .15s,box-shadow .15s}
.ch-legacy .ch-linkcard:hover{border-color:#19b35f;box-shadow:0 8px 20px rgba(8,90,50,.08)}
.ch-legacy .ch-linkcard h2{font-size:18px;margin:0 0 8px;line-height:1.3}
.ch-legacy .ch-linkcard h2 a{text-decoration:none;color:#0d3b2c}
.ch-legacy .ch-linkcard h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ch-legacy .ch-linkcard p{margin:0;color:#5d7067;font-size:15px}
.ch-legacy section+section{margin-top:8px}

/* ---------- 8. Kleine afwerking ---------- */
.x-footer .contact a{display:flex;align-items:center;min-height:32px}
.x-footer .grid a{padding:3px 0}
.x-form .x-chips label{cursor:pointer}
.x-form .x-chips label span{user-select:none}
.airco-feature b{display:inline-flex;align-items:center;gap:7px}
.airco-feature .ch-fi{width:18px;height:18px;color:#11a356;flex:none}

/* ---------- 9. Productpagina's (zonnepanelen, warmtepompen, thuisbatterijen) ---------- */
/* Vier smalle kaartjes in de hero braken woorden af: nu 2 x 2 */
.promise-page-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.promise-page-grid>a{min-width:0;hyphens:manual;word-break:normal;overflow-wrap:normal}
.promise-page-grid>a b{font-size:16px;line-height:1.25}
@media(max-width:480px){.promise-page-grid{grid-template-columns:1fr!important}}
/* Icoontjes in de kaarten waren piepklein */
.nl-card .icon{display:flex!important;align-items:center;justify-content:center;width:46px!important;height:46px!important;border-radius:14px!important;font-size:20px!important;font-weight:800!important;line-height:1!important;color:#0f9a50!important}
/* Knoptekst en pijl op één regel */
.btn.build-link,.nl-summary .btn{white-space:nowrap;justify-content:center;text-align:center}
@media(max-width:400px){.btn.build-link{white-space:normal}}
/* Werkgebiedpagina's: 'Bekijk …'-links in kaarten groter tikvlak, hele kaart klikbaar */
.grid>.card{position:relative}
.grid>.card>a:last-child{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.grid>.card>a:last-child::after{content:"";position:absolute;inset:0;border-radius:inherit}

/* ---------- 10. Offertepagina ---------- */
.ch-form-note{background:#eef8f2;border-left:3px solid #19b35f;border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.55;color:#2c4a3d!important;margin:0 0 16px}
@media(max-width:767px){
  /* Een oude mobiele patch verborg het offerteformulier op telefoons */
  .x-hero .x-form:not(.ch-desktop-hero-form){display:block!important}
  /* Volgorde op mobiel: kop en uitleg, dan direct het formulier, dan de stappen */
  .x-form-first .ch-offer-copy{display:contents!important}
  .x-form-first .ch-offer-copy>.x-eyebrow{order:1!important}
  .x-form-first .ch-offer-copy>h1{order:2!important;margin-bottom:0!important}
  .x-form-first .ch-offer-copy>.x-lead{order:3!important;margin:0!important}
  .x-form-first .ch-offer-form{order:4!important;opacity:1!important;transform:none!important}
  .x-form-first .ch-offer-copy>.x-steps{order:5!important}
  .x-form-first .ch-offer-copy>.offer-benefits{order:6!important}
  .x-form-first .ch-offer-copy>.offer-mini-note{order:7!important}
  .x-form-first .x-eyebrow{margin-bottom:-10px}
  /* Stappen en voordelen als compacte lijst in plaats van halve, afgesneden kaarten */
  .x-form-first .x-steps,.x-form-first .offer-benefits{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;gap:10px!important;padding:0!important;margin:0!important}
  .x-form-first .x-steps>*,.x-form-first .offer-benefits>*{flex:none!important;max-width:none!important;min-height:0!important;width:auto!important}
  .x-form-first .x-step{padding:14px 16px!important;align-items:center}
  .x-form-first .offer-benefit{display:grid!important;grid-template-columns:auto 1fr;column-gap:12px;align-items:start;padding:14px 16px!important}
  .x-form-first .offer-benefit .ico{grid-row:span 2;margin:0!important}
  .x-form-first .offer-benefit b{margin:0 0 2px!important;font-size:16px}
  .x-form-first .offer-benefit p{margin:0!important;font-size:14px}
}

/* ---------- 11. Leesbaarheid / contrast ---------- */
/* Werkwijze-pagina's: witte kop stond op een lichte achtergrond */
.process-hero .x-h1,.process-layout h1{color:#0c3326!important}
.process-hero .x-h1 .x-hl{color:#0f9a50!important}
/* Felgroene tekst op wit/lichtgroen was te licht om goed te lezen */
:is(.x-section,.x-block,.catalog,.nl-section,.process-hero,.airco-choice-tablet,.ch-legacy,.x-prose) :is(.x-eyebrow,.eyebrow){color:#0b7a3f!important}
:is(.x-section,.x-block,.process-hero) .x-eyebrow::before{background:#0f9a50!important}
.x-card .more,.x-services .more{color:#0b7a3f!important}
.x-kb-card small,.x-kb small{color:#0b7a3f!important}
/* Knoppen: wit op groen met voldoende contrast */
.ch-v8-action{background:#0c8a47!important}
.ch-v8-action:hover{background:#0a7a3e!important}
.x-btn.wa{background:#128a4f!important;color:#fff!important}
.x-btn.wa:hover{background:#0f7744!important}
.x-contact .x-eyebrow,.x-band .x-eyebrow,.x-cta .x-eyebrow{color:#8ee6ae!important}
.x-contact .x-eyebrow::before{background:#8ee6ae!important}
a[data-cat]>small{color:#0b7a3f!important}


/* ---------- 12. Mobiele afwerking ---------- */
@media(max-width:767px){
  /* Knoppenrij: één knop over de volle breedte, tekst mag teruglopen */
  .x-hero-actions .x-btn:only-child,.x-band .x-hero-actions .x-btn{grid-column:1/-1}
  .x-hero-actions .x-btn{white-space:normal!important;line-height:1.25;min-height:48px;padding:10px 14px!important;text-align:center}
  .x-band .x-hero-actions{display:flex!important}
  .x-band .x-hero-actions .x-btn{width:100%}
  /* Contactgegevens en stappen onder elkaar i.p.v. half afgesneden kaarten */
  .x-steps:not(.ch-process-scroll){display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;gap:10px!important;padding:0!important}
  .x-steps:not(.ch-process-scroll)>*{flex:none!important;max-width:none!important;min-height:0!important}
  /* Fotolabel op productpagina's: geen dubbele naam, past op het beeld */
  .nl-visual-note{left:12px!important;right:12px!important;bottom:12px!important;padding:12px 14px!important;gap:8px!important}
  .nl-visual-note>strong{display:none!important}
  .nl-visual-note b{font-size:15px!important}
  .nl-visual-note small{font-size:12.5px!important}
  /* Witte strook onder de footer weg: ruimte voor de contactbalk zit nu ín de footer */
  body:has(.ch-contact-dock){padding-bottom:0!important}
  body:has(.ch-contact-dock) .x-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
  /* Footer: kolommen netjes 2 naast elkaar */
  .x-footer .grid{grid-template-columns:1fr 1fr!important;gap:28px 18px!important}
  .x-footer .grid>div:first-child{grid-column:1/-1}
}
/* Rustige, consistente typografie in lopende tekst */
.x-section h2,.x-prose h2,.ch-legacy h2{line-height:1.2!important;text-wrap:balance}
.x-section h3,.x-prose h3{line-height:1.3!important}
.x-prose p,.x-prose li{line-height:1.7}
.x-prose h2{margin:36px 0 12px}
.x-prose h2:first-child,.x-prose section:first-child h2{margin-top:0}
.x-prose h3{margin:22px 0 6px;font-size:18px}
.x-prose ol,.x-prose ul{padding-left:22px}
.x-prose .ch-cta-inline{margin:24px 0 8px}
.x-prose .ch-related{margin-top:36px;padding-top:24px;border-top:1px solid #e3ede7}
@media(max-width:767px){
  .wizard-nav{left:0;right:0;margin:8px -16px 0!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))!important;background:#fff!important;box-shadow:0 -8px 24px rgba(6,46,36,.08);bottom:0!important;border-radius:16px 16px 0 0}
  .wizard-nav button{min-height:48px}
}
.ch-thanks{display:flex;flex-direction:column;align-items:center;text-align:center}
.ch-thanks .x-eyebrow{justify-content:center;margin-top:8px}
.offer-benefit .ico{display:flex!important;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#eef8f2;color:#0f9a50;font-size:0}
.process-cards a,.process-cta a:not(.x-btn){display:inline-flex;align-items:center;min-height:40px;font-weight:700;color:#087a46}

.ch24-extra{background:#f2f8f4;border:1px solid #d4e5d9;border-radius:14px;padding:15px;margin:15px 0}.ch24-extra label{display:flex;align-items:flex-start;gap:10px;font-weight:700;color:#1b4735}.ch24-extra input{margin-top:4px;accent-color:#26774e}.ch24-extra p{font-size:13px;line-height:1.6;color:#557063;margin:7px 0 0 24px}