/*
 * She Care: component styles and block style variations.
 *
 * Tokens come from theme.json (--wp--preset--color--*, --wp--preset--font-size--*,
 * --wp--custom--*). Values follow design/theme/shecare-theme.css one-to-one.
 * Loaded on the front end and as editor style.
 */

/* ------------------------------------------------------------------ Base -- */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/* Anchors land below the sticky header. */
[id] {
	scroll-margin-top: var(--wp--custom--header-height, 92px);
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

img {
	max-width: 100%;
	height: auto;
}

/* Visible focus in old rose (WCAG 2.4.7). */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--rose);
	outline-offset: 2px;
}

h1,
h2,
h3,
h4,
p {
	text-wrap: pretty;
}

/* Header, main and footer sit flush against each other. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.sc-measure {
	max-width: var(--wp--custom--measure, 62ch);
}

/* Skip link: hidden until focused. */
.skip-link {
	position: absolute;
	top: -200px;
	left: 12px;
	z-index: 100000;
	padding: 12px 18px;
	background: var(--wp--preset--color--sage-deep);
	color: var(--wp--preset--color--paper);
	font: 500 16px/1.3 var(--wp--preset--font-family--body);
	border-radius: var(--wp--custom--radius);
	text-decoration: none;
}

.skip-link:focus {
	top: 12px;
	color: var(--wp--preset--color--paper);
}

/* --------------------------------------------------------------- Buttons -- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	text-decoration: none;
}

.wp-block-button.is-style-secondary .wp-block-button__link {
	background: transparent;
	border-color: var(--wp--preset--color--outline);
	color: var(--wp--preset--color--sage-deep);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--sage-wash);
	border-color: var(--wp--preset--color--label);
	color: var(--wp--preset--color--sage-deep);
}

.wp-block-button.is-style-text-link .wp-block-button__link {
	min-height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--sage-deep);
	text-align: left;
	justify-content: flex-start;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover {
	background: none;
	color: var(--wp--preset--color--label-rose);
}

/* ----------------------------------------------------------------- Header -- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 30;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.sc-header {
	position: relative;
	background: rgba(251, 251, 249, 0.96);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.sc-header .sc-header__inner {
	align-items: center;
}

.sc-header .sc-logo {
	flex: 0 0 auto;
	line-height: 0;
}

.sc-header .sc-logo img {
	display: block;
	width: auto !important;
	height: clamp(40px, 5.4vw, 54px);
}

.sc-primary-nav .wp-block-navigation__container {
	gap: clamp(12px, 1.8vw, 26px);
}

.sc-primary-nav .wp-block-navigation-item__content {
	position: relative;
	padding: 6px 0;
	font: 500 15px/1 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--sage-mid);
	text-decoration: none;
}

.sc-primary-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--label-rose);
}

/* Active item: 2px old-rose underline. */
.sc-primary-nav .current-menu-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--wp--preset--color--rose);
}

.sc-header-cta .wp-block-button__link {
	min-height: 44px;
	padding: 12px 22px;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
}

.sc-nav-toggle {
	display: none;
}

/* Compact "Plan een kennismaking" next to the Menu toggle (mobile header only, feature 10). */
.sc-mobile-cta {
	display: none;
}

@media (max-width: 920px) {
	.sc-header .sc-header__inner {
		flex-wrap: wrap;
		gap: 10px;
	}

	/* With JS the panel is positioned under the bar: logo, button and Menu stay on one row. */
	.sc-js .sc-header .sc-header__inner {
		flex-wrap: nowrap;
	}

	/* Logo tap target at least 44px high. */
	.sc-header .sc-logo a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.sc-js .sc-mobile-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		margin-left: auto;
		padding: 0 16px;
		font-size: 15px;
		line-height: 1;
		white-space: nowrap;
		text-decoration: none;
	}

	.sc-mobile-cta__short {
		display: none;
	}

	.sc-js .sc-nav-toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 48px;
		padding: 0 16px;
		background: transparent;
		border: 1px solid var(--wp--preset--color--outline);
		border-radius: var(--wp--custom--radius);
		font: 500 15px/1 var(--wp--preset--font-family--body);
		color: var(--wp--preset--color--sage-deep);
		cursor: pointer;
	}

	.sc-js .sc-nav-toggle:hover,
	.sc-js .sc-nav-toggle[aria-expanded="true"] {
		border-color: var(--wp--preset--color--label);
		background: var(--wp--preset--color--sage-wash);
	}

	.sc-nav-toggle__icon {
		display: grid;
		gap: 4px;
	}

	.sc-nav-toggle__icon > span {
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
	}

	/* The panel: full width under the header bar. */
	.sc-header .sc-nav-panel {
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.sc-js .sc-header .sc-nav-panel {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - 100px);
		overflow-y: auto;
		padding: 6px clamp(16px, 4vw, 48px) 22px;
		background: var(--wp--preset--color--paper);
		border-top: 1px solid var(--wp--preset--color--hairline);
		border-bottom: 1px solid var(--wp--preset--color--hairline);
	}

	.sc-js .sc-header .sc-nav-panel.is-open {
		display: flex;
	}

	.sc-nav-panel .sc-primary-nav,
	.sc-nav-panel .sc-primary-nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.sc-nav-panel .sc-primary-nav .wp-block-navigation-item {
		width: 100%;
	}

	.sc-nav-panel .sc-primary-nav .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 52px;
		padding: 0 4px;
		border-bottom: 1px solid #e6e7df;
		font-size: 17px;
		line-height: 1.3;
	}

	.sc-nav-panel .sc-primary-nav .current-menu-item > .wp-block-navigation-item__content::after {
		content: none;
	}

	.sc-nav-panel .sc-primary-nav .current-menu-item > .wp-block-navigation-item__content::before {
		content: "";
		flex: 0 0 auto;
		width: 3px;
		height: 20px;
		margin-right: 12px;
		background: var(--wp--preset--color--rose);
	}

	.sc-nav-panel .sc-header-cta {
		margin-top: 16px;
	}

	.sc-nav-panel .sc-header-cta,
	.sc-nav-panel .sc-header-cta .wp-block-button,
	.sc-nav-panel .sc-header-cta .wp-block-button__link {
		width: 100%;
	}

	.sc-nav-panel .sc-header-cta .wp-block-button__link {
		min-height: 52px;
		padding: 0 24px;
		font-size: 16px;
	}
}

/* Phones: the full label needs about 440px next to the logo and Menu, so below 480px the
   button shows "Kennismaken" (the aria-label keeps the full label). */
@media (max-width: 479px) {
	.sc-mobile-cta__full {
		display: none;
	}

	.sc-mobile-cta__short {
		display: inline;
	}
}

/* Narrow phones: a slightly smaller logo and tighter buttons, so logo, button and Menu fit
   on one row from 320px. */
@media (max-width: 399px) {
	.sc-header .sc-header__inner {
		gap: 6px;
	}

	.sc-header .sc-logo img {
		height: 32px;
	}

	.sc-js .sc-mobile-cta {
		padding: 0 10px;
		font-size: 14px;
	}

	.sc-js .sc-nav-toggle {
		gap: 6px;
		padding: 0 10px;
	}
}

/* ----------------------------------------------------------------- Footer -- */

.sc-footer .sc-footer__columns {
	padding-bottom: clamp(32px, 4vw, 48px);
	border-bottom: 1px solid rgba(251, 251, 249, 0.16);
}

.sc-footer p {
	margin-block: 0;
	color: var(--wp--preset--color--on-dark-body);
	font-size: 16px;
	line-height: 1.6;
}

.sc-footer a,
.sc-footer .wp-block-navigation a,
.sc-footer .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--on-dark);
	text-decoration: none;
}

.sc-footer a:hover,
.sc-footer .wp-block-navigation a:hover {
	color: var(--wp--preset--color--rose-soft);
}

.sc-footer .sc-footer__brand {
	font: 400 30px/1 var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--paper);
}

.sc-footer .sc-footer__brand-sub {
	margin: 6px 0 18px;
	font: 400 13px/1 var(--wp--preset--font-family--body);
	letter-spacing: 0.34em;
	text-transform: lowercase;
	color: var(--wp--preset--color--rose-soft);
}

.sc-footer .sc-footer__description {
	max-width: 32ch;
}

.sc-footer .sc-footer__label {
	margin: 0 0 16px;
	font: 500 12px/1.4 var(--wp--preset--font-family--body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-dark-muted);
}

.sc-footer .sc-footer__pages > * + *,
.sc-footer .sc-footer__contact > * + * {
	margin-block-start: 10px;
}

.sc-footer .sc-footer__label + * {
	margin-block-start: 0;
}

.sc-footer .sc-footer__contact p:not(.sc-footer__label),
.sc-footer-nav .wp-block-navigation-item__content {
	font: 400 16px/1.3 var(--wp--preset--font-family--body);
}

.sc-footer-nav .wp-block-navigation__container {
	gap: 10px;
}

/* 44px touch target; the negative margin keeps the visual rhythm of the list. */
.sc-footer .is-style-text-link .wp-block-button__link {
	min-height: 44px;
	margin-block: -11px;
	font: 400 16px/1.3 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--on-dark);
}

.sc-footer .is-style-text-link .wp-block-button__link:hover {
	color: var(--wp--preset--color--rose-soft);
}

.sc-footer .sc-footer__bottom {
	padding-top: 24px;
}

.sc-footer .sc-footer__bottom p {
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--on-dark-muted);
}

.sc-footer .sc-footer__bottom a {
	color: var(--wp--preset--color--on-dark-muted);
}

.sc-footer .sc-footer__bottom a:hover {
	color: var(--wp--preset--color--rose-soft);
}

/* ------------------------------------------------------------------ Grids -- */

/* Grid groups fall back to one column by themselves (auto-fit, like the design). */
.sc-grid.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sc-min, 290px)), 1fr));
}

.sc-footer__columns.sc-grid {
	--sc-min: 220px;
}

/* ----------------------------------------------------- Group variations -- */

.wp-block-group.is-style-section-wash {
	background: var(--wp--preset--color--sage-wash);
	border-top: 1px solid var(--wp--preset--color--hairline);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

/*
 * "Sectie roze vlak": the She Care rose as a calm background surface, same rhythm as the
 * sage wash. Colours come from the palette (rose-wash, hairline-rose), so a palette change in
 * the Site Editor follows. Text uses the darker rose/sage tones (contrast >= 4.5:1).
 */
.wp-block-group.is-style-section-rose {
	background: var(--wp--preset--color--rose-wash);
	border-top: 1px solid var(--wp--preset--color--hairline-rose);
	border-bottom: 1px solid var(--wp--preset--color--hairline-rose);
}

.is-style-section-rose :where(p:not(.has-text-color):not([class*="is-style-"])) {
	color: var(--wp--preset--color--on-wash);
}

/* label-rose is 4.3:1 on the rose wash: use the darker rose text there. */
.is-style-section-rose :is(.is-style-ordinal, .is-style-step-label, .is-style-eyebrow),
.is-style-section-rose a:where(:not(.wp-element-button)):is(:hover, :focus) {
	color: var(--wp--preset--color--rose-wash-text);
}

.wp-block-group.is-style-rule-top {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: clamp(32px, 4vw, 52px);
}

.wp-block-group.is-style-card,
.wp-block-group.is-style-card-wash {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius);
	padding: clamp(22px, 2.6vw, 34px);
}

.wp-block-group.is-style-card-wash {
	background: var(--wp--preset--color--sage-wash);
}

.wp-block-group.is-style-card-dark {
	background: var(--wp--preset--color--sage-deep);
	border-radius: var(--wp--custom--radius);
	padding: clamp(26px, 3vw, 36px);
	color: var(--wp--preset--color--on-dark);
}

.is-style-card-dark :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--paper);
}

.is-style-card-dark p {
	color: var(--wp--preset--color--on-dark);
}

.is-style-card-dark a {
	color: var(--wp--preset--color--on-dark);
}

.is-style-card-dark a:hover {
	color: var(--wp--preset--color--rose-soft);
}

.is-style-card-dark .is-style-ordinal {
	color: var(--wp--preset--color--rose-soft);
}

.wp-block-group.is-style-questions,
.wp-block-group.is-style-questions-wash {
	background: var(--wp--preset--color--rose-wash);
	border: 1px solid var(--wp--preset--color--hairline-rose);
	border-radius: var(--wp--custom--radius);
	padding: clamp(24px, 2.8vw, 34px);
}

.wp-block-group.is-style-questions-wash {
	background: var(--wp--preset--color--sage-wash);
	border-color: var(--wp--preset--color--hairline);
}

.is-style-questions > .is-style-eyebrow,
.is-style-questions-wash > .is-style-eyebrow,
.is-style-callout > .is-style-eyebrow {
	margin-bottom: 6px;
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--rose-wash-text);
}

.is-style-questions-wash > .is-style-eyebrow {
	color: var(--wp--preset--color--label);
}

.is-style-questions > p:not(.is-style-eyebrow),
.is-style-questions-wash > p:not(.is-style-eyebrow) {
	margin-block: 14px 0;
	font: 400 19px/1.55 var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--sage-mid);
}

.is-style-questions > p:not(.is-style-eyebrow) + p:not(.is-style-eyebrow),
.is-style-questions-wash > p:not(.is-style-eyebrow) + p:not(.is-style-eyebrow) {
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--hairline-rose);
}

.is-style-questions-wash > p:not(.is-style-eyebrow) + p:not(.is-style-eyebrow) {
	border-top-color: var(--wp--preset--color--hairline);
}

.wp-block-group.is-style-callout {
	margin-block: clamp(28px, 3.5vw, 40px);
	padding: clamp(20px, 2.4vw, 28px);
	background: var(--wp--preset--color--rose-wash);
	border: 1px solid var(--wp--preset--color--hairline-rose);
	border-radius: var(--wp--custom--radius);
}

.is-style-callout p:not(.is-style-eyebrow) {
	color: var(--wp--preset--color--on-wash);
	font-size: 17px;
	line-height: 1.65;
}

.wp-block-group.is-style-summary {
	padding: clamp(20px, 2.4vw, 28px);
	background: var(--wp--preset--color--sage-wash);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius);
}

.wp-block-group.is-style-jumplinks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.is-style-jumplinks a {
	font: 500 15px/1.4 var(--wp--preset--font-family--body);
}

/* ---------------------------------------------------- Text variations -- */

.is-style-eyebrow {
	margin-bottom: 20px;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 13px !important;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--label);
}

/*
 * Short rose rule above every eyebrow label (decoration, not text). Switch it off for the
 * whole site with one token: custom "eyebrow-rule" in theme.json, or
 * :root { --wp--custom--eyebrow-rule: none; } in Additional CSS.
 */
.is-style-eyebrow::before {
	content: "";
	display: var(--wp--custom--eyebrow-rule, block);
	width: 24px;
	height: 2px;
	margin-bottom: 12px;
	background: var(--wp--preset--color--rose);
}

.is-style-eyebrow a {
	color: inherit;
	text-decoration: none;
}

p.is-style-lead {
	font: 400 var(--wp--preset--font-size--lead)/1.5 var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--rose-wash-text);
}

p.is-style-intro {
	font-weight: 300;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	color: var(--wp--preset--color--on-wash);
}

p.is-style-rule-accent {
	max-width: 46ch;
	padding-left: 22px;
	border-left: 2px solid var(--wp--preset--color--rose);
	font: 400 clamp(20px, 2vw, 25px)/1.45 var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--sage-mid);
}

/*
 * "Quote roze vlak": a key sentence on a rose-wash panel with the 2px rose rule on the left.
 * For paragraphs and quote blocks.
 */
p.is-style-quote-rose,
.wp-block-quote.is-style-quote-rose {
	max-width: 52ch;
	padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 36px);
	background: var(--wp--preset--color--rose-wash);
	border-left: 2px solid var(--wp--preset--color--rose);
	border-radius: 0 var(--wp--custom--radius) var(--wp--custom--radius) 0;
	font: 400 clamp(20px, 2vw, 25px)/1.45 var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--sage-mid);
}

.wp-block-quote.is-style-quote-rose p {
	max-width: none;
}

.wp-block-quote.is-style-quote-rose cite {
	color: var(--wp--preset--color--rose-wash-text);
}

p.is-style-ordinal {
	margin-bottom: 14px;
	font: 500 13px/1 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--label-rose);
}

p.is-style-step-label {
	margin-bottom: 12px;
	font: 500 12px/1 var(--wp--preset--font-family--body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--label-rose);
}

.is-style-caption,
p.is-style-caption {
	font: 400 var(--wp--preset--font-size--caption)/1.5 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--label);
}

/* ---------------------------------------------------- List variations -- */

.is-style-summary ul,
ul.is-style-dots,
.sc-prose ul {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.is-style-summary li,
ul.is-style-dots > li,
.sc-prose ul > li {
	display: flex;
	gap: 14px;
	color: var(--wp--preset--color--body);
}

.is-style-summary li::before,
ul.is-style-dots > li::before,
.sc-prose ul > li::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-top: 11px;
	border-radius: 50%;
	background: var(--wp--preset--color--rose);
}

ol.is-style-steps,
.sc-prose ol {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
	counter-reset: sc-step;
}

ol.is-style-steps > li,
.sc-prose ol > li {
	display: flex;
	gap: 14px;
	color: var(--wp--preset--color--body);
	counter-increment: sc-step;
}

ol.is-style-steps > li::before,
.sc-prose ol > li::before {
	content: counter(sc-step);
	flex: 0 0 auto;
	min-width: 26px;
	height: 26px;
	margin-top: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--sage-wash);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 50%;
	font: 500 13px/1 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--sage-mid);
}

/* --------------------------------------------------- Image variations -- */

.wp-block-image.is-style-portrait-frame,
.wp-block-image.is-style-portrait-frame-rose {
	position: relative;
	width: min(100%, 430px);
	margin-inline: auto;
}

.wp-block-image.is-style-portrait-frame::before,
.wp-block-image.is-style-portrait-frame-rose::before {
	content: "";
	position: absolute;
	inset: 20px -20px -20px 20px;
	background: var(--wp--preset--color--sage-wash);
	border-radius: var(--wp--custom--radius);
}

.wp-block-image.is-style-portrait-frame-rose::before {
	background: var(--wp--preset--color--rose-wash);
}

.wp-block-image.is-style-portrait-frame img,
.wp-block-image.is-style-portrait-frame-rose img {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 22%;
	border-radius: var(--wp--custom--radius);
}

.wp-block-image.is-style-avatar img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 16%;
}

/* ------------------------------------------------ Sections (patterns) -- */

/*
 * Every design section is a full-width group with the class sc-section (see
 * /patterns). Sections sit flush; `overflow-x: clip` keeps decorative offsets (the
 * portrait frame) from ever causing a horizontal scrollbar, without breaking sticky.
 */
.wp-block-post-content > .sc-section {
	margin-block: 0;
}

.sc-section {
	overflow-x: clip;
}

.sc-section :where(p) {
	max-width: var(--wp--custom--measure, 62ch);
}

.sc-min-240 { --sc-min: 240px; }
.sc-min-280 { --sc-min: 280px; }
.sc-min-290 { --sc-min: 290px; }
.sc-min-300 { --sc-min: 300px; }
.sc-min-320 { --sc-min: 320px; }
.sc-min-330 { --sc-min: 330px; }

.sc-align-center.is-layout-grid {
	align-items: center;
}

.sc-align-start.is-layout-grid {
	align-items: start;
}

.sc-align-self-center {
	align-self: center;
}

/* Grid and flex children may shrink below their content width (long words wrap). */
.sc-grid > *,
.sc-cta-row > * {
	min-width: 0;
}

/* Vertical rhythm inside a section (flow layout): values from the design. */
.sc-section .is-layout-flow > .is-style-eyebrow + * {
	margin-block-start: 20px;
}

.sc-section .is-layout-flow > .wp-block-heading + * {
	margin-block-start: 22px;
}

.sc-section .is-layout-flow > .sc-heading-lg-gap + * {
	margin-block-start: clamp(26px, 3vw, 38px);
}

.sc-section .is-layout-flow > .sc-actions {
	margin-block-start: clamp(28px, 3.5vw, 32px);
}

.sc-section .wp-block-buttons {
	gap: 14px;
}

.sc-hero .is-layout-flow > .is-style-lead + * {
	margin-block-start: 30px;
}

.sc-hero__text > p:not([class*="is-style-"]) {
	max-width: 56ch;
}

.sc-heading-narrow {
	max-width: 30ch;
}

.sc-heading-sm {
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.2;
}

.sc-heading-card {
	margin-bottom: 20px;
	font-size: clamp(22px, 2.2vw, 27px);
}

/* Text on the sage wash sections. */
.is-style-section-wash :where(p:not(.has-text-color):not([class*="is-style-"])) {
	color: var(--wp--preset--color--on-wash);
}

/* Small body text in cards and columns (16px). */
.sc-text-small p,
p.sc-text-small {
	font-size: 16px;
	line-height: 1.65;
}

.sc-text-small .is-layout-flow > * + *,
.sc-text-small .wp-block-shecare-read-more__content > * + * {
	margin-block-start: 14px;
}

.sc-text-small .wp-block-heading + * {
	margin-block-start: 14px !important;
}

/* Lines above columns. */
.sc-rule-label {
	border-top: 2px solid var(--wp--preset--color--label);
	padding-top: 24px;
}

.sc-rule-rose {
	border-top: 2px solid var(--wp--preset--color--rose);
	padding-top: 26px;
}

.sc-row-rule {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: clamp(28px, 3.5vw, 48px);
}

.sc-section .is-layout-flow > .is-style-rule-accent {
	margin-block-start: 20px;
}

/* Confidentiality note (Aanbod 01). */
p.sc-note {
	padding: 16px 18px;
	background: var(--wp--preset--color--rose-wash);
	border: 1px solid var(--wp--preset--color--hairline-rose);
	border-radius: var(--wp--custom--radius);
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--on-wash);
}

.sc-section .is-layout-flow > .sc-note {
	margin-block-start: 20px;
}

/* Photos. */
.wp-block-image.sc-photo {
	margin: 0;
}

.wp-block-image.sc-photo img {
	display: block;
	width: 100%;
	height: auto;
	object-position: 50% 22%;
	border-radius: var(--wp--custom--radius);
}

/*
 * Hero photos: at most 560px wide, so a 900px file stays sharp (CSS width x 2 <= 1.25 x file
 * width).
 */
.sc-hero .wp-block-image.sc-photo {
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
}

/*
 * Visual break: a small side photo in a two-column split (the laptop/notebook files are
 * 400-500px, so they never render wider than 300px).
 */
.wp-block-image.sc-photo-side {
	max-width: 300px;
}

.sc-section .is-layout-flow > .sc-photo-side,
.sc-section .is-layout-flow > .wp-block-heading + .sc-photo-side {
	margin-block-start: clamp(28px, 3.5vw, 44px);
}

.sc-portrait {
	max-width: 440px;
}

@media (min-width: 782px) {
	.sc-sticky {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 110px);
	}
}

p.sc-person-name {
	margin-block-start: 18px;
	font: 500 15px/1.4 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--sage-mid);
}

.sc-section .is-layout-flow > p.sc-person-role,
p.sc-person-role {
	margin-block-start: 4px;
	font: 400 15px/1.4 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--label);
}

/* Portrait frame: keep the offset panel inside narrow viewports. */
.wp-block-image.is-style-portrait-frame,
.wp-block-image.is-style-portrait-frame-rose {
	width: min(calc(100% - 20px), 430px);
	margin-bottom: 20px;
}

@media (max-width: 480px) {
	.wp-block-image.is-style-portrait-frame::before,
	.wp-block-image.is-style-portrait-frame-rose::before {
		inset: 12px -12px -12px 12px;
	}
}

/* Call-to-action rows (heading + buttons side by side, wrapping). */
.sc-cta-row .wp-block-heading {
	max-width: 34ch;
	margin: 0;
}

.sc-cta-row__text > .wp-block-heading + p {
	margin-block-start: 10px;
}

.sc-cta-row__text p {
	max-width: 56ch;
}

.sc-section .is-layout-flow > .sc-cta-row--rule {
	margin-block-start: clamp(32px, 4vw, 44px);
	padding-top: clamp(24px, 3vw, 32px);
	border-top: 1px solid var(--wp--preset--color--hairline);
}

p.sc-lead-dark {
	max-width: 52ch;
	margin: 0;
	font: 400 clamp(19px, 1.7vw, 22px)/1.5 var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--sage-mid);
}

.wp-block-group.is-style-rule-top.sc-cta-row {
	padding-top: clamp(28px, 3.5vw, 44px);
}

/* In het kort. */
.is-style-summary > .is-style-eyebrow {
	margin: 0 0 14px;
	font-size: 12px !important;
	letter-spacing: 0.14em;
}

.is-style-summary > .is-style-eyebrow + * {
	margin-block-start: 0 !important;
}

.is-style-summary ul {
	margin: 0;
	gap: 10px;
}

.is-style-summary li {
	gap: 12px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--on-wash);
}

.is-style-summary li::before {
	margin-top: 10px;
}

.is-style-summary > .is-style-jumplinks {
	margin-block-start: 20px !important;
}

.is-style-jumplinks p {
	margin: 0;
	max-width: none;
}

.is-style-jumplinks a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.wp-block-group.is-style-jumplinks {
	row-gap: 0;
}

/* Question blocks: the eyebrow + read-more toggle ("Zes vragen die we stellen"). */
.is-style-questions > .is-style-eyebrow + * {
	margin-block-start: 0 !important;
}

.is-style-questions .wp-block-shecare-read-more__content > p,
.is-style-questions-wash .wp-block-shecare-read-more__content > p {
	margin: 14px 0 0;
	font: 400 19px/1.55 var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--sage-mid);
}

.is-style-questions .wp-block-shecare-read-more__content > p + p {
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--hairline-rose);
}

.is-style-questions .wp-block-shecare-read-more__content > p:first-child {
	margin-top: 0;
}

.sc-questions-compact > p:not(.is-style-eyebrow) {
	margin-block-start: 12px !important;
	font-size: 18px !important;
}

.sc-questions-compact > p:not(.is-style-eyebrow):first-child {
	margin-block-start: 0 !important;
}

.sc-questions-compact > p + p {
	padding-top: 12px !important;
}

.sc-section .is-layout-flow > .sc-questions-compact {
	margin-block: 20px;
}

.is-style-questions > p:not(.is-style-eyebrow):first-child,
.is-style-questions-wash > p:not(.is-style-eyebrow):first-child {
	margin-top: 0;
}

.is-style-questions p,
.is-style-questions-wash p {
	max-width: none;
}

/* Read-more inside sections. */
.sc-section .wp-block-shecare-read-more + * {
	margin-block-start: 26px;
}

.sc-text-small .wp-block-shecare-read-more + * {
	margin-block-start: 14px;
}

/* Step cards (Aanbod & werkwijze). */
.sc-steps h3 {
	font-size: 21px;
	line-height: 1.28;
}

.is-style-card-dark .is-style-step-label {
	color: var(--wp--preset--color--rose-soft);
}

.sc-steps .is-style-card,
.sc-steps .is-style-card-dark {
	padding: clamp(22px, 2.4vw, 30px);
}

/* --------------------------------------------- Group style "Slider" -- */

/*
 * Any group with the style is a horizontally scrolling row of cards (the track). Without
 * JavaScript it is simply a scrollable row with snap points; assets/js/slider.js adds the
 * buttons and the position indicator. About 1.1 cards are visible on phones, 1.6 on
 * tablets and 2.5 on wide screens, so the next card always peeks in. The doubled class
 * beats the core layout rules (display: grid/flex, container gap).
 */
.wp-block-group.is-style-slider.is-style-slider {
	--sc-slider-gap: clamp(20px, 3vw, 36px);
	--sc-slide-w: calc((100% - var(--sc-slider-gap)) / 1.1);
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--sc-slider-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--outline) transparent;
	padding-block-end: 14px;
}

@media (min-width: 600px) {
	.wp-block-group.is-style-slider.is-style-slider {
		--sc-slide-w: calc((100% - var(--sc-slider-gap)) / 1.6);
	}
}

@media (min-width: 1024px) {
	.wp-block-group.is-style-slider.is-style-slider {
		--sc-slide-w: calc((100% - 2 * var(--sc-slider-gap)) / 2.5);
	}
}

.wp-block-group.is-style-slider.is-style-slider > * {
	flex: 0 0 min(100%, max(240px, var(--sc-slide-w)));
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

.wp-block-group.is-style-slider:focus-visible {
	outline: 2px solid var(--wp--preset--color--rose);
	outline-offset: 4px;
}

/* Editor: the row scrolls freely (no snapping while editing). */
.editor-styles-wrapper .wp-block-group.is-style-slider.is-style-slider,
.block-editor-block-list__layout .wp-block-group.is-style-slider.is-style-slider {
	scroll-snap-type: none;
}

.sc-slider__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-block-start: 18px;
}

.sc-slider.is-static .sc-slider__controls {
	display: none;
}

.sc-slider__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--sage-deep);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
}

.sc-slider__button:hover {
	background: var(--wp--preset--color--sage-wash);
	border-color: var(--wp--preset--color--label);
}

.sc-slider__button[aria-disabled="true"] {
	opacity: 0.45;
	cursor: default;
	background: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--outline);
}

.sc-slider__status {
	margin: 0;
	min-width: 9ch;
	color: var(--wp--preset--color--label);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

/* Narrow phones: the indicator on its own line, the two buttons side by side below it. */
@media (max-width: 479px) {
	.sc-slider__status {
		order: -1;
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.is-style-slider.is-style-slider {
		scroll-behavior: auto;
	}
}

/* Contact details (Contact page). */
.sc-contact-card {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: 26px;
}

.sc-section .sc-hero__text > .sc-contact-card {
	margin-block-start: 30px;
}

.sc-contact-card > * + * {
	margin-block-start: 20px !important;
}

.sc-person .wp-block-image {
	flex: 0 0 auto;
	margin: 0;
}

.sc-person p.sc-person-name {
	margin: 0;
	font-size: 17px;
}

.sc-person p.sc-person-role {
	font-size: 16px;
}

.sc-contact-details > * + * {
	margin-block-start: 14px !important;
}

p.sc-contact-label {
	margin: 0 0 4px;
	font: 500 12px/1.4 var(--wp--preset--font-family--body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--label);
}

.sc-contact-details .sc-contact-label + p {
	margin-block-start: 0 !important;
	font-size: 17px;
	line-height: 1.5;
}

.sc-contact-details a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ------------------------------------------------------------------ Prose -- */

.sc-prose {
	line-height: 1.75;
}

.sc-prose > p {
	margin-block: 0 20px;
}

.sc-prose > h2 {
	margin: clamp(34px, 4vw, 48px) 0 18px;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.22;
}

.sc-prose > h3 {
	margin: clamp(28px, 3.4vw, 40px) 0 16px;
	font-size: clamp(21px, 2.1vw, 25px);
	line-height: 1.28;
}

.sc-prose strong {
	font-weight: 600;
	color: var(--wp--preset--color--sage-mid);
}

.sc-prose a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--rose);
	text-underline-offset: 3px;
}

/* ------------------------------------------------ Kennis & inzichten -- */

/* Sections directly in <main> (blog templates) sit flush, like page sections. */
main > .sc-section {
	margin-block: 0;
}

.sc-prose p {
	max-width: none;
}

/* Constrained sections: paragraphs use the column width (860px / 760px), not 62ch. */
.sc-kn-hero > p {
	max-width: 860px;
}

.sc-art-kop > p {
	max-width: 760px;
}

.sc-kn-hero > .is-style-eyebrow {
	margin-block: 0;
}

.sc-kn-hero > .is-style-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.sc-kn-hero > .is-style-eyebrow + * {
	margin-block-start: 20px;
}

.sc-kn-hero > h1 + * {
	margin-block-start: 26px;
}

.sc-kn-hero > p:not(.is-style-eyebrow) {
	line-height: 1.75;
}

.sc-kn-hero > p:not(.is-style-eyebrow) + p {
	margin-block-start: 16px;
}

/* Overview: heading, intro, chips, featured article. */
.sc-kn-uitgelicht .is-style-rule-top > .wp-block-heading {
	margin-block: 0;
}

.sc-kn-uitgelicht .is-style-rule-top > .wp-block-heading + p {
	max-width: var(--wp--custom--measure, 62ch);
	margin-block-start: 14px;
	line-height: 1.75;
}

.sc-kn-uitgelicht .is-style-rule-top > .wp-block-shecare-category-chips {
	margin-block-start: clamp(26px, 3vw, 36px);
}

.sc-kn-uitgelicht .is-style-rule-top > .sc-featured {
	margin-block-start: clamp(28px, 3.5vw, 40px);
}

.sc-featured__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cards and the featured article: the title link covers the whole card. */
.wp-block-group.is-style-post-card,
.wp-block-group.is-style-post-featured {
	position: relative;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius);
	transition: border-color 0.15s ease;
}

.wp-block-group.is-style-post-card:hover,
.wp-block-group.is-style-post-featured:hover {
	border-color: var(--wp--preset--color--label);
}

.is-style-post-card:has(.wp-block-post-title a:focus-visible),
.is-style-post-featured:has(.wp-block-post-title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--rose);
	outline-offset: 2px;
}

.is-style-post-card .wp-block-post-title a,
.is-style-post-featured .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.is-style-post-card .wp-block-post-title a:focus-visible,
.is-style-post-featured .wp-block-post-title a:focus-visible {
	outline: none;
}

.is-style-post-card .wp-block-post-title a::after,
.is-style-post-featured .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wp-block-group.is-style-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--paper);
}

.is-style-post-card > .wp-block-post-featured-image {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.is-style-post-card > * + * {
	margin-block-start: 0;
}

.is-style-post-card .sc-post-card__body {
	flex: 1 1 auto;
	padding: 22px;
}

.sc-post-card__body > *,
.sc-post-featured__body > * {
	margin-block: 0;
}

.sc-post-card__category,
p.sc-post-featured__label {
	margin-block: 0 10px !important;
	font: 500 12px/1.4 var(--wp--preset--font-family--body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--label);
}

.sc-post-card__title.wp-block-post-title {
	margin-block: 0 10px !important;
	font: 500 21px/1.3 var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--sage-mid);
}

.sc-post-card__excerpt {
	margin-block: 0 14px !important;
}

.sc-post-card__excerpt p,
.sc-post-featured__excerpt p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--body);
}

.wp-block-group.is-style-post-featured {
	padding: clamp(22px, 2.6vw, 32px);
	background: var(--wp--preset--color--sage-wash);
}

.sc-post-grid.is-layout-grid {
	gap: clamp(20px, 2.6vw, 32px);
}

.wp-block-group.is-style-post-featured.is-layout-grid {
	gap: clamp(24px, 3vw, 44px);
}

.is-style-post-featured > .wp-block-post-featured-image {
	margin: 0;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
}

p.sc-post-featured__label {
	margin-block: 0 12px !important;
	color: var(--wp--preset--color--label-rose);
}

.sc-post-featured__title.wp-block-post-title {
	margin-block: 0 14px !important;
	font: 400 clamp(24px, 2.5vw, 32px)/1.22 var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--sage-mid);
}

.sc-post-featured__excerpt {
	margin-block: 0 16px !important;
}

.sc-post-featured__excerpt p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--wp--preset--color--on-wash);
}

.sc-post-grid > li {
	display: flex;
	min-width: 0;
}

.sc-post-grid > li > .is-style-post-card {
	flex: 1 1 auto;
	width: 100%;
}

.wp-block-post-featured-image.sc-media-placeholder img {
	display: block;
	width: 100%;
}

.wp-block-post-featured-image.is-placeholder {
	margin: 0;
	background: repeating-linear-gradient(135deg, #edefe8 0 10px, #e3e7dc 10px 20px);
}

/* Date · reading time. */
.wp-block-group.sc-post-meta.is-layout-flex {
	gap: 0;
}

.sc-post-meta > * {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--label);
}

.sc-post-meta > * + *::before {
	content: "·";
	margin-inline: 0.4em;
}

.is-style-post-featured .sc-post-meta > * {
	color: var(--wp--preset--color--on-wash);
}

/* Pagination: "Pagina 1 van 3" and 44px buttons. */
.wp-block-group.sc-pagination-row {
	margin-block-start: clamp(32px, 4vw, 44px);
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--hairline);
	align-items: center;
	gap: 12px;
}

.wp-block-shecare-page-count {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--wp--preset--color--body);
}

.sc-pagination-row .wp-block-query-pagination {
	gap: 8px;
	margin: 0;
}

.sc-pagination-row .wp-block-query-pagination > *,
.sc-pagination-row .wp-block-query-pagination-numbers {
	margin: 0;
}

.sc-pagination-row .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sc-pagination-row .page-numbers,
.sc-pagination-row .wp-block-query-pagination-previous,
.sc-pagination-row .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius);
	font: 500 15px/1 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--sage-mid);
	text-decoration: none;
}

.sc-pagination-row .wp-block-query-pagination-previous,
.sc-pagination-row .wp-block-query-pagination-next {
	padding: 0 18px;
}

.sc-pagination-row a.page-numbers:hover,
.sc-pagination-row .wp-block-query-pagination-previous:hover,
.sc-pagination-row .wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--label);
	color: var(--wp--preset--color--sage-deep);
}

.sc-pagination-row .page-numbers.current {
	background: var(--wp--preset--color--sage-deep);
	border-color: var(--wp--preset--color--sage-deep);
	color: var(--wp--preset--color--paper);
}

.sc-pagination-row .page-numbers.dots {
	border-color: transparent;
}

.sc-no-results {
	margin-block-start: 0;
}

/* Article: breadcrumb, category, title, intro, author line. */
.sc-art-kop > * {
	margin-block: 0;
}

.sc-art-kop > .wp-block-shecare-breadcrumbs ~ .sc-art-category {
	margin-block-start: 26px;
}

.sc-art-kop > .sc-art-category {
	font: 500 12px/1.4 var(--wp--preset--font-family--body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--label-rose);
}

.sc-art-kop > .sc-art-category + * {
	margin-block-start: 16px;
}

.sc-art-kop > .sc-art-title {
	font-size: clamp(30px, 3.9vw, 46px);
	line-height: 1.14;
}

.sc-art-kop > .sc-art-title + * {
	margin-block-start: 24px;
}

.sc-art-intro p {
	margin: 0;
	font-weight: 300;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	color: var(--wp--preset--color--on-wash);
}

.sc-art-kop > .sc-author-line {
	margin-block-start: 26px;
}

.wp-block-group.sc-author-line {
	align-items: center;
	padding: 18px 0;
	border-top: 1px solid var(--wp--preset--color--hairline);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.sc-author-line__photo,
.sc-author-box__photo {
	flex: 0 0 auto;
	margin: 0;
	line-height: 0;
}

.sc-author-line__photo img {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 18%;
}

.sc-author-line__text {
	flex: 1 1 auto;
	min-width: 0;
}

.sc-author-line__text > * {
	margin-block: 0;
}

.sc-author-line__name {
	font: 500 15px/1.4 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--sage-mid);
}

.sc-author-line__text > .sc-post-meta {
	margin-block-start: 2px;
}

/* Featured image 16:9 with caption. */
.sc-art-beeld .wp-block-post-featured-image {
	margin: 0;
}

.sc-art-beeld .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius);
}

.sc-art-beeld .wp-block-post-featured-image figcaption,
.sc-featured-caption {
	margin: 12px 0 0;
	font: 400 14px/1.5 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--label);
}

/* Article text (760px column): quote with source and the callout. */
.sc-prose > p:last-child {
	margin-block-end: 0;
}

.sc-prose > .wp-block-quote {
	margin: clamp(28px, 3.5vw, 40px) 0;
	padding: 0 0 0 24px;
	border-left: 2px solid var(--wp--preset--color--rose);
}

.sc-prose > .wp-block-quote p {
	margin: 0 0 10px;
	font: 400 clamp(20px, 2vw, 26px)/1.45 var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--sage-mid);
}

.sc-prose > .wp-block-quote cite {
	display: block;
	font: 400 15px/1.4 var(--wp--preset--font-family--body);
	font-style: normal;
	color: var(--wp--preset--color--label);
}

.sc-prose > .wp-block-group.is-style-callout {
	margin: clamp(28px, 3.5vw, 40px) 0;
}

.is-style-callout > * {
	margin-block: 0;
}

.is-style-callout > * + * {
	margin-block-start: 8px;
}

.is-style-callout > .is-style-eyebrow {
	font-size: 12px !important;
}

.sc-prose > .wp-block-heading + * {
	margin-block-start: 0;
}

.sc-prose > ul,
.sc-prose > ol {
	margin-block-start: 0;
}

.sc-prose li {
	line-height: 1.7;
}

/* Prose list items flow as text (bold words, links stay inline); the marker is positioned. */
.sc-prose ul > li,
.sc-prose ol > li {
	display: block;
	position: relative;
	padding-left: 20px;
}

.sc-prose ol > li {
	padding-left: 40px;
}

.sc-prose ul > li::before,
.sc-prose ol > li::before {
	position: absolute;
	left: 0;
	top: 0;
}

/* Author box. */
.wp-block-group.sc-author-box {
	align-items: flex-start;
	padding-top: clamp(24px, 3vw, 36px);
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.sc-author-box__photo img {
	width: 96px;
	height: 120px;
	border-radius: var(--wp--custom--radius);
	object-fit: cover;
	object-position: 50% 20%;
}

.sc-author-box__text {
	flex: 1 1 260px;
	min-width: 0;
}

.sc-author-box__text > * {
	margin-block: 0;
}

.sc-author-box__text > .is-style-eyebrow {
	margin-bottom: 4px;
	font-size: 12px !important;
	letter-spacing: 0.14em;
}

.sc-author-box__name {
	margin-block-end: 10px !important;
	font: 400 22px/1.25 var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--sage-mid);
}

.sc-author-box__bio {
	margin-block-end: 6px !important;
	font-size: 16px;
	line-height: 1.65;
	color: var(--wp--preset--color--body);
}

/* Related articles and the two CTAs. */
.sc-related > .wp-block-heading {
	margin-block: 0;
}

.sc-related > .wp-block-post-template {
	margin-block-start: clamp(24px, 3vw, 32px);
}

.sc-art-verder .sc-related + .sc-actions {
	margin-block-start: clamp(28px, 3.5vw, 40px);
}

/* ------------------------------------------------------- Legal pages -- */

/* Privacyverklaring / Algemene voorwaarden: one 760px column (constrained section). */
.sc-legal > .is-style-eyebrow {
	margin-block: 0;
}

.sc-legal > .is-style-eyebrow + h1 {
	margin-block-start: 20px;
}

.sc-legal > p.sc-legal__updated {
	margin-block-start: 16px;
	font: 400 15px/1.5 var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--label);
}

.sc-legal > .is-style-lead {
	margin-block-start: clamp(20px, 2.4vw, 28px);
}

.sc-legal > p {
	max-width: 760px;
}

.sc-legal > .sc-legal__body {
	margin-block-start: clamp(28px, 3.5vw, 40px);
	overflow-wrap: break-word;
}

.sc-legal__body > h2:first-child,
.sc-legal__body > .sc-legal-contact:first-child {
	margin-block-start: 0;
}

.sc-prose > .sc-legal-contact {
	margin: 0 0 24px;
}

.sc-legal-contact > * {
	margin-block: 0;
}

.sc-legal-contact > * + * {
	margin-block-start: 8px;
}

.sc-legal-contact p.sc-legal-contact__name {
	font: 400 22px/1.3 var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--sage-mid);
}

.wp-block-group.sc-legal-detail {
	gap: 4px 12px;
	align-items: baseline;
}

.sc-legal-detail > p {
	margin: 0;
	min-width: 0;
}

.sc-legal-detail > p.sc-legal-detail__label {
	flex: 0 0 130px;
	font-weight: 600;
	color: var(--wp--preset--color--sage-mid);
}

@media (max-width: 480px) {
	.sc-legal-detail > p.sc-legal-detail__label {
		flex-basis: 100%;
	}
}

/* ------------------------------------------------------ Reduced motion -- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}