/* Home Plaza kennisblokken (14-10-2026)
   Geïnjecteerde SEO-blokken (sprint-secties, V5-beslishulp, regio, losse alinea's onder
   de blogtemplates, link-whisper) stonden zonder opmaak tot de rand van het scherm.
   Hier krijgen ze één rustige leeskolom, dezelfde letter als header en footer
   (Montserrat) en opgemaakte koppen, lijsten, tabellen, FAQ's en links.
   Bron: sites-beheer/docs/klanten/home-plaza/projectfotos-2026-10-09/live/ */

:root {
  --hpk-ink: #0d1727;
  --hpk-text: #3b4352;
  --hpk-mute: #667085;
  --hpk-line: #e4e7ec;
  --hpk-soft: #f5f6f8;
  --hpk-accent: #f2c230;
  --hpk-col: 760px;
  --hpk-gutter: 24px;
  --hpk-font: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (max-width: 767px) { :root { --hpk-gutter: 20px; } }

/* ---------- 1. de twee bandblokken: sprint-secties en beslishulp ---------- */
.hp-sprint-sections,
.hp-v5-decision-aid {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(48px, 6vw, 80px) var(--hpk-gutter) !important;
  background: #fff;
  border-top: 1px solid var(--hpk-line);
  font-family: var(--hpk-font) !important;
  color: var(--hpk-text);
  text-align: left;
}
.hp-v5-decision-aid { background: var(--hpk-soft); border-top: 0; }
.hp-v5-decision-aid + .hp-sprint-sections { border-top: 0; }

/* leeskolom */
.hp-sprint-sections > *,
.hp-v5-decision-aid > .elementor-container,
.hp-v5-decision-aid > :not(.elementor-container) {
  box-sizing: border-box;
  max-width: var(--hpk-col) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hp-v5-decision-aid > .elementor-container { display: block !important; width: 100%; padding: 0 !important; }
.hp-v5-decision-aid > .elementor-container > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* ---------- 2. gedeelde typografie voor alle kennisblokken ---------- */
:is(.hp-sprint-sections, .hp-v5-decision-aid, .hp-regio, .hpk-loose, .link-whisper-related-posts) :is(h2, h3, h4) {
  font-family: var(--hpk-font) !important;
  color: var(--hpk-ink) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  text-wrap: balance;
}
:is(.hp-sprint-sections, .hp-v5-decision-aid) h2 {
  font-size: clamp(24px, 2.3vw, 31px) !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  margin-top: 56px !important; margin-bottom: 14px !important;
}
:is(.hp-sprint-sections, .hp-v5-decision-aid) h3 {
  font-size: clamp(18px, 1.6vw, 21px) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-top: 32px !important; margin-bottom: 10px !important;
}
:is(.hp-sprint-sections, .hp-v5-decision-aid, .hp-v5-decision-aid > .elementor-container) > :is(h2, h3):first-child,
.hp-sprint-sections > :is(h2, h3):first-of-type { margin-top: 0 !important; }
/* sprint-koppen beginnen soms met een kleine letter */
:is(.hp-sprint-sections, .hp-v5-decision-aid) :is(h2, h3)::first-letter { text-transform: uppercase; }

:is(.hp-sprint-sections, .hp-v5-decision-aid) :is(p, li, td, th, summary, dd, dt) {
  font-family: var(--hpk-font) !important;
}
:is(.hp-sprint-sections, .hp-v5-decision-aid) :is(p, li) {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--hpk-text) !important;
}
:is(.hp-sprint-sections, .hp-v5-decision-aid) p { margin-top: 0 !important; margin-bottom: 16px !important; }
:is(.hp-sprint-sections, .hp-v5-decision-aid) :is(ul, ol) { margin-top: 6px !important; margin-bottom: 22px !important; padding: 0 0 0 1.25em !important; }
:is(.hp-sprint-sections, .hp-v5-decision-aid) li { margin-top: 0 !important; margin-bottom: 8px !important; padding-left: 4px; }
:is(.hp-sprint-sections, .hp-v5-decision-aid) ul > li::marker { color: var(--hpk-accent); font-size: 1.1em; }
:is(.hp-sprint-sections, .hp-v5-decision-aid) ol > li::marker { color: var(--hpk-ink); font-weight: 600; }
:is(.hp-sprint-sections, .hp-v5-decision-aid) strong { color: var(--hpk-ink); font-weight: 600; }

:is(.hp-sprint-sections, .hp-v5-decision-aid, .hpk-loose, .link-whisper-related-posts) a:not(.elementor-button):not([class*="button"]) {
  color: var(--hpk-ink) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--hpk-accent) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px;
}
:is(.hp-sprint-sections, .hp-v5-decision-aid, .hpk-loose, .link-whisper-related-posts) a:not(.elementor-button):not([class*="button"]):hover { text-decoration-color: var(--hpk-ink) !important; }

/* tabellen */
:is(.hp-sprint-sections, .hp-v5-decision-aid) table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: 0 !important;
  margin-top: 18px !important; margin-bottom: 28px !important;
  font-size: 15px !important;
  line-height: 1.5;
  background: #fff;
}
:is(.hp-sprint-sections, .hp-v5-decision-aid) :is(th, td) {
  padding: 12px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hpk-line) !important;
  text-align: left !important;
  vertical-align: top;
  color: var(--hpk-text);
  font-size: 15px !important;
}
:is(.hp-sprint-sections, .hp-v5-decision-aid) th {
  background: var(--hpk-soft) !important;
  color: var(--hpk-ink) !important;
  font-weight: 600 !important;
}
:is(.hp-sprint-sections, .hp-v5-decision-aid) tr > :first-child { color: var(--hpk-ink); font-weight: 600; }

/* FAQ (details) */
:is(.hp-sprint-sections, .hp-v5-decision-aid) details {
  border-bottom: 1px solid var(--hpk-line) !important;
  border-top: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: none !important;
}
:is(.hp-sprint-sections, .hp-v5-decision-aid) :is(h2, h3, p) + details,
:is(.hp-sprint-sections, .hp-v5-decision-aid) > details:first-child { border-top: 1px solid var(--hpk-line) !important; }
:is(.hp-sprint-sections, .hp-v5-decision-aid) summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 16px 36px 16px 0 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--hpk-ink) !important;
  line-height: 1.4;
}
:is(.hp-sprint-sections, .hp-v5-decision-aid) summary::-webkit-details-marker { display: none; }
:is(.hp-sprint-sections, .hp-v5-decision-aid) summary::after {
  content: "+";
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--hpk-ink);
  transition: transform .2s ease;
}
:is(.hp-sprint-sections, .hp-v5-decision-aid) details[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
:is(.hp-sprint-sections, .hp-v5-decision-aid) details > :not(summary) { margin-top: 0 !important; margin-bottom: 16px !important; }
:is(.hp-sprint-sections, .hp-v5-decision-aid) details + :is(h2, h3) { margin-top: 56px !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.hp-sprint-sections, .hp-v5-decision-aid) summary::after { transition: none; }
}

/* ---------- 3. regio-blok: gecentreerd in de container ---------- */
.hp-regio {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--hpk-col) + 2 * var(--hpk-gutter)) !important;
  margin: 56px auto 24px !important;
  padding: 0 var(--hpk-gutter) !important;
  align-self: center;
  font-family: var(--hpk-font) !important;
}
.hp-regio h2 { font-size: clamp(22px, 2.1vw, 28px) !important; font-weight: 600 !important; line-height: 1.25 !important; margin: 0 0 12px !important; }
.hp-regio p { font-family: var(--hpk-font) !important; color: var(--hpk-text); }
.hp-regio .hp-regio__lijst { gap: 0 !important; border-top: 1px solid var(--hpk-line); }
.hp-regio .hp-regio__lijst li { padding: 14px 0 !important; border-bottom: 1px solid var(--hpk-line) !important; margin: 0 !important; }
.hp-regio .hp-regio__lijst li:last-child { border-bottom: 1px solid var(--hpk-line) !important; }
.hp-regio .hp-regio__lijst a { color: var(--hpk-ink) !important; font-weight: 600 !important; }
.hp-regio .hp-regio__lijst a::after { content: " \2192"; color: var(--hpk-accent); }

/* ---------- 4. losse tekst onder de eigen blogtemplates ---------- */
/* main#hp-xx-20260710 > p/h2/... en de losse lead-alinea in het article */
main[id$="-20260710"] > :is(h2, h3, h4, p, ul, ol, table, dl, blockquote),
main[id$="-20260710"] > article > p:not([class]),
.bk-prose .hpr > :is(h2, h3, p, ul, ol):not([class]),
.bk-prose .hpr > :is(details.hpr-faq, ol.hpr-steps),
.hp-ko-main .hp-ko-faq > details,
.link-whisper-related-posts {
  box-sizing: border-box;
  width: min(var(--hpk-col), calc(100% - 2 * var(--hpk-gutter))) !important;
  max-width: var(--hpk-col) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
main[id$="-20260710"] > :is(h2, h3, h4, p, ul, ol, table, dl, blockquote),
main[id$="-20260710"] > article > p:not([class]),
.bk-prose .hpr > :is(h2, h3, p, ul, ol):not([class]) { font-family: var(--hpk-font) !important; }
main[id$="-20260710"] > :is(h2, h3),
.bk-prose .hpr > :is(h2, h3):not([class]) {
  color: var(--hpk-ink) !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance;
}
main[id$="-20260710"] > h2,
.bk-prose .hpr > h2:not([class]) { font-size: clamp(24px, 2.3vw, 31px) !important; margin-top: 56px !important; margin-bottom: 14px !important; }
main[id$="-20260710"] > h3,
.bk-prose .hpr > h3:not([class]) { font-size: clamp(18px, 1.6vw, 21px) !important; margin-top: 32px !important; margin-bottom: 10px !important; }
main[id$="-20260710"] > :is(h2, h3)::first-letter { text-transform: uppercase; }
main[id$="-20260710"] > :is(p, ul, ol),
main[id$="-20260710"] > article > p:not([class]),
.bk-prose .hpr > :is(p, ul, ol):not([class]) {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--hpk-text) !important;
}
main[id$="-20260710"] > p,
main[id$="-20260710"] > article > p:not([class]),
.bk-prose .hpr > p:not([class]) { margin-top: 0 !important; margin-bottom: 16px !important; }
main[id$="-20260710"] > :is(ul, ol),
.bk-prose .hpr > :is(ul, ol):not([class]) { padding-left: calc(1.25em + 0px) !important; margin-top: 6px !important; margin-bottom: 22px !important; }
main[id$="-20260710"] > :is(ul, ol) > li,
.bk-prose .hpr > :is(ul, ol):not([class]) > li { margin-bottom: 8px; }
main[id$="-20260710"] > ul > li::marker,
.bk-prose .hpr > ul:not([class]) > li::marker { color: var(--hpk-accent); }
/* ruimte en een haarlijn tussen het template en de losse tekst eronder */
main[id$="-20260710"] > :is(article, section, div) + :is(h2, h3, p) {
  margin-top: 72px !important;
  padding-top: 48px;
  border-top: 1px solid var(--hpk-line);
}
main[id$="-20260710"] > :is(h2, h3, h4, p, ul, ol, table, dl, blockquote):last-child,
main[id$="-20260710"] > :is(h2, h3, h4, p, ul, ol, table, dl, blockquote):has(+ :is(section, aside, nav, div:not([class*="lwrp"]))) { margin-bottom: 64px !important; }
main[id$="-20260710"] a:not([class]) { color: var(--hpk-ink); text-decoration-color: var(--hpk-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
main[id$="-20260710"] > table {
  border-collapse: collapse !important;
  margin-top: 18px !important;
  margin-bottom: 28px !important;
  font-family: var(--hpk-font);
  font-size: 15px;
}
main[id$="-20260710"] > table :is(th, td) { padding: 12px 14px !important; border: 0 !important; border-bottom: 1px solid var(--hpk-line) !important; text-align: left; vertical-align: top; }
main[id$="-20260710"] > table th { background: var(--hpk-soft); color: var(--hpk-ink); font-weight: 600; }

/* FAQ en stappen in de kranen-template */
.bk-prose .hpr > details.hpr-faq,
.hp-ko-main .hp-ko-faq > details { border-bottom: 1px solid var(--hpk-line); }
.bk-prose .hpr > details.hpr-faq > summary,
.hp-ko-main .hp-ko-faq > details > summary { padding: 14px 0; font-weight: 600; color: var(--hpk-ink); cursor: pointer; font-family: var(--hpk-font); }

/* link-whisper "Gerelateerde artikelen" */
.link-whisper-related-posts { margin-top: 48px !important; margin-bottom: 64px !important; padding: 28px 0 0 !important; border-top: 1px solid var(--hpk-line); font-family: var(--hpk-font); }
.link-whisper-related-posts h3 { font-size: 20px !important; font-weight: 600 !important; margin: 0 0 12px !important; }
.link-whisper-related-posts ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.link-whisper-related-posts li { margin: 0 !important; padding: 10px 0 !important; border-bottom: 1px solid var(--hpk-line); font-size: 16px; }

/* ---------- 5. mobiel: brede tabellen scrollen binnen de kolom ---------- */
@media (max-width: 767px) {
  :is(.hp-sprint-sections, .hp-v5-decision-aid) table,
  main[id$="-20260710"] > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  :is(.hp-sprint-sections, .hp-v5-decision-aid) :is(th, td),
  main[id$="-20260710"] > table :is(th, td) { min-width: 140px; }
}

/* ---------- 6. losse lead-zinnen buiten de templates ---------- */
body > p:not([class]),
main[id$="-main"] > p:not([class]) {
  box-sizing: border-box;
  width: min(var(--hpk-col), calc(100% - 2 * var(--hpk-gutter))) !important;
  margin: 48px auto 8px !important;
  font-family: var(--hpk-font) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--hpk-text) !important;
}

/* ---------- 7. configurator-melding (Elementor HTML-widget) ---------- */
.elementor-element-ade0e36 > .elementor-widget-container {
  box-sizing: border-box;
  max-width: calc(var(--hpk-col) + 2 * var(--hpk-gutter));
  margin: 0 auto;
  padding: 0 var(--hpk-gutter);
}
.elementor-element-ade0e36 h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 600; color: var(--hpk-ink); margin: 0 0 12px; text-wrap: balance; }
.elementor-element-ade0e36 p { font-size: 17px; line-height: 1.7; color: var(--hpk-text); }

/* ---------- 8. mobiel: offerteblokken en lokale blokken zonder zijmarge ---------- */
@media (max-width: 767px) {
  .elementor-column.elementor-element-628922e > .elementor-widget-wrap,
  .elementor-column.elementor-element-30af06a > .elementor-widget-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .hp-lok-20260814 { padding-left: 10px; padding-right: 10px; box-sizing: border-box; }
}

/* ---------- 9. vergelijkingskaartjes in de kranen-template (.hpr-cards) ---------- */
.hpr > .hpr-cards {
  box-sizing: border-box;
  width: min(var(--hpk-col), calc(100% - 2 * var(--hpk-gutter)));
  margin: 8px auto 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 28px;
  border-top: 2px solid var(--hpk-ink);
  font-family: var(--hpk-font);
}
.hpr > .hpr-cards > .hpr-card { padding: 16px 0 18px; border-bottom: 1px solid var(--hpk-line); }
.hpr > .hpr-cards > .hpr-card > b { display: block; font-size: 17px; font-weight: 600; color: var(--hpk-ink); margin-bottom: 6px; }
.hpr > .hpr-cards > .hpr-card > span { display: block; font-size: 16px; line-height: 1.65; color: var(--hpk-text); }