/*
Theme Name: SHHI – Helpende Hand
Theme URI: https://shhi.nl
Author: Stichting Helpende Hand Internationaal
Description: Blokthema voor Stichting Helpende Hand Internationaal. Gebouwd voor de WordPress-site-editor: alle pagina's, kleuren, lettertypen, header en footer zijn zonder code te beheren. Inclusief patronen voor het weeshuisproject, acties en een doneerformulier (eenmalig en maandelijks) via Pronamic Pay doneren met Mollie.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.2.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shhi
Tags: full-site-editing, block-patterns, block-styles, one-column, wide-blocks, custom-colors, editor-style
*/

/* ---------- Basis ---------- */
:root {
	--shhi-radius: var(--wp--custom--radius--groot, 28px);
	--shhi-ease: cubic-bezier(.2, .7, .2, 1);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.shhi-landing > .alignfull { margin-block-start: 0; margin-block-end: 0; }
:where(h1, h2, h3) { font-variation-settings: "opsz" 96, "SOFT" 50; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--wp--preset--color--terracotta); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--wp--preset--color--zand); color: var(--wp--preset--color--inkt); }

.skip-link.screen-reader-text:focus { background: var(--wp--preset--color--wit); }

/* ---------- Header ---------- */
.shhi-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid rgba(217,209,203,.6); }
.admin-bar .shhi-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .shhi-header { top: 46px; } }
.shhi-header .wp-block-site-logo img, .shhi-logo img { height: auto; }
.shhi-header .wp-block-navigation a { text-underline-offset: 6px; }
.shhi-header .wp-block-navigation .current-menu-item > a,
.shhi-header .wp-block-navigation a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--wp--preset--color--roze); text-decoration-thickness: 3px; }
.shhi-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--blush); padding: 2rem; }
.shhi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.35rem; }

/* ---------- Knoppen ---------- */
.wp-element-button, .wp-block-button__link { transition: background-color .2s var(--shhi-ease), transform .2s var(--shhi-ease), box-shadow .2s var(--shhi-ease); }
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.is-style-outline > .wp-block-button__link { border: 2px solid currentColor; background: transparent; color: var(--wp--preset--color--inkt); padding: calc(.85rem - 2px) calc(1.6rem - 2px); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--wit); border-color: var(--wp--preset--color--inkt); }
.has-bos-background-color .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--wit); }
.has-bos-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--wit); color: var(--wp--preset--color--bos); border-color: var(--wp--preset--color--wit); }
.has-bos-background-color .is-style-kaart .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--inkt); }
.has-bos-background-color .is-style-kaart .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--wit); border-color: var(--wp--preset--color--inkt); }
.has-bos-background-color .is-style-kaart .shhi-icoon { background: var(--wp--preset--color--blush); color: var(--wp--preset--color--terracotta); }
.wp-block-button.is-style-zand > .wp-block-button__link { background: var(--wp--preset--color--zand); color: var(--wp--preset--color--inkt); }
.wp-block-button.is-style-zand > .wp-block-button__link:hover { background: var(--wp--preset--color--wit); }
.shhi-knop-hart .wp-block-button__link::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -.14em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.3 8.4 2.2 4.5 6 4.1c2.2-.2 4.1 1 6 3.2 1.9-2.2 3.8-3.4 6-3.2 3.8.4 5.7 4.3 4 7.6C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.3 8.4 2.2 4.5 6 4.1c2.2-.2 4.1 1 6 3.2 1.9-2.2 3.8-3.4 6-3.2 3.8.4 5.7 4.3 4 7.6C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- Bovenregel (eyebrow) ---------- */
.shhi-eyebrow { font-family: var(--wp--preset--font-family--figtree); font-size: var(--wp--preset--font-size--klein); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--terracotta); }
.has-bos-background-color .shhi-eyebrow { color: var(--wp--preset--color--zand); }
.shhi-accent-italic em { font-style: italic; color: var(--wp--preset--color--terracotta); font-weight: 500; }
.has-bos-background-color .shhi-accent-italic em { color: var(--wp--preset--color--zand); }

/* ---------- Kaarten ---------- */
.is-style-kaart { background: var(--wp--preset--color--wit); border-radius: var(--wp--custom--radius--middel); box-shadow: var(--wp--preset--shadow--zacht); }
.is-style-kaart-blush { background: var(--wp--preset--color--blush); border-radius: var(--wp--custom--radius--middel); }
.is-style-kaart, .is-style-kaart-blush { transition: transform .25s var(--shhi-ease), box-shadow .25s var(--shhi-ease); }
a .is-style-kaart:hover, .is-style-kaart:has(a:hover) { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--diep); }

/* Icoon in cirkel */
.shhi-icoon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--wp--preset--color--blush); color: var(--wp--preset--color--terracotta); margin: 0 0 1rem; }
.shhi-icoon svg { width: 1.55rem; height: 1.55rem; }
.has-bos-background-color .shhi-icoon { background: rgba(249,212,168,.14); color: var(--wp--preset--color--zand); }
.is-style-kaart-blush .shhi-icoon { background: var(--wp--preset--color--wit); }

/* ---------- Hero ---------- */
.shhi-hero { position: relative; overflow: hidden; }
.shhi-hero h1 { margin-top: .5rem; }
.shhi-hero-beeld { position: relative; }
.shhi-hero-beeld .wp-block-image img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.shhi-zwevend { position: absolute; left: -1.5rem; bottom: 2rem; max-width: 300px; z-index: 2; }
@media (max-width: 781px) { .shhi-zwevend { position: relative; left: 0; bottom: 0; margin-top: -3rem !important; margin-left: 1rem !important; } }
.shhi-vertrouwen { color: var(--wp--preset--color--grijs); }
.shhi-vertrouwen strong { color: var(--wp--preset--color--inkt); }

/* Decoratieve krul (uit de huisstijl) */
.shhi-krul { position: relative; isolation: isolate; overflow: clip; }
.shhi-krul::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 340px; height: 240px; right: -90px; top: -70px; background: url("assets/images/krul-taupe.svg") center/contain no-repeat; opacity: .9; }
.shhi-krul-links::before { left: -120px; right: auto; top: auto; bottom: -60px; transform: rotate(160deg); }
.shhi-krul-zand::before { background-image: url("assets/images/krul-zand.svg"); }
@media (max-width: 781px) { .shhi-krul::before { width: 200px; height: 140px; right: -80px; top: -50px; } }

/* ---------- Voortgang / tijdlijn ---------- */
.shhi-tijdlijn { counter-reset: stap; }
.shhi-tijdlijn > .wp-block-column { position: relative; padding-top: 2.75rem; }
.shhi-tijdlijn > .wp-block-column::before { content: ""; position: absolute; top: .65rem; left: 0; right: -2rem; height: 3px; background: var(--wp--preset--color--roze); border-radius: 2px; }
.shhi-tijdlijn > .wp-block-column:last-child::before { right: 0; background: repeating-linear-gradient(90deg, var(--wp--preset--color--roze) 0 8px, transparent 8px 14px); }
.shhi-tijdlijn > .wp-block-column::after { content: "✓"; position: absolute; top: 0; left: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--wp--preset--color--terracotta); color: #fff; font-size: .85rem; font-weight: 800; display: grid; place-items: center; }
.shhi-tijdlijn > .is-style-bezig::after, .shhi-tijdlijn > .shhi-bezig::after { content: ""; background: var(--wp--preset--color--wit); border: 3px solid var(--wp--preset--color--terracotta); box-shadow: 0 0 0 6px rgba(163,90,54,.18); animation: shhi-puls 2.2s infinite; }
.shhi-tijdlijn > .shhi-straks::after { content: ""; background: var(--wp--preset--color--wit); border: 3px dashed var(--wp--preset--color--roze); }
@keyframes shhi-puls { 0%,100% { box-shadow: 0 0 0 4px rgba(163,90,54,.22); } 50% { box-shadow: 0 0 0 10px rgba(163,90,54,.05); } }
@media (max-width: 781px) {
	.shhi-tijdlijn > .wp-block-column { padding-top: 0; padding-left: 2.75rem; }
	.shhi-tijdlijn > .wp-block-column::before { top: 1.6rem; bottom: -2rem; left: .7rem; right: auto; width: 3px; height: auto; }
	.shhi-tijdlijn > .wp-block-column:last-child::before { display: none; }
}
.shhi-jaar { font-family: var(--wp--preset--font-family--fraunces); font-weight: 650; font-size: 1.6rem; line-height: 1; color: var(--wp--preset--color--terracotta); }

/* Voortgangsbalk */
.shhi-balk { height: 14px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.shhi-balk > span { display: block; height: 100%; width: var(--w, 25%); border-radius: inherit; background: linear-gradient(90deg, var(--wp--preset--color--zand), #F3B97A); }
.has-blush-background-color .shhi-balk, .has-wit-background-color .shhi-balk { background: var(--wp--preset--color--taupe); }

/* ---------- Cijfers ---------- */
.shhi-cijfer { font-family: var(--wp--preset--font-family--fraunces); font-weight: 650; line-height: 1; letter-spacing: -.02em; }
.has-bos-background-color .shhi-cijfer { color: var(--wp--preset--color--zand); }

/* ---------- Afbeeldingen ---------- */
.shhi-beeld-staand img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.shhi-beeld-vierkant img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.shhi-beeld-breed img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

/* ---------- Berichten (acties) ---------- */
.shhi-acties .wp-block-post { display: flex; }
.shhi-acties .wp-block-post > .wp-block-group { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.shhi-acties .wp-block-post-featured-image { margin: 0; }
.shhi-acties .wp-block-post-featured-image img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border-radius: 0; }
.shhi-acties .wp-block-post-featured-image:not(:has(img)) { aspect-ratio: 3 / 2; background: var(--wp--preset--color--blush) url("assets/images/logo-stempel.png") center / 34% no-repeat; }
.shhi-acties .wp-block-post-title a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s var(--shhi-ease); }
.shhi-acties .wp-block-post:hover .wp-block-post-title a { background-size: 100% 2px; }
.shhi-meer::after { content: " →"; }
.wp-block-query-pagination { font-weight: 700; }

/* Single */
.shhi-single-beeld img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.wp-block-post-content > p:first-child { font-size: var(--wp--preset--font-size--groot); }

/* ---------- Doneren ---------- */
.shhi-doneer-kaart { position: relative; }
.shhi-keuze { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.shhi-tabs { display: inline-flex; padding: .3rem; gap: .25rem; background: var(--wp--preset--color--blush); border-radius: 999px; }

/* Pronamic-formulier in huisstijl */
.wp-block-pronamic-form { display: grid; gap: 1.25rem; }
.wp-block-pronamic-form .wp-block-pronamic-form-label, .wp-block-pronamic-form .wp-block-pronamic-form-label label, .wp-block-pronamic-form .wp-block-pronamic-form-label span { font-weight: 700; font-size: var(--wp--preset--font-size--klein); letter-spacing: .02em; display: block; margin-bottom: .45rem; color: var(--wp--preset--color--inkt); }
.wp-block-pronamic-form input[type="text"], .wp-block-pronamic-form input[type="email"], .wp-block-pronamic-form input[type="tel"], .wp-block-pronamic-form textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 1.0625rem; padding: .85rem 1rem; border: 1.5px solid var(--wp--preset--color--taupe); border-radius: 12px; background: #fff; color: var(--wp--preset--color--inkt); transition: border-color .2s, box-shadow .2s;
}
.wp-block-pronamic-form input:focus, .wp-block-pronamic-form textarea:focus { outline: none; border-color: var(--wp--preset--color--terracotta); box-shadow: 0 0 0 4px rgba(163,90,54,.15); }
.wp-block-pronamic-form .wp-block-pronamic-form-radio-field__inner-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.wp-block-pronamic-form .wp-block-pronamic-form-radio-option { position: relative; }
.wp-block-pronamic-form .wp-block-pronamic-form-radio-option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.wp-block-pronamic-form .wp-block-pronamic-form-radio-option label { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.1rem; padding: .55rem .9rem; border: 1.5px solid var(--wp--preset--color--taupe); border-radius: 12px; font-weight: 700; background: #fff; text-align: center; transition: all .18s var(--shhi-ease); }
.wp-block-pronamic-form .wp-block-pronamic-form-radio-option input:checked + label { border-color: var(--wp--preset--color--terracotta); background: var(--wp--preset--color--blush); box-shadow: inset 0 0 0 1px var(--wp--preset--color--terracotta); color: var(--wp--preset--color--terracotta-donker); }
.wp-block-pronamic-form .wp-block-pronamic-form-radio-option input:focus-visible + label { outline: 3px solid var(--wp--preset--color--terracotta); outline-offset: 2px; }
.wp-block-pronamic-form .wp-block-pronamic-form-radio-option:hover label { border-color: var(--wp--preset--color--roze); }
.wp-block-pronamic-form .pronamic-forms-radio-option-image { width: 34px !important; height: auto; }
.shhi-frequentie .wp-block-pronamic-form-radio-field__inner-blocks { grid-template-columns: repeat(2, 1fr); }
.shhi-bedrag-snel { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 0 0 .6rem; }
.shhi-bedrag-snel button { font: inherit; font-weight: 800; font-size: 1.05rem; padding: .7rem .5rem; border: 1.5px solid var(--wp--preset--color--taupe); border-radius: 12px; background: #fff; color: var(--wp--preset--color--inkt); cursor: pointer; transition: all .18s var(--shhi-ease); }
.shhi-bedrag-snel button:hover { border-color: var(--wp--preset--color--roze); }
.shhi-bedrag-snel button[aria-pressed="true"] { border-color: var(--wp--preset--color--terracotta); background: var(--wp--preset--color--blush); color: var(--wp--preset--color--terracotta-donker); box-shadow: inset 0 0 0 1px var(--wp--preset--color--terracotta); }
.shhi-bedrag .wp-block-pronamic-form-control { position: relative; }
.shhi-bedrag .wp-block-pronamic-form-control::before { content: "€"; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--wp--preset--color--grijs); }
.shhi-bedrag .wp-block-pronamic-form-control input { padding-left: 2.2rem !important; font-weight: 700; }
.shhi-doneer-impact { font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--grijs); min-height: 1.4em; margin: .25rem 0 0; }
.wp-block-pronamic-form .wp-block-button__link { width: 100%; font-size: 1.15rem; padding-top: 1.05rem; padding-bottom: 1.05rem; }
.wp-block-pronamic-form .wp-block-buttons, .wp-block-pronamic-form .wp-block-button { width: 100%; }
.wp-block-pronamic-form-submission-notification { padding: 1rem 1.25rem; border-radius: 12px; background: var(--wp--preset--color--blush); }
.shhi-veilig::before { content: ""; width: 1em; height: 1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center/contain no-repeat; }
.shhi-veilig { display: flex; align-items: center; gap: .5rem; justify-content: center; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--grijs); }

/* Plaatshouder als de doneerplugin nog niet actief is */
.shhi-plugin-melding { border: 2px dashed var(--wp--preset--color--roze); border-radius: 16px; padding: 1.25rem; background: var(--wp--preset--color--blush); font-size: var(--wp--preset--font-size--klein); }

/* ---------- FAQ ---------- */
.wp-block-details summary { font-weight: 700; font-size: var(--wp--preset--font-size--groot); cursor: pointer; list-style: none; position: relative; padding-right: 2rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: 0; top: -.1rem; font-size: 1.6rem; font-weight: 400; color: var(--wp--preset--color--terracotta); transition: transform .2s; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }

/* ---------- Footer ---------- */
.shhi-footer a { color: inherit; text-decoration: none; }
.shhi-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.shhi-footer .shhi-footer-kop { color: var(--wp--preset--color--zand); }
.shhi-footer .wp-block-social-links .wp-social-link { background: rgba(255,255,255,.1) !important; color: #fff !important; }
.shhi-iban { font-variant-numeric: tabular-nums; letter-spacing: .03em; white-space: nowrap; font-weight: 600; }

/* ---------- Mobiel ---------- */
@media (max-width: 781px) {
	.shhi-omkeren-mobiel { flex-direction: column-reverse; }
	.shhi-bedrag-snel { grid-template-columns: repeat(2, 1fr); }
}
.shhi-lijst-kaal { list-style: none; padding-left: 0; line-height: 2; }
.shhi-lijst-vink { list-style: none; padding-left: 0; }
.shhi-lijst-vink li { position: relative; padding-left: 1.9rem; margin-bottom: .55rem; }
.shhi-lijst-vink li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--wp--preset--color--blush) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A35A36' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat; }
.has-bos-background-color .shhi-lijst-vink li::before { background-color: rgba(249,212,168,.18); }
.shhi-monogram { width: 5.5rem; height: 5.5rem; border-radius: 50%; display: grid; place-items: center; margin: 0 auto .75rem; background: var(--wp--preset--color--blush); color: var(--wp--preset--color--terracotta); font-family: var(--wp--preset--font-family--fraunces); font-size: 2.2rem; font-weight: 650; }
.shhi-stappen { list-style: none; counter-reset: stap; padding-left: 0; }
.shhi-stappen li { counter-increment: stap; position: relative; padding: 0 0 1.1rem 3.25rem; min-height: 2.4rem; }
.shhi-stappen li::before { content: counter(stap); position: absolute; left: 0; top: -.1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--terracotta); color: #fff; font-weight: 800; font-size: .95rem; }
.shhi-stappen li:not(:last-child)::after { content: ""; position: absolute; left: 1.05rem; top: 2.3rem; bottom: .2rem; width: 2px; background: var(--wp--preset--color--taupe); }
.is-style-kaart.shhi-bezig { box-shadow: 0 0 0 2px var(--wp--preset--color--terracotta), var(--wp--preset--shadow--zacht); }
.shhi-tabel table { border-collapse: collapse; font-size: var(--wp--preset--font-size--normaal); }
.shhi-tabel th { text-align: left; width: 34%; font-weight: 700; vertical-align: top; }
.shhi-tabel th, .shhi-tabel td { padding: .85rem 1rem; border: 0; }
.wp-block-table.is-style-stripes.shhi-tabel tbody tr:nth-child(odd) { background: var(--wp--preset--color--blush); }
.wp-block-table.is-style-stripes.shhi-tabel { border-bottom: 0; }

.is-style-kaart > .shhi-jaar { flex: 0 0 7.5rem; margin: 0; padding-top: .15rem; }
@media (max-width: 600px) { .is-style-kaart:has(> .shhi-jaar) { flex-direction: column; gap: .35rem !important; } .is-style-kaart > .shhi-jaar { flex-basis: auto; } }
.shhi-acties .wp-block-post .is-style-kaart:not(:has(.wp-block-post-featured-image))::before { content: ""; display: block; aspect-ratio: 3 / 2; background: var(--wp--preset--color--blush) url("assets/images/logo-stempel.png") center / 30% no-repeat; }
.shhi-acties .wp-block-post .is-style-kaart { overflow: hidden; }
.shhi-formulier-reserve { display: grid; gap: .75rem; }
.shhi-formulier-reserve .shhi-iban { font-size: 1.15rem; }
.shhi-header .wp-block-button__link { white-space: nowrap; }
@media (max-width: 600px) { .shhi-header .wp-block-site-logo img { width: 160px !important; } .shhi-header .wp-block-button__link { padding: .6rem 1rem !important; } }

/* ---------- Bruine openingsblokken (kleur shhi.nl) ---------- */
.shhi-kop-bruin { color: #fff; }
.shhi-kop-bruin :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.shhi-kop-bruin .shhi-eyebrow { color: var(--wp--preset--color--zand); }
.shhi-kop-bruin .shhi-accent-italic em { color: var(--wp--preset--color--zand); }
.shhi-kop-bruin .shhi-vertrouwen, .shhi-kop-bruin .shhi-vertrouwen strong { color: rgba(255,255,255,.92); }
.shhi-kop-bruin .shhi-krul::before, .shhi-kop-bruin.shhi-krul::before { background-image: url("assets/images/krul-bruin.svg"); }
.shhi-kop-bruin .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; border-color: #fff; }
.shhi-kop-bruin .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--bruin-donker); }
.shhi-kop-bruin a:not(.wp-block-button__link) { color: #fff; }
.shhi-kop-bruin .is-style-kaart, .shhi-kop-bruin .is-style-kaart :where(h1,h2,h3,h4) { color: var(--wp--preset--color--inkt); }
.shhi-kop-bruin .is-style-kaart .shhi-eyebrow { color: var(--wp--preset--color--groen); }
.shhi-kop-bruin .shhi-lijst-vink li::before { background-color: rgba(255,255,255,.9); }
.shhi-kop-bruin .wp-block-image img { box-shadow: 0 0 0 10px rgba(243,232,223,.9); }
.shhi-kop-bruin .shhi-doneerformulier, .shhi-kop-bruin .shhi-doneerformulier :where(h1,h2,h3,h4,label,span) { color: var(--wp--preset--color--inkt); }
.wp-block-button.is-style-groen > .wp-block-button__link { background: var(--wp--preset--color--groen); color: #fff; }
.wp-block-button.is-style-groen > .wp-block-button__link:hover { background: #3E5525; color: #fff; }

/* ---------- Boogfoto (zoals op shhi.nl) ---------- */
.shhi-boog img { border-radius: 0 0 50% 50% / 0 0 64% 64% !important; box-shadow: 0 0 0 12px var(--wp--preset--color--creme); width: 100%; height: auto; }
.shhi-citaat { font-family: var(--wp--preset--font-family--fraunces); font-style: italic; font-weight: 400; line-height: 1.35; }

/* ---------- Slideshow ---------- */
.shhi-slideshow { position: relative; }
.shhi-slideshow .wp-block-gallery.shhi-slides { display: flex !important; flex-wrap: nowrap !important; gap: 0 !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: var(--wp--custom--radius--groot); scrollbar-width: none; }
.shhi-slideshow .wp-block-gallery.shhi-slides::-webkit-scrollbar { display: none; }
.shhi-slideshow .wp-block-gallery.shhi-slides > figure.wp-block-image { flex: 0 0 100% !important; width: 100% !important; margin: 0 !important; scroll-snap-align: start; position: relative; }
.shhi-slideshow .wp-block-gallery.shhi-slides > figure.wp-block-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; border-radius: 0 !important; }
.shhi-slideshow .wp-block-gallery.shhi-slides > figure.wp-block-image figcaption { position: absolute; left: 1.25rem; bottom: 1.25rem; right: auto; width: auto; max-width: 70%; padding: .5rem 1rem; border-radius: 999px; background: rgba(42,34,32,.72); color: #fff; font-size: var(--wp--preset--font-size--klein); font-weight: 600; text-align: left; margin: 0; }
.shhi-slide-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.shhi-slide-dots { display: flex; gap: .5rem; }
.shhi-slide-dots button { width: .7rem; height: .7rem; border-radius: 50%; border: 0; padding: 0; background: var(--wp--preset--color--taupe); cursor: pointer; transition: all .2s; }
.shhi-slide-dots button[aria-current="true"] { background: var(--wp--preset--color--bruin); width: 1.8rem; border-radius: 999px; }
.shhi-slide-pijlen { display: flex; gap: .5rem; }
.shhi-slide-pijlen button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--wp--preset--color--taupe); background: #fff; color: var(--wp--preset--color--inkt); font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; transition: all .2s; }
.shhi-slide-pijlen button:hover { border-color: var(--wp--preset--color--bruin); color: var(--wp--preset--color--bruin); }

/* ---------- Fasen ---------- */
.shhi-fasen { list-style: none; padding-left: 0; counter-reset: fase; }
.shhi-fasen li { counter-increment: fase; position: relative; padding: .2rem 0 .9rem 3rem; }
.shhi-fasen li::before { content: counter(fase); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; background: #fff; color: var(--wp--preset--color--bruin); border: 2px solid var(--wp--preset--color--bruin); }
.shhi-fasen li.is-klaar::before { content: "✓"; background: var(--wp--preset--color--groen); border-color: var(--wp--preset--color--groen); color: #fff; }
.shhi-fasen li.is-bezig::before { background: var(--wp--preset--color--bruin); color: #fff; box-shadow: 0 0 0 5px rgba(164,111,77,.2); }
.shhi-fasen li.is-bezig strong::after { content: "Nu bezig"; margin-left: .5rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; background: var(--wp--preset--color--zand); color: var(--wp--preset--color--inkt); padding: .15rem .5rem; border-radius: 999px; vertical-align: .1em; }
.shhi-infographic img { border-radius: var(--wp--custom--radius--middel) !important; box-shadow: var(--wp--preset--shadow--zacht); }

/* ---------- Partners ---------- */
.shhi-partner { border-left: 0; }
.shhi-partner h4 { margin-bottom: .2rem; }
.shhi-tijdlijn > .wp-block-column:not(.shhi-bezig):not(.shhi-straks)::after { background: var(--wp--preset--color--groen); }

.shhi-hero-beeld .wp-block-image.shhi-boog img { aspect-ratio: auto; object-fit: initial; }
.shhi-hero-beeld .shhi-boog { margin-bottom: 0; }
.shhi-hero-beeld:has(.shhi-boog) .shhi-zwevend { bottom: 1rem; left: -2rem; }
@media (max-width: 781px) {
	.shhi-hero-beeld .shhi-boog { margin: 0 12px !important; }
	.shhi-hero-beeld:has(.shhi-boog) .shhi-zwevend { position: relative; left: 0; bottom: 0; margin: 1.75rem 0 0 !important; max-width: none; }
}



/* ---------- Slideshow: ontwerpbeelden volledig tonen ---------- */
.shhi-slideshow .wp-block-gallery.shhi-slides { background: var(--wp--preset--color--wit); }
.shhi-slideshow .wp-block-gallery.shhi-slides > figure.wp-block-image img { aspect-ratio: 16 / 10; object-fit: contain; background: var(--wp--preset--color--wit); }

/* ---------- Weergave per apparaat (telefoon / tablet / desktop) ---------- */
/* Tablet (staand): menu achter de menuknop. Laptops, ook met 125%/150% schermvergroting, houden het gewone menu. */
@media (max-width: 900px) {
	.shhi-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.shhi-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.shhi-header .wp-block-navigation__responsive-container.is-menu-open { display: flex; }
}
/* Tijdlijn: 3 per rij op tablet */
@media (min-width: 782px) and (max-width: 1023px) {
	.shhi-tijdlijn { flex-wrap: wrap !important; row-gap: 2.5rem; }
	.shhi-tijdlijn > .wp-block-column { flex: 0 0 calc(33.333% - 1.4rem) !important; }
	.shhi-tijdlijn > .wp-block-column:nth-child(3n)::before { right: 0; }
	/* Kolommen met kaarten naast een tekst: kaarten onder elkaar */
	.has-bos-background-color .wp-block-columns .wp-block-columns { flex-direction: column; }
	.shhi-hero .wp-block-columns { gap: 2rem !important; }
}
/* Telefoon */
@media (max-width: 781px) {
	:root { --wp--style--root--padding-left: 1.1rem; --wp--style--root--padding-right: 1.1rem; }
	.shhi-krul::before { opacity: .55; }
	.wp-block-buttons > .wp-block-button { flex: 1 1 auto; }
	.wp-block-buttons > .wp-block-button > .wp-block-button__link { width: 100%; text-align: center; }
	.shhi-header .wp-block-buttons > .wp-block-button { flex: 0 0 auto; }
	.shhi-header .wp-block-buttons > .wp-block-button > .wp-block-button__link { width: auto; }
	.shhi-slide-pijlen button { width: 2.4rem; height: 2.4rem; }
	.shhi-footer .wp-block-columns { gap: 2rem !important; }
	.wp-block-pronamic-form .wp-block-pronamic-form-radio-field__inner-blocks { grid-template-columns: 1fr 1fr; }
}
/* Grote schermen: tekst niet te breed */
@media (min-width: 1600px) { .shhi-hero h1 { font-size: 4.75rem; } }
@media (min-width: 782px) and (max-width: 1023px) {
	.shhi-footer > .wp-block-columns { flex-wrap: wrap !important; row-gap: 2.5rem; }
	.shhi-footer > .wp-block-columns > .wp-block-column { flex: 0 0 calc(50% - 2rem) !important; }
}
.shhi-footer .shhi-iban { white-space: normal; }

/* Header op smallere laptops: iets compacter zodat menu en knop passen */
@media (min-width: 901px) and (max-width: 1180px) {
	.shhi-header .wp-block-navigation { gap: 1rem !important; font-size: 1rem; }
	.shhi-header .wp-block-site-logo img { width: 180px !important; }
}
@media (min-width: 782px) and (max-width: 1023px) { .shhi-hero-beeld:has(.shhi-boog) .shhi-zwevend { left: .5rem; } }

/* Gewone pagina met volle-breedte-secties: geen witruimte boven de eerste sectie */
main:has(> .shhi-landing > .alignfull:first-child) { padding-top: 0 !important; }
main:has(> .shhi-landing > .alignfull:first-child) > .wp-block-post-title { margin: var(--wp--preset--spacing--60) auto var(--wp--preset--spacing--40); }