/* Subsidiewijs: aanvullende stijlen bovenop theme.json */
:root { --sw-inkt: #17251C; --sw-rand: 2px solid #17251C; }

/* Kaart */
.is-style-kaart { background: #fff; border: var(--sw-rand); border-radius: 28px; padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.is-style-kaart.has-background { background: inherit; }
.wp-block-column.is-style-kaart { display: flex; flex-direction: column; gap: .75rem; }

/* Band */
.is-style-band { border-top: var(--sw-rand); border-bottom: var(--sw-rand); }

/* Label / pil */
p.is-style-label { display: flex; align-items: center; gap: .4rem; width: fit-content; margin-inline: auto; padding: .45rem .9rem; border-radius: 999px; background: #fff; font-weight: 800; font-size: .875rem; }
p.is-style-label.has-text-align-left { margin-inline: 0; }

/* Knoppen */
.wp-block-button.is-style-inkt .wp-block-button__link { background: var(--sw-inkt); color: #fff; border-color: var(--sw-inkt); }
.wp-block-button.is-style-inkt .wp-block-button__link:hover { background: #24533A; }
.wp-block-button.is-style-omlijnd .wp-block-button__link { background: #fff; color: var(--sw-inkt); }
.wp-block-button.is-style-omlijnd .wp-block-button__link:hover { background: #CFEAD6; color: var(--sw-inkt); }
.wp-block-button__link { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; }

/* Icoon */
.wp-block-image.is-style-icoon img { width: 56px; height: 56px; }
.wp-block-image.is-style-icoon { margin: 0; }

/* Decoratie: wolk, boompje, vlinder, bij en sterretje in de hoeken */
.is-style-met-decoratie { position: relative; isolation: isolate; }
.is-style-met-decoratie::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		url(../img/wolk.svg) no-repeat left -30px top 30px / 220px auto,
		url(../img/vlinder.svg) no-repeat left 13% top 190px / 46px auto,
		url(../img/ster.svg) no-repeat left 17% top 90px / 22px auto,
		url(../img/boom.svg) no-repeat right 4% top 40px / 120px auto,
		url(../img/bij.svg) no-repeat right 14% top 190px / 70px auto;
}
@media (max-width: 781px) {
	.is-style-met-decoratie::before {
		background:
			url(../img/wolk.svg) no-repeat left -40px top 10px / 130px auto,
			url(../img/boom.svg) no-repeat right 8px top 14px / 64px auto,
			url(../img/vlinder.svg) no-repeat right 22% top 70px / 30px auto;
	}
}

/* Details (veelgestelde vragen) */
.wp-block-details { background: #fff; border: var(--sw-rand); border-radius: 20px; padding: 1rem 1.25rem; }
.wp-block-details summary { font-weight: 800; cursor: pointer; }

/* Toegankelijkheid */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #EE8466; outline-offset: 3px; }

/* Kop: logo en naam */
.sw-merk .wp-block-image { margin: 0; }
.sw-merk .wp-block-image img { display: block; }
.sw-naam, .sw-merk .wp-block-site-title { font-family: var(--wp--preset--font-family--fraunces); font-weight: 900; font-size: 1.45rem; letter-spacing: -.01em; }
.sw-naam a, .sw-merk .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--inkt); }

.sw-naam { margin: 0; line-height: 1; }
footer .sw-naam, footer .sw-naam a { color: inherit; }

/* ---------- v0.2: ritme, mobiel en de onderste secties ---------- */
/* Volle-breedte-secties houden altijd een zijmarge (anders plakt tekst op mobiel tegen de rand). */
.has-global-padding > .alignfull.has-global-padding { padding-left: var(--wp--style--root--padding-left); padding-right: var(--wp--style--root--padding-right); }

/* Eén ritme voor alle secties */
.sw-sectie { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.sw-sectie > * + * { margin-block-start: clamp(1.5rem, 3vw, 2.25rem); }
.sw-sectiekop { max-width: 46rem; }
.sw-sectiekop > * { margin: 0; }
.sw-sectiekop > * + * { margin-top: .6rem; }
.sw-sectie h2 { margin: 0; line-height: 1.05; }
.is-style-band.has-wit-background-color { border-color: var(--wp--preset--color--lijn); border-width: 1px 0; border-style: solid; }

/* Zo werkt het: drie stappen, genummerd */
.sw-stappenrij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: stap; }
.sw-stap { position: relative; background: #fff; border: var(--sw-rand); border-radius: 24px; padding: 1.5rem 1.5rem 1.6rem; counter-increment: stap; }
.sw-stap::before { content: counter(stap); position: absolute; top: 1.2rem; right: 1.3rem; font-family: var(--wp--preset--font-family--fraunces); font-weight: 900; font-size: 2.6rem; line-height: 1; color: var(--wp--preset--color--lijn); }
.sw-stap > * { margin: 0; }
.sw-stap > * + * { margin-top: .6rem; }
.sw-stap h3 { margin-top: 1rem; }
.sw-stap p { line-height: 1.55; }
@media (max-width: 781px) {
	.sw-stappenrij { grid-template-columns: 1fr; gap: .8rem; }
	.sw-stap { display: grid; grid-template-columns: 48px 1fr; column-gap: 1rem; padding: 1.1rem 1.1rem 1.2rem; }
	.sw-stap .wp-block-image { grid-row: span 2; }
	.sw-stap h3 { margin-top: 0; padding-right: 2rem; }
	.sw-stap p { margin-top: .3rem; grid-column: 2; }
	.sw-stap::before { font-size: 1.8rem; top: .9rem; }
	.sw-sectie .wp-block-buttons .wp-block-button, .sw-sectie .wp-block-buttons .wp-block-button__link { width: 100%; justify-content: center; }
}

/* Kalenderstrook */
.sw-kalenderstrook { gap: clamp(1.5rem, 4vw, 3.5rem); }
.sw-kalenderstrook h2 + p { margin-top: .6rem; }

/* Vertrouwen */
.sw-beloftes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.sw-belofte { border-top: 1px solid rgba(255,255,255,.25); padding-top: 1.25rem; }
.sw-belofte > * { margin: 0; }
.sw-belofte > * + * { margin-top: .6rem; }
.sw-belofte p { line-height: 1.55; }
@media (max-width: 781px) { .sw-beloftes { grid-template-columns: 1fr; } }

/* Kop op mobiel: logo links, menu rechts; de startknop staat al groot in de hero */
@media (max-width: 600px) {
	header .wp-block-buttons { display: none; }
	header .wp-block-group.is-layout-flex { flex-wrap: nowrap; }
}

/* Hero-voorbeelden op mobiel compact: icoon naast de tekst */
@media (max-width: 781px) {
	.is-style-met-decoratie .wp-block-column.is-style-kaart { display: grid; grid-template-columns: 44px 1fr; column-gap: .9rem; row-gap: .3rem; align-items: start; padding: 1rem 1.1rem; }
	.is-style-met-decoratie .wp-block-column.is-style-kaart .wp-block-image { grid-row: span 2; }
	.is-style-met-decoratie .wp-block-column.is-style-kaart > * { margin: 0; grid-column: 2; }
	.is-style-met-decoratie .wp-block-column.is-style-kaart > .wp-block-image { grid-column: 1; }
}

/* Compacte secties op de startpagina */
.sw-sectie.is-compact { padding-top: clamp(2rem, 4.5vw, 3.25rem); padding-bottom: clamp(2rem, 4.5vw, 3.25rem); }
.sw-sectie.is-compact > * + * { margin-block-start: 1.1rem; }
.sw-gemstrook { gap: clamp(1rem, 4vw, 3rem); }
.sw-gemstrook h2 + p { margin-top: .4rem; }
.sw-gemstrook h2, .sw-gemstrook p { margin-bottom: 0; }

h1,h2,h3{overflow-wrap:break-word;hyphens:auto}

/* --- ritme homepage: geen kieren, geen randen, vaste maten --- */
.wp-block-post-content > .alignfull + .alignfull, .entry-content > .alignfull + .alignfull, .wp-block-post-content > .alignfull:first-child { margin-block-start: 0 !important; }
.wp-site-blocks > main, .wp-site-blocks > footer, .wp-site-blocks > .wp-block-template-part:last-child { margin-block-start: 0 !important; }
.wp-block-post-content > .alignfull:last-child { margin-block-end: 0; }
.sw-sectie.is-style-band, .is-style-band.has-wit-background-color { border: 0; }
.sw-sectie h2 { font-size: var(--wp--preset--font-size--kop-m); }
.sw-sectie .sw-sectiekop p, .sw-sectie .wp-block-column > p:first-of-type { font-size: var(--wp--preset--font-size--groot); }
.sw-sectie.sw-faq { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.has-roze-background-color .sw-vb { background: #fff; }
.sw-sectie, .sw-sectie.is-compact, .sw-sectie.sw-faq { padding-top: clamp(2.75rem, 6vw, 4.5rem); padding-bottom: clamp(2.75rem, 6vw, 4.5rem); }
.sw-sectie > * + *, .sw-sectie.is-compact > * + * { margin-block-start: clamp(1.25rem, 2.5vw, 2rem); }
/* Op andere pagina's dan de home staat de titel links: alleen versiering rechts, zodat niets over de tekst valt. */
body:not(.home) .is-style-met-decoratie::before { background: url(../img/boom.svg) no-repeat right 3% top 24px / 110px auto, url(../img/bij.svg) no-repeat right 12% top 150px / 60px auto; }
body:not(.home) .is-style-met-decoratie > h1, body:not(.home) .is-style-met-decoratie > .wp-block-heading:first-child, body:not(.home) .is-style-met-decoratie > p { max-width: min(46rem, 78%); margin-left: max(0px, calc((100% - 1240px) / 2)) !important; margin-right: auto !important; }
@media (max-width: 781px) { body:not(.home) .is-style-met-decoratie::before { background: none; } body:not(.home) .is-style-met-decoratie > h1, body:not(.home) .is-style-met-decoratie > p { max-width: none; } }