/* polish.css — laatste laag over alle pagina's (design-verbeteringen boven op de 1-op-1 overname).
   Regel: alleen verfijning (afstand, hover, lezen op mobiel, kleine details). Kleuren en maten uit de variabelen in hb.css.
   Geladen als laatste stylesheet door pagina() in src/layout.js. */

/* ---------- Basis ---------- */
html { scroll-behavior: smooth; }
::selection { background: rgba(103,191,97,.3); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid rgba(103,191,97,.55); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; }
main p, main li { text-wrap: pretty; }
img { image-rendering: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ---------- Header: blijft in beeld bij scrollen ---------- */
.hb-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); box-shadow: 0 1px 0 var(--hb-lijn,#E6E8E6); }
.hb-header + * [id], main [id] { scroll-margin-top: 96px; }

/* ---------- Knoppen: rustige, voelbare hover ---------- */
.wp-block-button__link, .gform_button, .hb-btn { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.wp-block-button__link:hover, .gform_button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(62,140,57,.22); }
.wp-block-button__link:active, .gform_button:active { transform: translateY(0); box-shadow: none; }

/* ---------- Hero op artikel-, capaciteits-, merk- en overzichtspagina's ---------- */
.hb-hero { background: radial-gradient(900px 420px at 85% 0%, rgba(255,255,255,.10), transparent 60%), linear-gradient(135deg, #43963D 0%, #357F30 100%); }
.hb-hero-media img { box-shadow: 0 18px 40px rgba(0,0,0,.22); }
.hb-hero-back { font-size: 14px; opacity: .85; text-decoration: none; transition: opacity .15s; }
.hb-hero-back:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.hb-hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; opacity: .95; }
.hb-hero-pill { backdrop-filter: none; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
@media (max-width: 781px) {
  /* Eerst de titel, dan pas de foto: de bezoeker ziet direct waar de pagina over gaat */
  .hb-hero-media { order: 2; margin-top: 4px; }
  .hb-hero { padding-bottom: 28px; }
  .hb-hero-text { padding: 12px 0 20px; }
  .hb-hero h1 { font-size: 34px !important; line-height: 1.12; }
}

/* ---------- Mobiel: niets tegen de rand van het scherm ---------- */
.hb-other-sizes, .hb-authorgrid-wrap { padding-inline: var(--hb-pad, 20px); box-sizing: border-box; }
.hb-other-sizes { max-width: calc(1080px + 2 * var(--hb-pad, 20px)); }
@media (max-width: 781px) { .hb-insightsgrid-wrap { padding-inline: 20px; } .hb-insightsgrid-breakout { padding-inline: 0; } }

/* ---------- Kaarten (artikelen en merken): gelijke hoogte, rustige hover ---------- */
.hb-insightscard { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hb-insightscard:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(31,32,36,.10); border-color: rgba(103,191,97,.55); }
.hb-insightscard-img { overflow: hidden; }
.hb-insightscard-img img { transition: transform .35s ease; }
.hb-insightscard:hover .hb-insightscard-img img { transform: scale(1.035); }
.hb-insightscard-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hb-insightscard-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hb-other-sizes-tile { box-shadow: 0 1px 2px rgba(31,32,36,.04); }

/* ---------- Inhoudsopgave: rustiger, twee kolommen op breed scherm ---------- */
.hb-toc a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .2s; }
.hb-toc a:hover { background-size: 100% 1px; }
@media (min-width: 900px) { .hb-toc ul { columns: 2; column-gap: 40px; } .hb-toc li { break-inside: avoid; } }

/* ---------- Lezen: iets meer lucht tussen alinea's en koppen ---------- */
.hb-ins .wp-block-paragraph { line-height: 1.75; }
.hb-ins .wp-block-heading { margin-top: 2.2em; }
.hb-ins img { border-radius: 12px; }

/* ---------- Formulieren ---------- */
.hb-nieuwsbrief input[type=text], .hb-nieuwsbrief input[type=email], .hb-nieuwsbrief select, .hb-nieuwsbrief textarea { transition: border-color .15s, box-shadow .15s; }
.hb-nieuwsbrief input:focus, .hb-nieuwsbrief select:focus, .hb-nieuwsbrief textarea:focus { border-color: var(--hb-groen,#67BF61); box-shadow: 0 0 0 3px rgba(103,191,97,.2); outline: 0; }
@media (min-width: 900px) { .hb-toc ul { display: block; } }

/* ---------- Team: twee kolommen op breed scherm, met hover ---------- */
@media (min-width: 900px) { .hb-team-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .hb-team-card { margin: 0 !important; } .hb-team { max-width: 980px; margin-inline: auto; } }
.hb-team-card { transition: transform .18s ease, box-shadow .18s ease; }
.hb-team-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,32,36,.09); }
.hb-team-bio { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Homepage: tekstlinks met pijl ---------- */
.hb-hp-link::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform .15s ease; }
.hb-hp-link:hover::after { transform: translateX(3px); }

/* ---------- Formulieren: ruimte tussen de velden ---------- */
.hb-nieuwsbrief .gfield { margin: 0 0 18px; }
.hb-nieuwsbrief .gfield_label { display: block; margin-bottom: 6px; }
.hb-nieuwsbrief textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 12px 14px; border: 1px solid var(--hb-lijn,#E6E8E6); border-radius: 10px; resize: vertical; }
.hb-nieuwsbrief .gform_footer { margin-top: 8px; }

/* ---------- Knop "terug naar boven" (rechtsonder) ---------- */
.hb-naar-boven { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 55; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--hb-groen,#67BF61); color: #fff; box-shadow: 0 6px 18px rgba(31,32,36,.25); text-decoration: none; transition: transform .15s ease, background-color .15s ease, opacity .2s; }
.hb-naar-boven[hidden] { display: none; }
.hb-naar-boven:hover { background: var(--hb-groen-donker,#2F7432); transform: translateY(-2px); }
@media print { .hb-naar-boven { display: none; } }

/* ---------- Regel: inhoud is nooit breder dan de inhoud van de header ----------
   Zichtbare linkerrand van de header = --hb-pad + ±4 px (leeg randje in het logo).
   Alle paginablokken gebruiken dezelfde inset op tablet en mobiel. */
:root { --hb-inset: calc(var(--hb-pad, clamp(20px, 5vw, 48px)) + clamp(4px, 1vw, 12px)); }
@media (max-width: 1200px) {
  .hb-ins-sec, .hb-ins-sec-tight { padding-inline: var(--hb-inset); box-sizing: border-box; }
  .hb-hero { padding-inline: var(--hb-inset); }
  .hb-cta { padding-inline: var(--hb-inset); }
  .hb-insightsgrid-wrap, .hb-other-sizes, .hb-authorgrid-wrap { padding-inline: var(--hb-inset); }
  .hb-ins-related-wrap .hb-insightsgrid-wrap { padding-inline: 0; }
  .hb-authorhero { margin-inline: var(--hb-inset); max-width: calc(100% - 2 * var(--hb-inset)); box-sizing: border-box; }
}
@media (max-width: 781px) { .hb-insightsgrid-wrap { padding-inline: var(--hb-inset); } }
@media (max-width: 600px) {
  .hb-about-stat-num { font-size: clamp(24px, 8vw, 34px) !important; overflow-wrap: anywhere; }
}
@media (max-width: 1200px) {
  .hb-insightsgrid-breakout { padding-inline: var(--hb-inset); box-sizing: border-box; }
  .hb-insightsgrid-breakout .hb-insightsgrid-wrap { padding-inline: 0; }
  .hb-cap-scale { padding-inline: var(--hb-inset); box-sizing: border-box; }
  .hb-cta-cap { padding-inline: var(--hb-inset); }
}
@media (max-width: 1200px) {
  .hb-ins-related-wrap .hb-insightsgrid-breakout { padding-left: var(--hb-inset); padding-right: var(--hb-inset); }
}

/* ---------- Eén hover-effect voor alle kaartenrasters (zelfde als homepage-nieuws en populaire vragen) ---------- */
.hb-insightscard:hover { transform: none; box-shadow: none; border-color: transparent; }
.hb-insightscard-link:not(#hb-specificity-boost):not(#hb-specificity-boost),
.hb-authorgrid-card:not(#hb-specificity-boost):not(#hb-specificity-boost) { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.hb-insightscard-link:hover:not(#hb-specificity-boost):not(#hb-specificity-boost),
.hb-authorgrid-card:hover:not(#hb-specificity-boost):not(#hb-specificity-boost),
.hb-insightscard-link:focus-visible:not(#hb-specificity-boost):not(#hb-specificity-boost) { box-shadow: var(--hb-schaduw-lg, 0 16px 40px -20px rgba(31,32,36,.30)); transform: translateY(-4px); border-color: var(--hb-groen, #67BF61); }
.hb-insightscard-img img:not(#hb-specificity-boost):not(#hb-specificity-boost),
.hb-authorgrid-card img { transition: transform .5s ease; }
.hb-insightscard-link:hover .hb-insightscard-img img:not(#hb-specificity-boost):not(#hb-specificity-boost),
.hb-authorgrid-card:hover img { transform: scale(1.04); }
.hb-other-sizes-tile:hover { box-shadow: var(--hb-schaduw-lg, 0 16px 40px -20px rgba(31,32,36,.30)); transform: translateY(-4px); border-color: var(--hb-groen, #67BF61); }
@media (prefers-reduced-motion: reduce) { .hb-insightscard-link:hover:not(#hb-specificity-boost):not(#hb-specificity-boost), .hb-authorgrid-card:hover:not(#hb-specificity-boost):not(#hb-specificity-boost), .hb-other-sizes-tile:hover { transform: none; } .hb-insightscard-link:hover .hb-insightscard-img img:not(#hb-specificity-boost):not(#hb-specificity-boost), .hb-authorgrid-card:hover img { transform: none; } }

/* ---------- Kaartjes gelijk naast elkaar (geen weeskaart op een tweede rij) ---------- */
.hb-trust-cards:not(#hb-specificity-boost):not(#hb-specificity-boost) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)) !important; }

/* Cijferblokken op mobiel: onder elkaar, volle breedte (geen 2+1 met afgebroken cijfers) */
@media (max-width: 600px) {
  .hb-about-stats:not(#hb-specificity-boost):not(#hb-specificity-boost) { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 28px !important; }
  .hb-about-stat:not(#hb-specificity-boost):not(#hb-specificity-boost) { padding: 20px 16px !important; }
  .hb-about-stat-num:not(#hb-specificity-boost):not(#hb-specificity-boost) { font-size: 30px !important; white-space: nowrap; }
}

/* Tabellen op mobiel: passen in het scherm (anders zijn kolommen afgesneden), scrollen alleen bij heel brede tabellen */
@media (max-width: 600px) {
  .hb-ins .wp-block-table table, .wp-block-table table { min-width: 0; }
  .hb-ins .wp-block-table th, .hb-ins .wp-block-table td { padding: 10px 8px; font-size: 13px; }
  .hb-ins .wp-block-table th { font-size: 11px; letter-spacing: 0; }
  .wp-block-table { overflow-x: auto; }
}
@media (max-width: 600px) {
  .wp-block-table { background: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 28px 100% no-repeat local, linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center / 28px 100% no-repeat local, linear-gradient(to right, rgba(31,32,36,.14), rgba(31,32,36,0)) left center / 10px 100% no-repeat scroll, linear-gradient(to left, rgba(31,32,36,.14), rgba(31,32,36,0)) right center / 10px 100% no-repeat scroll; }
}

/* Capaciteitshub: "Jump to another capacity" even breed en met dezelfde witruimte onder de hero als op de capaciteitspagina's */
.hb-ins-col.hb-cap-wide:has(.hb-cap-jump) { max-width: 1080px; }
.hb-ins-sec-tight:has(.hb-cap-jump) { padding-top: 0 !important; }
.hb-cap-jump { margin-top: 40px; }

/* ===== Ronde 5-11-2026: geen losse kaart in een rij, labels minimaal 12px ===== */
/* Vier kaarten: 2x2 in plaats van 3+1 */
@media (min-width: 481px) {
  .hb-trust-cards:has(> :nth-child(4):last-child):not(#hb-specificity-boost):not(#hb-specificity-boost) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hb-steps:has(> div:nth-of-type(4):last-of-type):not(#hb-specificity-boost) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Drie stappen: onder elkaar (de tekstkolom is te smal voor drie naast elkaar zonder 2+1) */
.hb-steps:has(> div:nth-of-type(3):last-of-type):not(#hb-specificity-boost) { grid-template-columns: 1fr; }
/* Vijf stappen: 3 + 2 gecentreerd */
@media (min-width: 481px) {
  .hb-steps:has(> div:nth-of-type(5):last-of-type):not(#hb-specificity-boost) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hb-steps:has(> div:nth-of-type(5):last-of-type) > div { grid-column: span 2; }
  .hb-steps:has(> div:nth-of-type(5):last-of-type) > div:nth-of-type(4) { grid-column: 2 / span 2; }
  .hb-steps:has(> div:nth-of-type(5):last-of-type) > div:nth-of-type(5) { grid-column: 4 / span 2; }
}
/* Team: oneven laatste kaart gecentreerd */
@media (min-width: 900px) {
  .hb-team-grid > .hb-team-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}
/* Kleine labels niet onder 12px */
.hb-cap-scale-fact-k, .hb-author-label { font-size: 12px; }
#hb-configurator-mount .hb-kpi-l { font-size: .75rem !important; }

/* Kaartenrasters: een losse laatste kaart staat gecentreerd (nooit 3+1 links uitgelijnd) */
.hb-authorgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .hb-authorgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hb-authorgrid { grid-template-columns: 1fr; } }
@media (min-width: 901px) {
  .hb-insightsgrid > :last-child:nth-child(3n+1), .hb-authorgrid > :last-child:nth-child(3n+1) { grid-column: 2; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .hb-insightsgrid > :last-child:nth-child(2n+1), .hb-authorgrid > :last-child:nth-child(2n+1) { grid-column: 1 / -1; width: calc(50% - 12px); justify-self: center; }
}
@media (min-width: 601px) and (max-width: 1199px) { .hb-hp-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Kaartenraster even breed als de tegelrij erboven (breed scherm: geen extra zijpadding) */
@media (min-width: 1201px) {
  .hb-insightsgrid-breakout .hb-insightsgrid-wrap { padding-inline: 0; }
}

/* Contrast (WCAG AA, Lighthouse 100): groene knoppen met witte tekst en groene tekstlinks iets donkerder (Jack 6-11-2026) */
.wp-block-button__link.wp-element-button,.hb-btn-primary,.hb-head-btn-groen .wp-block-button__link{background-color:#37813A!important;background-image:none!important}
.wp-block-button__link.wp-element-button:hover,.hb-btn-primary:hover{background-color:#2D6B30!important}
a{--hb-link:#37813A}
.hb-hp-btn--primary:not(.hb-hp-cta *){background:#37813A;border-color:#37813A}
.hb-hp-btn--primary:not(.hb-hp-cta *):hover{background:#2D6B30;border-color:#2D6B30}
.gform_button,button.gform_button{background:#37813A!important}
.hb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}