/* === Offerteblok (opdracht #218) — BEGIN ===================================================
   Kort offerteformulier bovenaan de pagina's met de meeste Google-kliks. Alles is gescoped op
   .offerteblok; kleur en lettertype komen uit de site via de --ob-*-variabelen (zie het staartstuk
   per site onderaan). Staat (data-staat): dicht = alleen knop | stap1 = postcode + soort |
   stap2/open/bezig/fout = alle velden | klaar = bedankt. */
.offerteblok {
  --ob-accent: #0b7a53;
  --ob-accent-hover: #14171c;
  --ob-accent-ink: #fff;
  --ob-ink: #14171c;
  --ob-muted: #4b5259;
  --ob-bg: #f3f7f4;
  --ob-rand: #c9ccc6;
  --ob-veld-rand: #c9ccc6;
  --ob-radius: 14px;
  --ob-kop-font: inherit;
  --ob-fout: #b42318;
  box-sizing: border-box;
  margin: 20px 0 28px;
  padding: 18px 20px 16px;
  background: var(--ob-bg);
  border: 1px solid var(--ob-rand);
  border-radius: var(--ob-radius);
  color: var(--ob-ink);
  font-size: 16px;
  line-height: 1.45;
  max-width: 820px;
  text-align: left;
}
.offerteblok *, .offerteblok *::before, .offerteblok *::after { box-sizing: border-box; }
.offerteblok p, .offerteblok ul, .offerteblok form { margin: 0; padding: 0; }
.offerteblok .ob-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.offerteblok .ob-titel { margin: 0; font-family: var(--ob-kop-font); font-size: 1.3rem; line-height: 1.2; font-weight: 800; color: var(--ob-ink); letter-spacing: -.01em; }
.offerteblok .ob-sub { margin-top: 4px; color: var(--ob-muted); font-size: .95rem; max-width: 62ch; }
.offerteblok .ob-punten { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; list-style: none; font-size: .9rem; color: var(--ob-ink); }
.offerteblok .ob-punten li { margin: 0; padding: 0; }
.offerteblok .ob-punten li::before { content: "\2713"; color: var(--ob-accent); font-weight: 800; margin-right: 6px; }

.offerteblok .ob-knop, .offerteblok .ob-open {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; margin: 0; border: 0; border-radius: 999px;
  background: var(--ob-accent); color: var(--ob-accent-ink); box-shadow: none;
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: background-color .15s ease;
}
.offerteblok a.ob-open, .offerteblok a.ob-open:visited { color: var(--ob-accent-ink); border-bottom: 0; text-decoration: none; }
.offerteblok .ob-knop:hover, .offerteblok .ob-open:hover { background: var(--ob-accent-hover); color: var(--ob-accent-ink); }
.offerteblok .ob-knop:focus-visible, .offerteblok .ob-open:focus-visible,
.offerteblok input:focus-visible, .offerteblok select:focus-visible { outline: 3px solid var(--ob-accent); outline-offset: 2px; }
.offerteblok .ob-knop[disabled] { opacity: .7; cursor: progress; }

.offerteblok form { margin-top: 14px; }
.offerteblok .ob-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.offerteblok .ob-stap1 { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto; align-items: end; }
.offerteblok .ob-stap2 { margin-top: 12px; }
.offerteblok .ob-veld { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.offerteblok .ob-veld > label { margin: 0; font-size: .875rem; font-weight: 600; color: var(--ob-ink); }
.offerteblok input[type=text], .offerteblok input[type=email], .offerteblok input[type=tel], .offerteblok select {
  display: block; width: 100%; height: 48px; margin: 0; padding: 0 12px;
  border: 1px solid var(--ob-veld-rand); border-radius: 10px; background: #fff; color: var(--ob-ink); box-shadow: none;
  font: inherit; font-size: 16px; line-height: 1.2; /* 16px: iPhone zoomt dan niet in */
}
.offerteblok select { padding-right: 8px; }
.offerteblok [aria-invalid=true] { border-color: var(--ob-fout); box-shadow: 0 0 0 1px var(--ob-fout); }
.offerteblok .ob-fout { color: var(--ob-fout); font-size: .85rem; line-height: 1.3; }
.offerteblok .ob-fout[hidden] { display: none; }
.offerteblok .ob-akkoord { margin-top: 12px; }
.offerteblok .ob-akkoord > label { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: .875rem; font-weight: 400; color: var(--ob-muted); }
.offerteblok .ob-akkoord input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ob-accent); }
.offerteblok .ob-akkoord a { color: inherit; text-decoration: underline; border-bottom: 0; }
.offerteblok .lead-recipient-consent { margin: 8px 0 0 !important; font-size: .875rem; color: var(--ob-muted); }
.offerteblok .lead-recipient-consent p { margin: 0; }
/* De uitlegregel van LeadConsent herhaalt de zin uit de kop; alleen tonen als er benoemde ontvangers bij staan. */
.offerteblok .lead-recipient-consent:not(:has(label)) { display: none; }
.offerteblok .ob-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.offerteblok .ob-status { margin-top: 8px; font-size: .9rem; color: var(--ob-muted); }
.offerteblok .ob-status:empty { display: none; }
.offerteblok[data-staat=fout] .ob-status { color: var(--ob-fout); }
.offerteblok .ob-status a { color: inherit; text-decoration: underline; }
.offerteblok .ob-bedankt { margin-top: 12px; padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid var(--ob-rand); color: var(--ob-ink); }
.offerteblok .ob-bedankt:focus { outline: none; }
.offerteblok .ob-bedankt strong { display: block; margin-bottom: 2px; font-size: 1.05rem; }
.offerteblok .ob-honing { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Zichtbaarheid per staat. Zonder JavaScript staat data-staat al in de HTML (stap1 / open / dicht). */
.offerteblok .ob-open { display: none; }
.offerteblok[data-staat=dicht] .ob-open { display: inline-flex; }
.offerteblok[data-staat=dicht] form, .offerteblok[data-staat=klaar] form { display: none; }
.offerteblok[data-staat=stap1] .ob-stap2,
.offerteblok[data-staat=stap1] .ob-akkoord,
.offerteblok[data-staat=stap1] .ob-acties { display: none; }
.offerteblok:not([data-staat=stap1]) .ob-veld-knop { display: none; }
.offerteblok:not([data-staat=stap1]) .ob-stap1 { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.offerteblok[data-staat=klaar] .ob-punten { display: none; }

@media (max-width: 640px) {
  .offerteblok { margin: 16px 0 22px; padding: 16px 14px 14px; }
  .offerteblok .ob-titel { font-size: 1.15rem; }
  .offerteblok .ob-rij, .offerteblok .ob-stap1, .offerteblok:not([data-staat=stap1]) .ob-stap1 { grid-template-columns: 1fr; gap: 10px; }
  .offerteblok .ob-knop, .offerteblok .ob-open { width: 100%; }
  .offerteblok .ob-punten { gap: 2px 14px; font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { .offerteblok * { transition: none !important; } }
/* === Offerteblok — EINDE kern ============================================================= */
/* warmtepompradar.nl: huisstijl voor het offerteblok. Vaste waarden uit "laag 2" (style.css én gemeenten/stijl.css
   gebruiken andere variabelenamen; zo ziet het blok er op de layout- en de kennispagina's hetzelfde uit). */
.offerteblok {
  --ob-accent: #B3421F;
  --ob-accent-hover: #14171c;
  --ob-ink: #14171c;
  --ob-muted: #4b5259;
  --ob-bg: color-mix(in srgb, #E0562B 9%, #ffffff);
  --ob-rand: color-mix(in srgb, #E0562B 30%, #ffffff);
  --ob-veld-rand: #c9ccc6;
  --ob-kop-font: var(--font-display, inherit);
}
.offerteblok .ob-titel { font-weight: 700; }
/* home: het blok staat los onder de hero, in de gewone pagina-breedte */
.wrap > .offerteblok:only-child { margin-inline: auto; }
/* === Offerteblok — EINDE =================================================================== */