/* ============================================================================
   De Huismotor -- gedeelde wizard-stijl voor alle voordeuren.

   Eén intake + één uitkomst, meerdere landingspagina's. Deze file bevat alleen
   de wizard-specifieke `hm-`klassen; de basis (.card, .lbl, .btn, .field,
   .form-grid, input/select, kleurvariabelen) komt uit de pagina zelf, zoals bij
   alle andere pagina's op deze site. Zo blijft elke voordeur een zelfstandig
   te openen bestand, maar staat de wizard maar op één plek.
   ========================================================================== */

/* --- Rouleerkop -----------------------------------------------------------
   De <h1> wisselt elke 4 s tussen de drie vragen die dezelfde intake
   beantwoordt. Vormgeving bewust identiek aan de bestaande rouleerkop op
   /nl/kan-de-was-aan/: kernwoord in --blue en vet binnen een verder donkere
   kop, met dezelfde in/uit-beweging en cadans -- zodat het als één site voelt.
   Daar rouleert één woord binnen een vast zinsframe, hier de hele vraag. */
.hm-q { display:inline-block; }
/* --hero-rot is de bestaande site-variabele voor rouleertekst: #185FA5 in licht,
   #a8e0ff in donker (zie /nl/kan-de-was-aan/). Pagina's die 'm niet definiëren
   vallen terug op --blue, met hieronder een expliciete dark-mode-correctie --
   #185FA5 op een donkere achtergrond heeft veel te weinig contrast. */
.hm-q-accent { display:inline-block; color:var(--hero-rot, var(--blue)); font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.15); }
[data-theme="dark"] .hm-q-accent { color:var(--hero-rot, #a8e0ff); }
.hm-q.in { animation:hmQIn .5s cubic-bezier(.2,.85,.25,1) both; }
.hm-q.out { animation:hmQOut .35s ease both; }
@keyframes hmQIn { from{opacity:0;transform:translateY(.55em)} to{opacity:1;transform:translateY(0)} }
@keyframes hmQOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-.45em)} }
@media (prefers-reduced-motion: reduce) { .hm-q, .hm-q.in, .hm-q.out { animation:none; } }

/* --- Belofteregel onder de kop --------------------------------------------
   Nu het rouleren in de <h1> zit, houdt deze regel de boodschap én de interne
   links naar de andere voordeuren op de pagina. */
.hm-belofte { position:relative; z-index:1; margin:1rem auto 0; text-align:center; max-width:720px; }
.hm-belofte .kop { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--blue-mid); font-weight:700; }
.hm-belofte .links { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; margin-top:.45rem; }
.hm-belofte .links a { font-size:13.5px; color:var(--muted); text-decoration:none;
  border-bottom:1px solid transparent; }
.hm-belofte .links a:hover { color:var(--blue); border-bottom-color:var(--blue-mid); }

/* --- Intake: progressive disclosure ---------------------------------------
   Dit klepje is de belangrijkste knop van de intake: hij is het verschil tussen
   één antwoord en het complete beeld. Daarom geen voetnoot-linkje maar een
   uitnodigende band die opvalt naast de invoervelden. */
.hm-extra { margin-top:1.2rem; border-top:1px solid var(--border); padding-top:1.1rem; }
.hm-extra > summary { cursor:pointer; font-size:16px; font-weight:600; color:var(--blue);
  list-style:none; display:flex; align-items:center; gap:12px; line-height:1.35;
  background:var(--blue-light); border:1px solid var(--border); border-radius:11px;
  padding:14px 16px; transition:border-color .15s, transform .1s; }
.hm-extra > summary:hover { border-color:var(--blue-mid); }
.hm-extra > summary:active { transform:translateY(1px); }
.hm-extra > summary:focus-visible { outline:2px solid var(--blue-mid); outline-offset:2px; }
.hm-extra > summary::-webkit-details-marker { display:none; }
.hm-extra > summary::before { content:'+'; flex:0 0 auto; display:inline-flex;
  align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
  background:var(--blue); color:#fff; font-weight:700; font-size:18px; line-height:1; }
.hm-extra[open] > summary { border-radius:11px 11px 0 0; }
.hm-extra[open] > summary::before { content:'−'; }
.hm-extra > .hint { display:block; font-size:13px; color:var(--muted); font-weight:400;
  margin:0; padding:10px 16px 12px; background:var(--bg); border:1px solid var(--border);
  border-top:none; border-radius:0 0 11px 11px; }
.hm-extra > .form-grid { margin-top:1rem; }
@media (max-width:620px){
  .hm-extra > summary { font-size:15px; padding:13px 14px; gap:10px; }
}

/* --- Hulpmiddel binnen een veld -------------------------------------------
   Voor het bouwjaar onder de isolatiekeuze. Bewust ingesprongen en gestippeld
   omkaderd zodat het leest als een hulpje bij het veld erboven, en niet als
   een tweede antwoord dat ook meetelt. */
.hm-hulp { margin-top:.65rem; padding:.7rem .85rem; background:var(--bg);
  border:1px dashed var(--border); border-radius:9px; }
.hm-hulp label { display:block; font-size:12px; font-weight:400; color:var(--muted);
  margin-bottom:.45rem; line-height:1.4; }
.hm-hulp select { font-size:13.5px; padding:7px 9px; }
.hm-hulp-ok { display:none; margin-top:.45rem; font-size:12px; color:var(--zelf, var(--blue));
  font-weight:500; }
.hm-hulp-ok.aan { display:block; }

/* Veld uitgezet door "Ik heb geen zonnepanelen" -- zichtbaar inactief in plaats
   van verdwenen, zodat de bezoeker ziet dat hij het terug kan zetten. */
.hm-uit { opacity:.45; }
.hm-uit input, .hm-uit select { cursor:not-allowed; }

/* --- Samenvatting: de eerlijke zin ---------------------------------------- */
.hm-sum { background:var(--blue-light); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.3rem 1.4rem; }
.hm-sum .zin { font-size:clamp(16px,2.6vw,19px); font-weight:600; line-height:1.45; }
.hm-sum .sub { font-size:13px; color:var(--muted); margin-top:.5rem; }

/* --- Kerngetal (per voordeur een ander getal groot) ----------------------- */
.hm-kern { text-align:center; padding:1.5rem 1rem 1.3rem; border-radius:var(--radius);
  background:var(--zelf-bg); border:1px solid var(--border); }
.hm-kern.pijn { background:var(--pain-bg); }
.hm-kern .big { font-size:clamp(2.6rem,10vw,4.4rem); font-weight:700; line-height:1.02;
  letter-spacing:-0.02em; color:var(--zelf); font-family:'IBM Plex Mono',monospace; }
.hm-kern.pijn .big { color:var(--pain); }
.hm-kern .big small { font-size:.28em; font-weight:400; color:var(--muted); font-family:'IBM Plex Sans',sans-serif; }
.hm-kern .cap { font-size:14.5px; margin-top:.2rem; }

/* --- Advies-prioriteit ---------------------------------------------------- */
.hm-routes { display:flex; flex-direction:column; gap:10px; }
.hm-route { border:1px solid var(--border); border-radius:12px; padding:1rem 1.2rem; background:var(--white); }
.hm-route.top { border-color:var(--zelf); box-shadow:0 0 0 2px var(--zelf-bg); }
.hm-route.niet { opacity:.82; }
.hm-route h3 { font-size:15.5px; margin:2px 0 4px; }
.hm-route p { font-size:13.5px; color:var(--muted); }
.hm-route .rij { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hm-badge { display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; border-radius:6px; padding:2px 8px; }
.hm-badge.gratis { color:var(--zelf); background:var(--zelf-bg); }
.hm-badge.loont { color:var(--blue); background:var(--blue-light); }
.hm-badge.niet { color:var(--pain); background:var(--pain-bg); }
.hm-badge.advies { color:#fff; background:var(--zelf); }
.hm-route .bedrag { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:16px;
  font-weight:500; white-space:nowrap; }
.hm-route .meta { font-size:12px; color:var(--muted); margin-top:.5rem; }
.hm-route .cta { display:inline-block; margin-top:.7rem; text-decoration:none; font-size:13px;
  font-weight:600; padding:8px 15px; border-radius:9px; background:var(--blue); color:#fff; }
.hm-route .cta.ghost { background:transparent; color:var(--blue); border:1px solid var(--blue); }
.hm-route .cta + .cta { margin-left:8px; }

/* --- Blokken (saldering / warmtepomp / batterij / zon / ev) --------------- */
.hm-blok + .hm-blok { margin-top:1.1rem; }
.hm-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:1rem; }
@media (max-width:560px){ .hm-stats{ grid-template-columns:1fr 1fr; } }
.hm-stat { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.75rem .95rem; }
.hm-stat .s { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.hm-stat .v { font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:500; margin-top:2px; }

/* Verdeelbalk zelfverbruik vs teruglevering */
.hm-bar { height:22px; border-radius:8px; overflow:hidden; display:flex; margin:1rem auto .5rem;
  max-width:520px; box-shadow:inset 0 0 0 1px var(--border); }
.hm-bar .z { background:var(--zelf); }
.hm-bar .t { background:var(--terug); }
.hm-bar-lbl { display:flex; justify-content:space-between; max-width:520px; margin:0 auto;
  font-size:11.5px; color:var(--muted); }
.hm-bar-lbl i { width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:4px; vertical-align:middle; }

/* Kostenscenario's warmtepomp / batterijmaten */
.hm-opts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:1rem; }
@media (max-width:620px){ .hm-opts{ grid-template-columns:1fr; } }
.hm-opt { border:1px solid var(--border); border-radius:11px; padding:.9rem 1rem; background:var(--white); }
.hm-opt.best { border-color:var(--zelf); box-shadow:0 0 0 2px var(--zelf-bg); }
.hm-opt .s { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.hm-opt .v { font-family:'IBM Plex Mono',monospace; font-size:19px; font-weight:500; margin-top:3px; }
.hm-opt .sub2 { font-size:11.5px; color:var(--muted); margin-top:2px; }
.hm-opt .save { font-size:12.5px; font-weight:600; margin-top:5px; }
.hm-opt .save.pos { color:var(--zelf); }
.hm-opt .save.neg { color:var(--pain); }

/* SCOP-schaal */
.hm-scale { position:relative; height:8px; border-radius:5px; margin:1rem auto .3rem; max-width:460px;
  background:linear-gradient(90deg, var(--pain) 0%, #e0b000 45%, var(--zelf) 100%); }
.hm-scale .mk { position:absolute; top:-5px; width:3px; height:18px; border-radius:2px; background:var(--text); }
.hm-scale-lbl { display:flex; justify-content:space-between; max-width:460px; margin:0 auto;
  font-size:11px; color:var(--muted); }

/* --- Teaser: blok dat nog invoer mist (progressive disclosure) ------------ */
.hm-teaser { border:1px dashed var(--border); border-radius:12px; padding:1rem 1.2rem;
  background:var(--bg); }
.hm-teaser h3 { font-size:15px; margin-bottom:3px; }
.hm-teaser p { font-size:13.5px; color:var(--muted); }
.hm-teaser button { margin-top:.7rem; }

/* --- Sliders -------------------------------------------------------------- */
.hm-sliders { margin-top:1.1rem; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:1rem 1.1rem; }
.hm-slider { margin-bottom:.9rem; }
.hm-slider:last-child { margin-bottom:0; }
.hm-slider .top { display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:3px; }
.hm-slider .top b { font-family:'IBM Plex Mono',monospace; color:var(--text); font-weight:500; }
.hm-slider input[type=range] { width:100%; accent-color:var(--blue); padding:0; }
.hm-busy { font-size:11.5px; color:var(--muted); min-height:1.1em; margin-top:.4rem; }

/* --- Aannames / bronnen --------------------------------------------------- */
.hm-aann { border-top:1px solid var(--border); margin-top:1.1rem; padding-top:.8rem; }
.hm-aann summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--muted); }
.hm-aann ul { margin:.6rem 0 0 1.1rem; font-size:12.5px; color:var(--muted); }
.hm-aann li { margin-bottom:4px; }
.hm-src { font-size:11px; color:var(--muted); margin-top:.6rem; font-family:'IBM Plex Mono',monospace; }

.hm-persproof { text-align:center; font-size:13px; color:var(--muted); margin-top:1rem; }
.hm-persproof b { color:var(--zelf); font-family:'IBM Plex Mono',monospace; }

.hm-err { color:var(--red); font-size:13px; margin-top:10px; min-height:1em; }
.hm-spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:hmspin .7s linear infinite;
  vertical-align:middle; margin-right:6px; }
@keyframes hmspin { to { transform:rotate(360deg); } }