/* === style-ext.css — extensies (v5.9+, na CSS-parse-grens) === */

@media (max-width: 760px) {
  .topbar a, .topbar__tel, .hdr__nav-toggle, .hdr__tel, .hdr__call, .hdr button {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .topbar a, .topbar__tel { width: 44px; height: 44px; }
  .topbar a .ic, .topbar__tel .ic, .topbar a > svg { width: 15px; height: 15px; }
  .hero__eyebrow, .hero--v55 .hero__eyebrow { text-wrap: balance; }
}

/* === v5.9 — Diensten-pagina PC-pariteit met wpemi (07-08) === */
html{overflow-x:clip}
@media(min-width:992px){
  .band__grid,.band__grid--dienst{align-items:start!important;grid-template-columns:1.12fr .88fr!important;gap:60px!important}
  .band__grid > *:last-child,.band__grid--dienst > *:last-child{position:sticky;top:104px;align-self:start}
  .band__grid > *:first-child,.band__grid--dienst > *:first-child{max-width:66ch}
}
.band__grid p,.band__grid--dienst p{margin-bottom:1.05em;line-height:1.8}
.band__grid h2,.band__grid--dienst h2,.dienst-prose h2{position:relative;padding-top:18px;margin-top:1.7em}
.band__grid h2::before,.band__grid--dienst h2::before,.dienst-prose h2::before{
  content:"";position:absolute;top:0;left:0;width:46px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--goud),rgba(201,162,39,.25));
}
.dienst-prose > .kicker + h2,.dienst-prose > .kicker + h2::before{padding-top:0;margin-top:0}
.dienst-prose > .kicker + h2::before{display:none}
.band__grid .fotoblok img,.band__grid--dienst .fotoblok img{width:100%;border-radius:18px;box-shadow:var(--shadow);display:block}
@media(min-width:992px){
  section:not(.hero):not(.phero):not(.band):not(.bandfoto) .band__grid,
  section:not(.hero):not(.phero):not(.band):not(.bandfoto) .band__grid--dienst{align-items:start!important;gap:56px 64px}
}

/* === v5.10 — Form grid, contact NAP, offerte sticky, diensten-hub (07-08) === */

/* Contact NAP: leesbaar op donkere phero (was var(--dim) / var(--navy) = onzichtbaar) */
.phero--contact .contact__nap p{color:#c7d0de}
.phero--contact .contact__nap a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.phero--contact .contact__nap a:hover{color:var(--goud-l)}
.phero--contact .contact__nap .ic{color:var(--goud);flex:0 0 auto;margin-top:2px}

/* Compact 2-koloms adviesformulier op desktop (pariteit wpemi inline.css) */
@media(min-width:992px){
  .advies-card .form{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:11px;align-items:start}
  .advies-card .form > div:nth-child(5),
  .advies-card .form > div:last-of-type{grid-column:1 / -1}
  .advies-card .form textarea{min-height:70px}
  .advies-card .form label{font-size:.74rem;margin-bottom:4px}
  .advies-card .form input,.advies-card .form textarea{padding:11px 13px;font-size:.92rem}
  .advies-card .btn--primary{padding:14px 22px;margin-top:0}
}

/* Offerte: introtekst sticky naast lang formulier */
@media(min-width:992px){
  .phero--offerte .phero__grid > *:first-child{position:sticky;top:110px;align-self:start}
}

/* Diensten-hub: kaarten iets prominenter */
@media(min-width:992px){
  .grid3--diensten{margin-top:44px}
  .grid3--diensten .card .ic{width:34px;height:34px}
  .grid3--diensten .card{padding:36px 32px 32px}
  .grid3--diensten .card h3{font-size:1.22rem}
}

/* Mobiel: form-labels + FAQ overflow */
@media(max-width:640px){
  .advies-card .form label{font-size:12.5px!important;margin-bottom:5px}
  .cookie-banner button,.cookie-banner .btn{min-height:44px!important;padding:11px 22px!important}
  .faq,.faq details{max-width:100%;box-sizing:border-box}
}

/* === v5.11 — Diensten hero: compact formulier + scroll-fix (07-08, pariteit wpemi) ===
   Gemeten 1440px: emisfinance form 732px vs tekst 351px; wpemi form 354px vs tekst 316px.
   Oorzaak: dikke advies-card + sticky form → lege linkerkolom bij scrollen door hero. */

@media(min-width:992px){
  .phero__grid--diensten{
    grid-template-columns:minmax(0,1.14fr) minmax(260px,.80fr);
    gap:44px 48px;
    align-items:start;
  }
  /* Geen sticky in diensten-hero: voorkomt lege linkerkolom tijdens scrollen */
  .phero__form--diensten,
  .phero__form--diensten .advies-card{
    position:static!important;top:auto!important;max-height:none!important;overflow:visible!important;
  }
  .phero:has(.phero__grid--diensten){padding:72px 0 56px}

  .phero__form--diensten .advies-card{
    padding:20px 18px 18px;border-radius:16px;
    box-shadow:0 14px 40px rgba(0,0,0,.20);
  }
  .phero__form--diensten .advies-card__title{font-size:1.18rem;margin:0 0 14px;line-height:1.25}
  .phero__form--diensten .advies-card .form{
    display:grid;grid-template-columns:1fr 1fr;column-gap:12px;row-gap:9px;align-items:start;
  }
  .phero__form--diensten .advies-card .form > div:nth-child(5),
  .phero__form--diensten .advies-card .form > div:last-of-type{grid-column:1 / -1}
  .phero__form--diensten .advies-card .form label{font-size:.72rem;margin-bottom:3px}
  .phero__form--diensten .advies-card .form label span{display:none}
  .phero__form--diensten .advies-card .form input,
  .phero__form--diensten .advies-card .form textarea{
    padding:10px 12px;font-size:.88rem;border-radius:10px;
  }
  .phero__form--diensten .advies-card .form textarea{min-height:48px;max-height:72px}
  .phero__form--diensten .advies-card .btn--primary{
    padding:12px 16px;font-size:.88rem;margin-top:0;
  }
}

/* Trust-band direct onder compacte hero — minder visuele kloof */
.phero:has(+ .tbar){padding-bottom:56px!important}
.phero:has(+ .tbar) + .tbar{border-top:0}
@media(min-width:992px){
  .phero:has(+ .tbar) + .tbar .tbar__grid{padding:20px 0}
}

/* v5.21 08-08 — form-titels navy op witte kaart (wint van oudere wit-regels) */
.advies-card .advies-card__title,
.advies-card h2.advies-card__title,
.phero__form--diensten .advies-card h2,
.phero__form:has(.advies-card) h2.advies-card__title{color:#0B1F3A!important;opacity:1!important}
@media(max-width:991px){
  .phero__form--inline > h2.serif{color:#0B1F3A!important;opacity:1!important}
  .phero__form--inline .hero__form label{color:#0B1F3A!important;opacity:1!important}
}

/* v5.8 — footer-logo: normale HORIZONTALE logo, GEEN shine/glow/animatie (klantwens 09-08) */
.ftr__logo-anim:not(.ftr__brand){animation:none!important}
.ftr:not(.ftr--v2) .ftr__logo-anim:not(.ftr__brand),
.ftr:not(.ftr--v2) a.ftr__logo-anim:not(.ftr__brand),
.ftr:not(.ftr--v2) .brxe-image.ftr__logo-anim,
#brx-footer .brxe-image.ftr__logo-anim{width:min(360px,100%)!important;max-width:100%!important}
.ftr:not(.ftr--v2) .ftr__logo-anim:not(.ftr__brand) img,
.ftr:not(.ftr--v2) .brxe-image.ftr__logo-anim img,
#brx-footer .ftr__logo-anim:not(.ftr__brand) img,
#brx-footer .brxe-image.ftr__logo-anim img{width:min(360px,100%)!important;max-width:100%!important;height:auto!important;max-height:none!important;filter:none!important;animation:none!important}
.ftr:not(.ftr--v2) .brxe-image.ftr__logo-anim:hover img{filter:none!important;transform:none!important}
.ftr__logo-btn:hover .ftr__logo-anim,.ftr__logo-btn:focus-visible .ftr__logo-anim{filter:none!important}
@media(max-width:900px){.ftr:not(.ftr--v2) .ftr__logo-anim:not(.ftr__brand) img,.ftr:not(.ftr--v2) .brxe-image.ftr__logo-anim img{width:min(320px,100%)!important}}
@media(max-width:760px){.ftr:not(.ftr--v2) .ftr__logo-anim:not(.ftr__brand) img,.ftr:not(.ftr--v2) .brxe-image.ftr__logo-anim img{width:min(300px,100%)!important;height:auto!important;max-height:none!important}}

/* v5.9 — footer-brand = HORIZONTALE logo (geen icoon+tekst, geen shine) */
.ftr.ftr--v2 .ftr__brand--full{gap:0!important;animation:none!important}
.ftr.ftr--v2 .ftr__brand-logo{width:min(400px,82%)!important;height:auto!important;max-width:100%!important;display:block!important;filter:none!important;animation:none!important}
@media(max-width:760px){.ftr.ftr--v2 .ftr__brand-logo{width:min(320px,88%)!important}}

/* v6.0 — header/topbar: dubbele telefoon weg (blijft in header met cirkel), mail/whatsapp plat zonder cirkel (klantwens 09-08) */
.topbar a[href^="tel:"]{display:none!important}
.topbar__in a{background:none!important;background-color:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important}

/* v6.1 — mobiel-fixes /wpemi (klantwens 09-08) */
/* (1) Topbar: openingstijden tonen i.p.v. enkel klok-in-rondje */
@media(max-width:480px){
  .topbar__in > span:first-child{width:auto!important;max-width:none!important;min-width:0!important;height:auto!important;border:0!important;border-radius:0!important;padding:0!important;overflow:visible!important}
  .topbar__in > span:first-child .tb-kort{display:inline!important}
  .topbar__in > span:first-child .tb-txt{display:none!important}
}
/* (2) Hero-titel niet buiten beeld op mobiel (spans schaalden niet mee) */
@media(max-width:600px){
  .hero--v55 h1 .hero__h1-main,.hero--v55 h1 .accent{font-size:clamp(1.5rem,6.2vw,2.05rem)!important;white-space:normal!important}
  .hero--v55 h1{overflow-wrap:break-word}
}
/* (3) Hero-formulier titel/labels leesbaar op lichte mobiele weergave (alle regio/dienst-pagina's) */
@media(max-width:760px){
  .phero__form--diensten h2,
  .phero__form--diensten .brxe-heading,
  .phero__form--diensten label,
  .phero__form--diensten .form label,
  .phero__form--diensten .gform_wrapper label{color:var(--navy)!important;opacity:1!important}
}