/*
Theme Name: Marijn Swart
Theme URI: https://marijnswart.nl/
Description: Eigen blokthema voor marijnswart.nl, gebouwd als child-thema van Twenty Twenty-Five.
Author: Marijn Swart
Template: twentytwentyfive
Version: 0.9.12
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marijnswart
*/

/* Kleine aanvullingen die (nog) niet in theme.json passen. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
}

html {
	scroll-behavior: smooth;
}

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

h1, h2, h3, h4, h5, h6 {
	overflow-wrap: anywhere;
	hyphens: auto;
	text-wrap: balance;
}

/* Afbreekregels zoals in het ontwerp: koppen 'balance', gewone tekst normaal. Twenty Twenty-Five zet
   text-wrap: pretty op koppen en alinea's en wordt na dit thema geladen; daarom 'html' ervoor. */
html :is(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

html :is(p, blockquote, caption, figcaption) {
	text-wrap: wrap;
}

/* WordPress zet op kolommen, knoppen en citaten word-break/overflow-wrap: break-word; het ontwerp niet. */
html .wp-block-column,
html .wp-block-button__link,
html .wp-block-quote {
	overflow-wrap: normal;
	word-break: normal;
}

/* Paginatitel (blok Berichttitel): WordPress zet word-break: break-word; het ontwerp breekt koppen met overflow-wrap: anywhere. */
html h1.wp-block-post-title {
	word-break: normal;
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Lijstpunten: geen eigen marge (Twenty Twenty-Five geeft 0,5rem); elke lijst regelt zijn tussenruimte. */
.wp-block-list li {
	margin-top: 0;
}

/* Lijstopsommingstekens in de accentkleur. */
li::marker {
	color: var(--wp--preset--color--accent);
}

/* Geen witruimte tussen header, inhoud en footer. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.ms-main--padded {
	padding-bottom: var(--wp--preset--spacing--70);
}

.ms-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.92em;
}

/* Logo: PNG-masker, ingekleurd in helder goud (decoratief). */
.ms-brand::before,
.ms-footer__about::before {
	content: "";
	display: block;
	flex: none;
	-webkit-mask: url(assets/images/logo-masker.png) center / contain no-repeat;
	mask: url(assets/images/logo-masker.png) center / contain no-repeat;
}

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

.wp-site-blocks > .wp-block-template-part:has(.ms-header) {
	position: sticky;
	top: 0;
	z-index: 20;
}

@media (min-width: 601px) {
	.admin-bar .wp-site-blocks > .wp-block-template-part:has(.ms-header) {
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}

.ms-header {
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: 0.85rem;
}

.ms-header__inner {
	align-items: center;
	gap: 1.5rem;
}

.ms-brand {
	position: relative;
	gap: 0.2rem;
	padding-left: calc(50px + 0.65rem);
}

/* Duwt menu en knop naar rechts (specifieker dan de flex-regel van WordPress). */
.ms-header__inner > .ms-brand {
	margin-right: auto;
}

.ms-brand__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.08rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.62;
}

.ms-brand__name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Het logo zelf is ook klikbaar: de link van de naam bedekt het hele merkblok. */
.ms-brand__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ms-brand::before {
	position: absolute;
	left: 0;
	top: 50%;
	width: 50px; /* 19-10: groter dan in het ontwerp (34px), keuze Marijn: even hoog als naam en regel eronder */
	height: 50px;
	transform: translateY(-50%);
	background: var(--wp--preset--color--gold-bright);
}

/* Heel smalle telefoons (tot 360 px): het oude logo van 34 px, zodat "TANDARTS · ALKMAAR E.O." net als voorheen op één regel past. */
@media (max-width: 360px) {
	.ms-brand {
		padding-left: calc(34px + 0.65rem);
	}

	.ms-brand::before {
		width: 34px;
		height: 34px;
	}
}

.ms-brand__tagline {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	line-height: 1.65;
	text-transform: uppercase;
}

.wp-block-navigation.ms-nav,
.wp-block-navigation.ms-nav .wp-block-navigation__container {
	gap: 0.2rem;
}

.ms-nav .wp-block-navigation-item__content {
	padding: 0.45em 0.8em;
	border-radius: var(--wp--custom--radius-pill);
}

.ms-nav .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--sunk);
}

.ms-nav .current-menu-item > .wp-block-navigation-item__content,
.ms-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--accent-soft);
}

.ms-nav .wp-block-navigation__responsive-container-open {
	padding: 0.45em 0.9em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Open menu (telefoon en tablet) als uitklappaneel onder de kopbalk, zoals in het ontwerp.
 * WordPress maakt er standaard een schermvullende laag van (position: fixed), maar de kopbalk heeft
 * backdrop-filter en sluit zo'n laag dan op in zijn eigen hoogte: alleen "Home" bleef zichtbaar (gemeld 20-10).
 * Door backdrop-filter is .ms-header ook het bevattende blok voor position: absolute; top: 100% = net onder de balk.
 */
.wp-block-navigation.ms-nav {
	position: static; /* anders hangt het paneel aan het (smalle) menublok in plaats van aan de kopbalk */
}

.ms-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: absolute;
	inset: 100% 0 auto 0;
	height: auto;
	max-height: calc(100dvh - 100%);
	padding: 0.5rem var(--wp--custom--gutter) 1rem;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--line);
	animation: none;
}

.ms-nav .is-menu-open .wp-block-navigation__responsive-close,
.ms-nav .is-menu-open .wp-block-navigation__responsive-dialog {
	margin-top: 0;
	max-width: none;
}

/* Sluiten gaat met de Menu-knop (interactie.js), Escape of een link; de losse Sluiten-knop van WordPress is niet nodig. */
.ms-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	display: none;
}

.ms-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 0;
	align-items: stretch;
}

.ms-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.ms-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: stretch;
	gap: 0.2rem;
	width: 100%;
}

.ms-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.75em 0.8em;
}

/* Het menu klapt al in onder 1060px (WordPress doet dat standaard pas onder 600px). */
@media (min-width: 600px) and (max-width: 1060px) {
	.ms-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.ms-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 1060px) {
	.ms-header__inner > .ms-header__cta {
		display: none;
	}
}

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

.ms-footer {
	background: var(--wp--preset--color--footer-bg);
	color: var(--wp--preset--color--footer-ink);
	padding-block: 3.5rem 2rem;
}

.ms-footer a {
	color: var(--wp--preset--color--footer-ink);
	text-decoration: none;
}

.ms-footer a:hover,
.ms-footer__about a {
	text-decoration: underline;
}

.ms-footer :focus-visible {
	outline-color: var(--wp--preset--color--footer-ink);
}

.ms-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 2rem;
}

.ms-footer__grid > * {
	min-width: 0;
	margin-block: 0;
}

.ms-footer__about {
	display: grid;
	gap: 0.9rem;
	align-content: start; /* 19-10: BIG-nummer staat nu onderaan de footer; logo en tekst niet meer uitrekken */
	font-size: var(--wp--preset--font-size--small);
}

.ms-footer__about > * {
	margin-block: 0;
}

.ms-footer__about::before {
	width: 56px; /* 19-10: groter dan in het ontwerp (42px), keuze Marijn */
	height: 56px;
	background: var(--wp--preset--color--gold-bright);
}

.ms-footer h2.ms-footer__title {
	margin-bottom: 0.8rem;
	color: var(--wp--preset--color--kid);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ms-footer ul {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

.ms-footer__bottom {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--footer-ink) 20%, transparent);
	gap: 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
}

.ms-footer__bottom > * {
	margin: 0;
}

@media (max-width: 820px) {
	.ms-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 480px) {
	.ms-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Paginakop ---------- */

.ms-page-head {
	display: grid;
	gap: 1rem;
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.ms-page-head > * {
	margin-block: 0;
}

.ms-page-head h1 {
	max-width: 20ch;
}

.ms-page-head .is-style-intro {
	max-width: 40rem;
}

.ms-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.ms-crumbs li {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	min-width: 0;
}

.ms-crumbs li + li::before {
	content: "/";
}

.ms-crumbs a {
	color: var(--wp--preset--color--muted);
}

.ms-crumbs [aria-current] {
	color: var(--wp--preset--color--contrast);
}

/* E-mailadres naast de kopieerknop: minstens 24px hoog, zonder extra ruimte (hoogte blijft als in het ontwerp). */
.ms-facts .ms-mono a {
	display: inline-block;
	min-height: 24px;
}

/* Tikdoelen van minstens 24px hoog in lijstjes met losse links. */
.ms-footer ul a,
.ms-facts ul a,
.ms-crumbs a {
	display: inline-block;
	min-height: 24px;
	padding-block: 0.3rem;
}

/* ---------- Behandelpagina: tekst + zijbalk ---------- */

.ms-article {
	display: grid;
	grid-template-columns: minmax(0, 40rem) minmax(0, 17rem);
	gap: clamp(2rem, 5vw, 4.5rem);
	justify-content: space-between;
	align-items: start;
	padding-block: 2rem var(--wp--preset--spacing--70);
}

.ms-article > * {
	margin-block: 0;
}

.ms-article__body h2 {
	margin-top: calc(1.6rem + 1.1rem);
	scroll-margin-top: 6rem;
}

.ms-article__body h3 {
	margin-top: calc(0.8rem + 1.1rem);
}

.ms-aside {
	position: sticky;
	top: 6rem;
	display: grid;
	gap: 1.25rem;
}

.ms-aside > * {
	margin-block: 0;
}

.ms-toc {
	display: grid;
	gap: 0.15rem;
	border-left: 1px solid var(--wp--preset--color--line);
}

.ms-toc[hidden],
.ms-toc:empty {
	display: none;
}

.ms-toc a {
	margin: 0;
	padding: 0.3rem 0.9rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.35;
	text-decoration: none;
}

.ms-toc a:hover {
	color: var(--wp--preset--color--accent);
}

.ms-cta-card {
	display: grid;
	gap: 0.75rem;
	padding: 1.3rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--sunk);
	color: var(--wp--preset--color--contrast);
}

.ms-cta-card > * {
	margin-block: 0;
}

.ms-cta-card h2,
.ms-cta-card h3 {
	color: inherit;
	font-size: var(--wp--preset--font-size--large);
}

.ms-cta-card p {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
}

@media (max-width: 900px) {
	.ms-article {
		grid-template-columns: minmax(0, 1fr);
	}

	.ms-aside {
		position: static;
	}

	.ms-toc {
		display: none;
	}
}

/* ---------- Banden en contactblok ---------- */

.ms-band {
	padding-block: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--surface);
	border-block: 1px solid var(--wp--preset--color--line);
}

.ms-contact__inner > .wp-block-heading {
	margin-top: 0.6rem;
}

.ms-contact__inner > .has-muted-color {
	max-width: 34rem;
	margin-top: 1rem;
}

/* Op de contactpagina heeft deze tekst in het ontwerp geen maximale breedte. */
.ms-contact-page .ms-contact__inner > .has-muted-color {
	max-width: none;
}

.ms-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: 1.75rem;
	font-size: var(--wp--preset--font-size--small);
}

.ms-facts > *,
.ms-facts > * > * {
	margin-block: 0;
}

.ms-contact__button {
	margin-top: 2rem;
}

h3.ms-label {
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ms-plain-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 560px) {
	.ms-facts {
		grid-template-columns: 1fr;
	}
}

/* ---------- Secties ---------- */

.ms-section {
	padding-block: var(--wp--preset--spacing--70);
}

.ms-sunk {
	background: var(--wp--preset--color--sunk);
}

.ms-sec-head {
	display: grid;
	gap: 0.75rem;
	max-width: 44rem;
	margin-bottom: 2.25rem;
}

.ms-sec-head > * {
	margin-block: 0;
}

.ms-sec-head > p:not(.is-style-eyebrow) {
	color: var(--wp--preset--color--muted);
}

/* ---------- Leeftijdslabels (blokstijlen Label Baby/Kind/Volwassene/Neutraal) ---------- */

p[class*="is-style-label-"] {
	width: fit-content;
	margin-block: 0;
}

.ms-tags {
	gap: 0.35rem;
}

/* ---------- Kaarten (behandelingen en routes) ---------- */

.ms-cards {
	gap: 1rem;
}

.ms-card {
	position: relative;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: 0.75rem;
	min-width: 0;
	padding: 1.4rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--surface);
	transition: border-color 0.15s, transform 0.15s;
}

.ms-card--route {
	grid-template-rows: auto 1fr auto;
}

.ms-card > * {
	margin-block: 0;
}

.ms-card:hover,
.ms-card:focus-within {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
}

.ms-card h3 {
	font-size: var(--wp--preset--font-size--large);
}

.ms-card h3 a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* De hele kaart is klikbaar: de link breidt zich uit over de kaart. */
.ms-card h3 a::after,
.ms-card .ms-card__more a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.ms-card a:focus-visible {
	outline: none;
}

.ms-card:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.ms-card p:not([class*="is-style-label-"]) {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.ms-card p.ms-card__more,
.ms-card p.ms-card__more a {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	text-decoration: none;
}

.ms-card--route p[class*="is-style-label-"] {
	font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
	.ms-card,
	.ms-card:hover,
	.ms-card:focus-within {
		transform: none;
		transition: none;
	}
}

/* ---------- Veelgestelde vragen (Details-blok) ---------- */

.ms-faq {
	display: grid;
	gap: 0.6rem;
}

.ms-faq > * {
	margin-block: 0;
}

.wp-block-details {
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
}

.wp-block-details summary {
	position: relative;
	padding: 1rem 3rem 1rem 1.2rem;
	border-radius: 12px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	list-style: none;
	cursor: pointer;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 1.2rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.2rem;
}

.wp-block-details[open] summary::after {
	content: "−";
}

.wp-block-details > :not(summary) {
	margin: 0 1.2rem 0.7rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-details > :last-child:not(summary) {
	margin-bottom: 1.1rem;
}

/* ---------- Bronnenlijst ---------- */

.ms-sources-intro {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

ol.ms-sources {
	display: grid;
	gap: 0.9rem;
	margin: calc(1rem + 1.1rem) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: src;
}

ol.ms-sources > li {
	position: relative;
	padding-left: 2.5rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.55;
	counter-increment: src;
}

ol.ms-sources mark {
	display: block;
	margin-top: 0.15rem;
}

ol.ms-sources > li::before {
	content: "[" counter(src) "]";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--mono);
}

/* ---------- Lees dan ook ---------- */

.ms-related {
	padding: 1.25rem 1.4rem;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--sunk);
	font-size: var(--wp--preset--font-size--small);
}

.ms-related > * {
	margin-block: 0;
}

.ms-related > .is-style-eyebrow {
	margin-bottom: 0.4rem;
}

/* ---------- Homepage: hero ----------
   19-10, keuze Marijn (voorstel A): oudroze kop met de vrijstaande foto (ID 1662) groot tegen de rechterrand,
   onder de borst afgesneden door de onderrand van de kop, zoals op de oude site. Op de telefoon staat de foto onder de tekst. */

.ms-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 6vw, 5rem);
	background: var(--wp--preset--color--rose);
}

.ms-hero__inner {
	display: grid;
	grid-template-columns: 1.25fr 0.9fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.ms-hero__inner > * {
	min-width: 0;
	margin-block: 0;
}

.ms-hero__copy {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 1.4rem;
}

.ms-hero__copy > * {
	margin-block: 0;
}

/* Op oudroze: donkerder goud voor kleine tekst en accenten (contrast). */
.ms-hero .is-style-eyebrow,
.ms-hero h1,
.ms-thesis em {
	color: var(--wp--preset--color--accent-on-soft);
}

.ms-hero h1 {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: var(--wp--custom--line-height--heading);
}

.ms-thesis {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: var(--wp--custom--line-height--tight);
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.ms-thesis em {
	font-style: normal;
}

.ms-hero .is-style-intro {
	max-width: 32rem;
}

.ms-hero .is-style-outline .wp-block-button__link {
	background: var(--wp--preset--color--surface);
}

.ms-portrait {
	position: absolute;
	top: 1.5rem;
	right: 0;
	bottom: 0;
	z-index: 0;
	margin: 0;
	pointer-events: none;
}

.ms-portrait img {
	display: block;
	width: clamp(320px, 48vw, 700px);
	max-width: none;
	height: auto;
}

.ms-portrait figcaption {
	position: absolute;
	right: clamp(15rem, 30vw, 26rem);
	bottom: 2.5rem;
	margin: 0;
	padding: 0.7rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--soft);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	text-align: left;
	white-space: nowrap;
	pointer-events: auto;
}

/* Tweede regel van het onderschrift (cursief in de editor). */
.ms-portrait figcaption em {
	display: block;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	font-style: normal;
	letter-spacing: 0.05em;
}

@media (max-width: 820px) {
	.ms-hero {
		padding-bottom: 0;
	}

	.ms-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.ms-portrait {
		position: relative;
		top: 0;
		width: 88%;
		height: min(105vw, 440px);
		margin: 1.5rem calc(-1 * var(--wp--style--root--padding-right, 1rem)) 0 auto;
		overflow: hidden;
	}

	.ms-portrait img {
		width: 100%;
	}

	.ms-portrait figcaption {
		right: auto;
		left: 0.75rem;
		bottom: 1.25rem;
	}
}

/* Golflijn onder de oudroze kop: precies in het midden tussen de band en de tekst eronder
   (19-10, feedback Marijn). Samen dezelfde afstand als voorheen, nu half boven en half onder. */
.ms-hero + .wp-block-group:has(> .ms-breath) {
	padding-top: calc(var(--wp--preset--spacing--70) / 2);
}

.wp-block-group:has(> .ms-breath) + .ms-section {
	padding-top: calc(var(--wp--preset--spacing--70) / 2);
}

/* Golflijn (decoratief). */
.ms-breath {
	display: block;
	width: 100%;
	height: 28px;
	color: var(--wp--preset--color--gold-bright);
	opacity: 0.8;
}

/* ---------- Band "Mijn werkwijze" (oudroze) ---------- */

.ms-rose {
	--wp--preset--color--muted: var(--wp--preset--color--rose-ink);
	--wp--preset--color--gold: var(--wp--preset--color--rose-ink);
	--wp--preset--color--line: color-mix(in srgb, var(--wp--preset--color--rose-ink) 25%, transparent);
	padding-block: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--rose-ink);
}

.ms-rose .wp-block-heading {
	color: var(--wp--preset--color--rose-ink);
}

.ms-split {
	gap: clamp(2rem, 5vw, 4rem);
}

.ms-split img {
	width: 100%;
	object-fit: cover;
}

.ms-split__text > * {
	margin-block: 0;
}

.ms-split__text > .wp-block-heading {
	margin-top: 0.6rem;
}

.ms-split__text > p:not(.is-style-eyebrow) {
	margin-top: 1rem;
	color: var(--wp--preset--color--muted);
}

.ms-steps {
	display: grid;
	margin-top: 1.75rem;
}

.ms-steps > *,
.ms-step > *,
.ms-step > * > * {
	margin-block: 0;
}

.ms-step {
	display: grid;
	grid-template-columns: 3.2rem 1fr;
	gap: 1rem;
	padding-block: 1.1rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.ms-step:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ms-step__n {
	padding-top: 0.35rem;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
}

.ms-step h3 {
	margin-bottom: 0.25rem;
	font-size: var(--wp--preset--font-size--large);
}

.ms-step p:not(.ms-step__n) {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Homepage: behandelvisie en pijlers ---------- */

.ms-prose > * {
	margin-block: 0;
}

.ms-prose {
	display: grid;
	gap: 1.05rem;
	align-content: start;
}

.ms-statement {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.ms-pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	margin-top: 3rem;
	padding-top: 2.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.ms-pillar {
	display: grid;
	gap: 0.6rem;
	align-content: start;
}

.ms-pillar > * {
	margin-block: 0;
}

.ms-pillar__icon {
	width: auto;
	height: 24px;
	fill: #d09a40;
}

.ms-pillar h3 {
	font-size: var(--wp--preset--font-size--large);
}

.ms-pillar p {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 760px) {
	.ms-pillars {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Afspraakband (gecentreerd) ---------- */

.ms-cta-band {
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: center;
}

.ms-cta-band > p:not(.is-style-eyebrow) {
	color: var(--wp--preset--color--muted);
}

/* ---------- Citaat ---------- */

.ms-quote {
	display: grid;
	justify-items: center;
	gap: 1.25rem;
	text-align: center;
}

.ms-quote > * {
	margin-block: 0;
}

.ms-quote__mark {
	width: auto;
	height: 28px;
	fill: var(--wp--preset--color--accent);
}

.wp-block-quote.ms-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
}

.ms-quote__text p {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	font-weight: 500;
	line-height: 1.4;
	text-wrap: balance;
}

.ms-quote__by {
	display: grid;
	justify-items: center;
	gap: 0.35rem;
}

.ms-quote__by > * {
	margin-block: 0;
}

.ms-quote__by img {
	width: 48px;
	height: 48px;
	margin-bottom: 0.4rem;
	border-radius: 50%;
	object-fit: cover;
	object-position: top;
}

.ms-quote__name {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ms-quote__role {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Contactblok met foto ---------- */

.ms-contact-grid {
	gap: clamp(2rem, 5vw, 4rem);
}

.ms-contact__photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------- Kop contactpagina (oudroze) ---------- */

.ms-contact-head {
	margin-bottom: 2.5rem;
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
	background: var(--wp--preset--color--rose);
}

.ms-contact-head__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.ms-contact-head__inner > *,
.ms-contact-head__text > * {
	margin-block: 0;
}

.ms-contact-head__text {
	display: grid;
	gap: 1rem;
}

.ms-contact-head h1 {
	color: var(--wp--preset--color--contrast);
}

.ms-contact-head .is-style-intro {
	max-width: 40rem;
}

.ms-contact-head__photo {
	margin: 0;
	text-align: center;
}

.ms-contact-head__photo img {
	width: clamp(220px, 27vw, 320px);
	aspect-ratio: 1;
	border: 4px solid var(--wp--preset--color--surface);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--wp--preset--color--line);
	object-fit: cover;
	object-position: 50% 20%;
}

.ms-contact-head__photo figcaption {
	margin-top: 0.6rem;
	margin-bottom: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	line-height: 28px;
}

.ms-contact-head__photo figcaption strong {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.65;
}

@media (max-width: 640px) {
	.ms-contact-head__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.ms-contact-head__photo {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 1rem;
		align-items: center;
		text-align: left;
	}

	.ms-contact-head__photo img {
		width: 96px;
	}

	.ms-contact-head__photo figcaption {
		margin: 0;
		font-size: 0.72rem;
	}

	.ms-contact-head__photo figcaption strong {
		font-size: var(--wp--preset--font-size--medium);
	}
}

/* ---------- Lichtschaduw-achtergrond (wijzigingsopdracht 2) ----------
   Foto Abstract-background met crème filter (85%). De foto-adressen zet functions.php als CSS-variabelen
   (marijnswart_bg_licht_css), zodat ze uit de mediabibliotheek komen. Terugval: effen crème. */
.bg-licht {
	background: linear-gradient(rgba(251, 247, 236, 0.85), rgba(251, 247, 236, 0.85)), var(--ms-bg-licht, none) center / cover;
	background-color: #fbf7ec;
}

@media (max-width: 600px) {
	.bg-licht {
		background-image: linear-gradient(rgba(251, 247, 236, 0.85), rgba(251, 247, 236, 0.85)), var(--ms-bg-licht-mobiel, var(--ms-bg-licht, none));
	}
}

.bg-licht .is-style-eyebrow {
	color: var(--wp--preset--color--accent-on-soft);
}

/* Paginakop als band over de volle breedte; de kop zelf blijft binnen de paginabreedte. */
.ms-main > .ms-page-head-band {
	margin-block: 0;
}

/* Tags los onder de kop, op wit, met 1.75rem ruimte. */
.ms-main > .ms-page-head-band + .ms-head-tags {
	margin-top: 1.75rem;
}

/* Jouw route: kop zoals de contactkop, op de lichtschaduw in plaats van oudroze, zonder ruimte eronder. */
.ms-contact-head.bg-licht {
	margin-bottom: 0;
	background: linear-gradient(rgba(251, 247, 236, 0.85), rgba(251, 247, 236, 0.85)), var(--ms-bg-licht, none) center / cover;
	background-color: #fbf7ec;
}

@media (max-width: 600px) {
	.ms-contact-head.bg-licht {
		background-image: linear-gradient(rgba(251, 247, 236, 0.85), rgba(251, 247, 236, 0.85)), var(--ms-bg-licht-mobiel, var(--ms-bg-licht, none));
	}
}

/* ---------- Op oudroze en licht goud: donkerder goud voor labels en links ---------- */

.ms-contact-head .is-style-eyebrow,
.ms-contact-head a,
.ms-docent .is-style-eyebrow,
.ms-docent a,
.faq-panel > p a,
.faq-panel > .is-style-eyebrow {
	color: var(--wp--preset--color--accent-on-soft);
}

/* ---------- OMFT-docent (licht goud) ---------- */

.ms-docent {
	padding-block: clamp(2rem, 4vw, 3rem);
	background: var(--wp--preset--color--accent-soft);
}

.ms-docent .ms-split__text > .wp-block-heading {
	margin-top: 0.5rem;
}

/* ---------- Visie: kernwaarden en uitspraak ---------- */

.ms-values {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.ms-value {
	display: grid;
	gap: 0.5rem;
	align-content: start;
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--surface);
}

.ms-value > * {
	margin-block: 0;
}

.ms-value h3 {
	font-size: var(--wp--preset--font-size--x-large);
}

.ms-value h3 a {
	color: inherit;
}

.ms-value p {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 760px) {
	.ms-values {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Veelgestelde vragen: oudroze vlak in de leeskolom ---------- */

.faq-panel {
	display: grid;
	gap: 0.6rem;
	margin-top: calc(1.6rem + 1.1rem);
	padding: 1.5rem 1.5rem 1.75rem;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--rose);
}

.faq-panel > * {
	margin-block: 0;
}

.ms-article__body .faq-panel > h2,
.faq-panel > h2 {
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 560px) {
	.faq-panel {
		padding: 1.1rem 1rem 1.25rem;
	}
}

/* ---------- Leestekst in artikelen ---------- */

.ms-article__body ul,
.ms-article__body ol:not(.ms-sources) {
	display: grid;
	gap: 0.45rem;
	padding-left: 1.25rem;
}

.ms-article__body li {
	margin-top: 0;
}

.ms-article__body strong {
	font-weight: 500;
}

.ms-article__body .wp-block-table {
	overflow-x: auto;
}

/* ---------- 404 ---------- */

.ms-404-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
	margin-block: 0 var(--wp--preset--spacing--60);
	padding: 0;
	list-style: none;
}

.ms-404-links a {
	display: grid;
	gap: 0.3rem;
	height: 100%;
	padding: 1.2rem 1.4rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.ms-404-links a:hover {
	border-color: var(--wp--preset--color--accent);
}

.ms-404-links strong {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

/* ---------- Omgezette behandelpagina's ---------- */

.ms-kicker {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.ms-related__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

.ms-related > .ms-related__title {
	margin-bottom: 0.4rem;
}

/* ---------- Artikelkop: labels onder de intro ---------- */

/* Secties sluiten op elkaar aan; ze regelen hun eigen witruimte (zoals in het ontwerp). */
.ms-main > * {
	margin-block-start: 0;
}

.ms-head-tags {
	margin-top: -0.5rem;
}

.ms-tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-tag {
	margin: 0;
	padding: 0.22em 0.6em;
	border-radius: var(--wp--custom--radius-pill);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	line-height: 1.65;
}

.ms-tag--baby {
	background: var(--wp--preset--color--warm-soft);
	color: var(--wp--preset--color--warm);
}

.ms-tag--kind {
	background: var(--wp--preset--color--kid-soft);
	color: var(--wp--preset--color--kid);
}

.ms-tag--volw {
	background: var(--wp--preset--color--adult-soft);
	color: var(--wp--preset--color--adult);
}

.ms-tag--neutraal {
	background: var(--wp--preset--color--sunk);
	color: var(--wp--preset--color--muted);
}

/* Contactblok zonder foto: zelfde kolombreedte als met foto (1,1fr van 1,1fr + 1fr). */
.ms-contact > .ms-contact__inner > * {
	max-width: calc((100% - clamp(2rem, 5vw, 4rem)) * 1.1 / 2.1);
}

@media (max-width: 820px) {
	.ms-contact > .ms-contact__inner > * {
		max-width: none;
	}
}

/* Pijl in knoppen, zoals in het ontwerp: iets los van de tekst, schuift op bij aanwijzen. */
.ms-arr {
	display: inline-block;
	margin-left: 0.5em;
	transition: transform 0.15s;
}

.wp-element-button {
	transition: transform 0.15s;
}

.wp-element-button:hover {
	transform: translateY(-1px);
}

.wp-element-button:hover .ms-arr {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.ms-arr,
	.wp-element-button {
		transition: none;
	}

	.wp-element-button:hover,
	.wp-element-button:hover .ms-arr {
		transform: none;
	}
}

/* Secties direct op elkaar (homepage, pagina zonder titel). */
.ms-sections > * {
	margin-block-start: 0;
}

/* Rasters: geen marge op de tweede en volgende kolom (die maakt de rij hoger). */
.ms-pillars > *,
.ms-values > *,
.ms-cards > * {
	margin-block: 0;
}

/* Contactblok met foto: kolommen 1,1 : 1, zoals in het ontwerp. */
.wp-block-columns.ms-contact-grid {
	gap: clamp(2rem, 5vw, 4rem);
	align-items: flex-start;
}

.ms-contact-grid > .wp-block-column:first-child {
	flex: 1.1 1 0;
}

.ms-contact-grid > .wp-block-column:last-child {
	flex: 1 1 0;
}

.ms-contact-grid > .wp-block-column {
	margin: 0;
}

/* Bovenregel als kop (bijv. "Behandelvisie"): geen kopmarges of koplettertype. */
.wp-block-heading.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
}

/* Afspraakband: 1rem tussen de regels, knop 0,5rem extra (zoals het ontwerp). */
.ms-cta-band > * + * {
	margin-block-start: 1rem;
}

.ms-cta-band > .wp-block-buttons {
	margin-block-start: 1.5rem;
}

/* Alleen voor schermlezers. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Visie ---------- */

.ms-section--na-kop {
	padding-top: 1rem;
}

.ms-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

.ms-prose > .ms-pull {
	max-width: 22ch;
	margin-block: 1rem;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.12;
}

.ms-visie__foto img {
	width: 100%;
	aspect-ratio: 690 / 900;
	object-fit: cover;
}

/* ---------- Behandelingen: rijen met filter ---------- */

.ms-section--na-kop-kort {
	padding-top: 0.5rem;
}

.ms-wide > * {
	margin-block: 0;
}

.ms-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1.5rem !important;
}

.ms-filter[hidden] {
	display: none;
}

/* Met JavaScript wordt het filter getoond; houd de ruimte dan vanaf het begin vrij (geen verschuiving bij laden). */
.ms-js .ms-filter[hidden] {
	display: flex;
	visibility: hidden;
}

.ms-filter button {
	padding: 0.45em 1em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	line-height: normal;
	cursor: pointer;
}

.ms-filter button[aria-pressed="true"] {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.ms-rows {
	display: grid;
}

.ms-rows > * {
	margin-block: 0;
}

.ms-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
	gap: 1.5rem;
	align-items: start;
	padding-block: 1.6rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.ms-row:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.ms-row[hidden] {
	display: none;
}

.ms-row > *,
.ms-row__side > * {
	margin-block: 0;
}

.ms-row__side {
	display: grid;
	gap: 0.6rem;
}

h2.ms-row__title {
	font-size: var(--wp--preset--font-size--large);
}

.ms-row > p:not(.ms-row__more) {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.ms-row__more {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

/* Als blok, zoals in het ontwerp: tikdoel van een volle regel hoog (≥ 24 px) en op mobiel over de hele breedte. */
.ms-row__more a {
	display: block;
}

@media (max-width: 820px) {
	.ms-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
	}
}

.ms-split--aanvullend {
	margin-bottom: 2.5rem !important;
}

.ms-split--aanvullend .ms-sec-head {
	margin: 0;
}

.ms-aanvullend__foto img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* ---------- Contact ---------- */

.ms-section--contact {
	padding-top: 0.5rem;
}

.wp-block-columns.ms-contact-page > .wp-block-column:first-child {
	flex: 0.8 1 0;
}

.wp-block-columns.ms-contact-page > .wp-block-column:last-child {
	flex: 1.2 1 0;
}

.ms-contact-page .ms-facts {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 2rem;
	max-width: none;
}

.ms-contact-page .ms-facts > :first-child {
	grid-row: span 2;
}

@media (max-width: 560px) {
	.ms-contact-page .ms-facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.ms-contact-page .ms-facts > :first-child {
		grid-row: auto;
	}
}

/* Kernwaarden: marge zoals in het ontwerp (valt samen met die van de kop). */
.ms-sec-head + .ms-values {
	margin-top: 2.5rem;
}

/* Kopieerknop naast het e-mailadres (afspraakblok en contactpagina). */
.ms-kopieer {
	min-width: 28px;
	min-height: 28px;
	margin-left: 0.35rem;
	padding: 0.15em 0.6em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-pill);
	background: var(--wp--preset--color--sunk);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	cursor: pointer;
}

.ms-kopieer[hidden] {
	display: none;
}

/* ---------- Contactformulier (WPForms) in de stijl van het ontwerp ---------- */

.ms-formulier div.wpforms-container-full {
	margin: 0;
}

.ms-formulier div.wpforms-container-full .wpforms-form {
	display: grid;
	gap: 0.9rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--surface);
}

.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-field-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem;
}

.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-field {
	padding: 0;
	margin: 0;
}

.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-field-name,
.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-field-textarea {
	grid-column: 1 / -1;
}

.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-field-label,
.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
	margin: 0 0 0.3rem;
	padding: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	line-height: 1.65;
}

.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
	margin: 0.3rem 0 0;
	color: var(--wp--preset--color--muted);
}

.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-required-label {
	color: var(--wp--preset--color--warm);
	font-weight: 400;
}

.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-field-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.9rem;
	max-width: none;
}

.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-field-row::before,
.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-field-row::after {
	content: none;
}

.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-field-row-block {
	width: auto;
	margin: 0;
	padding: 0;
}

.ms-formulier div.wpforms-container-full .wpforms-form input[type="text"],
.ms-formulier div.wpforms-container-full .wpforms-form input[type="email"],
.ms-formulier div.wpforms-container-full .wpforms-form textarea {
	width: 100%;
	max-width: none;
	height: auto;
	padding: 0.7em 0.8em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	box-shadow: none;
}

.ms-formulier div.wpforms-container-full .wpforms-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.ms-formulier div.wpforms-container-full .wpforms-form ::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.ms-formulier div.wpforms-container-full .wpforms-form input:focus-visible,
.ms-formulier div.wpforms-container-full .wpforms-form textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--accent);
}

.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-error,
.ms-formulier div.wpforms-container-full .wpforms-form label.wpforms-error {
	margin-top: 0.3rem;
	color: var(--wp--preset--color--warm);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
}

.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-submit-container {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	margin: 0;
	padding: 0;
}

.ms-formulier div.wpforms-container-full .wpforms-form button.wpforms-submit {
	height: auto;
	padding: 0.8em 1.25em;
	border: 0;
	border-radius: var(--wp--custom--radius-pill);
	background: var(--wp--preset--color--btn);
	color: var(--wp--preset--color--btn-ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: normal;
	cursor: pointer;
}

.ms-formulier div.wpforms-container-full .wpforms-form button.wpforms-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.ms-formulier .wpforms-confirmation-container-full {
	padding: 0.8rem 1rem;
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 520px) {
	.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-field-container,
	.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-field-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Contactformulier: keuzelijst, pijl in de knop, uitleg verplichte velden. */
.ms-formulier div.wpforms-container-full .wpforms-form .wpforms-field-select {
	grid-column: 1 / -1;
}

.ms-formulier div.wpforms-container-full .wpforms-form select {
	width: 100%;
	max-width: none;
	height: auto;
	padding: 0.7em 0.8em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
}

.ms-formulier div.wpforms-container-full .wpforms-form select:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--accent);
}

.ms-formulier div.wpforms-container-full .wpforms-form button.wpforms-submit::after {
	content: "→" / "";
	display: inline-block;
	margin-left: 0.5em;
	transition: transform 0.15s;
}

.ms-formulier div.wpforms-container-full .wpforms-form button.wpforms-submit:hover::after {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.ms-formulier div.wpforms-container-full .wpforms-form button.wpforms-submit::after {
		transition: none;
	}
}

.ms-formulier div.wpforms-container-full .wpforms-form .ms-form-note {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.65;
}

/* ---------- Afspraakblok: persoonlijk kaartje (wijzigingsopdracht 1) ---------- */

.contact-card {
	display: grid;
	gap: 0.5rem;
	justify-items: center;
	align-self: center;
	padding: 2.25rem 1.5rem;
	border-radius: 14px;
	background: var(--wp--preset--color--rose);
	text-align: center;
}

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

.contact-card img {
	width: 170px;
	height: 170px;
	border: 4px solid #fff;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 25%;
}

.contact-card .name {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.contact-card .role {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	letter-spacing: 0.05em;
}

.contact-card .note {
	max-width: 20rem;
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--contrast);
}

.ms-contact__card-kolom > .contact-card {
	margin-block: 0;
}

/* Lange woorden in de leeskolom van artikelen afbreken (geen horizontaal scrollen op 320 px).
   Zoals in het ontwerp alleen in de artikeltekst, niet op de hele pagina-inhoud (.entry-content). */
.ms-article__body {
	min-width: 0;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* ---------- Blok "Verder lezen" (artikelen op Behandelingen) ---------- */

.ms-artikelen[hidden],
.ms-artikelkaart[hidden],
.ms-artikelen__nav[hidden] {
	display: none;
}

.ms-artikelen__kop {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 2.25rem;
}

.ms-artikelen__kop > .ms-sec-head {
	min-width: 0;
	margin-bottom: 0;
}

.ms-artikelen__lijst {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

@media (min-width: 600px) {
	.ms-artikelen__lijst {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ms-artikelen__nav {
	display: flex;
	gap: 0.6rem;
	align-items: center;
}

.ms-artikelen__nav--onder {
	justify-content: flex-end;
	margin-top: 1.5rem;
}

.ms-artikelen__status {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ms-artikelen__pijl {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	cursor: pointer;
	transition: border-color 0.15s;
}

.ms-artikelen__pijl:hover:not(:disabled) {
	border-color: var(--wp--preset--color--accent);
}

.ms-artikelen__pijl:disabled {
	color: color-mix(in srgb, var(--wp--preset--color--muted) 45%, transparent);
	cursor: default;
}

.ms-artikelkaart__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: space-between;
}

.ms-artikelkaart__labels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.ms-artikelkaart__onderwerp {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
}

@media (prefers-reduced-motion: reduce) {
	.ms-artikelen__pijl {
		transition: none;
	}
}

/* Bovenregel ook buiten blokken (bijv. in het blok "Verder lezen", dat uit een shortcode komt). */
p.is-style-eyebrow {
	overflow-wrap: anywhere;
	color: var(--wp--preset--color--gold);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
}