/* Projecttokens voor wat Automatic.css niet dekt. Kleuren, typeschaal, spacing,
   content-breedte en radius komen uit ACSS (zie cms/acss/brand-settings.json).
   Prefix --mc-: nooit ACSS-namen als --primary hergebruiken, ACSS pakt die zelf op. */
:root {
	/* vlakken uit het ontwerp: bijna-wit grijs, tegelgrijs, salie van de headerbanners */
	--mc-surface: oklch(0.981 0.003 325.6);
	--mc-surface-2: oklch(0.958 0.006 325.6);
	--mc-sage: oklch(0.831 0.008 151.9);

	/* Kleine lopende tekst (kaarten, samenvattingen, FAQ-antwoorden, tabellen): 16 → 17px.
	   ACSS' --text-s komt uit op 14–15px; dat las te klein, het ontwerp had hier 16px.
	   Eén token, zodat alle kleine tekst op de site samen bij te stellen is. */
	--mc-text-small: clamp(1rem, calc(0.2016vw + 0.9546rem), 1.0625rem);
	/* bijschrift (rol onder een naam): 14 → 15px */
	--mc-text-caption: clamp(0.875rem, calc(0.2016vw + 0.8296rem), 0.9375rem);

	/* leadtekst: 18 → 20px. Zit tussen --text-m (18) en --text-l (24) in. */
	--mc-text-lead: clamp(1.125rem, calc(0.2016vw + 1.0796rem), 1.25rem);
	/* introtekst onder een h1: 19 → 30px */
	--mc-text-intro: clamp(1.1875rem, calc(1.1089vw + 0.938rem), 1.875rem);

	--mc-radius-l: 2rem;
	--mc-nav-h: clamp(5.5rem, calc(3.2258vw + 4.7742rem), 7.5rem);
	--mc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* Scroll-reveal. Alleen actief als JS draait (html.js) en de bezoeker beweging toestaat.
   Gebruikt `translate` en niet `transform`, zodat een component zijn eigen transform
   (zoals de gekantelde kaart) kan houden. */
.js [data-reveal] {
	opacity: 0;
	translate: 0 2.5rem;
	transition: opacity 0.7s ease, translate 0.7s var(--mc-ease), transform 0.45s var(--mc-ease), background-color 0.3s, color 0.3s;
	transition-delay: var(--reveal-delay, 0s);
}

.js [data-reveal].is-in {
	opacity: 1;
	translate: none;
}

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] {
		opacity: 1;
		translate: none;
		transition: none;
	}
}

/* In de Etch-builder en in Gutenberg draait de reveal-JS niet: content moet daar
   gewoon zichtbaar zijn, anders bewerkt de klant een lege pagina. */
.etch-canvas-body [data-reveal],
.block-editor-iframe__body [data-reveal],
.editor-styles-wrapper [data-reveal] {
	opacity: 1 !important;
	translate: none !important;
}

@keyframes home-hero-bob {
	50% {
		transform: translateY(4px);
	}
}

/* Vangnet voor optionele velden. De builder herkent in een voorwaarde alleen paden die met
   props./item./slots. beginnen; "this.acf.…" en "options.acf.…" worden een letterlijke tekst
   en zijn dus altijd waar. Een leeg veld levert dan een leeg element op: dat verbergt zich hier. */
[class*="btn--"]:empty {
	display: none;
}

html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* ── Lopende tekst uit een WYSIWYG-veld ────────────────────────────────────────
   Eén projectklasse, omdat dezelfde opmaak in artikel, casus en FAQ terugkomt en de
   HTML uit de editor geen eigen classes heeft. Gekoppeld via ClassToken::project_utility. */
.mc-prose > :first-child {
	margin-block-start: 0;
}

.mc-prose > :last-child {
	margin-block-end: 0;
}

.mc-prose p {
	margin-block: 0 1rem;
}

.mc-prose h2 {
	clear: both;
	margin-block: var(--space-xl) var(--space-s);
	font-size: var(--h2);
	font-weight: 500;
	line-height: 1.2;
	color: var(--secondary);
	scroll-margin-block-start: 5.625rem;
}

.mc-prose h3 {
	margin-block: var(--space-l) 0.625rem;
	font-size: var(--h3);
	font-weight: 400;
	line-height: 1.25;
}

.mc-prose h2 + h3 {
	margin-block-start: var(--space-s);
}

.mc-prose ul,
.mc-prose ol {
	margin-block: 0 1.25rem;
	padding-inline-start: 2.5rem;
}

.mc-prose li {
	margin-block-end: 0.375rem;
}

.mc-prose li > ul,
.mc-prose li > ol {
	margin-block: 0.375rem 0;
}

.mc-prose strong {
	font-weight: 700;
}

.mc-prose a:not([class*="btn--"]) {
	color: var(--primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s;
}

.mc-prose a:not([class*="btn--"]):hover {
	color: var(--secondary);
}

.mc-prose a[href$=".pdf"]::after {
	content: " (pdf)";
	font-size: 0.875rem;
	opacity: 0.7;
}

.mc-prose blockquote {
	display: block;
	margin-block: var(--space-l);
	padding: var(--space-m) 0 var(--space-m) var(--space-l);
	border: 0;
	border-inline-start: 4px solid var(--primary);
	border-radius: 0;
	background: none;
	font-size: var(--text-l);
	line-height: 1.3;
}

.mc-prose figure {
	margin-block: var(--space-l);
}

.mc-prose img {
	inline-size: auto;
	max-inline-size: 100%;
	block-size: auto;
	border-radius: 1.5rem;
}

.mc-prose .knoprij {
	margin-block: var(--space-m) var(--space-l);
}

/* tabellen: altijd horizontaal schuifbaar in plaats van de pagina breder te maken */
.mc-prose .tabel,
.mc-prose > table {
	display: block;
	max-inline-size: 100%;
	margin-block: var(--space-m) var(--space-l);
	overflow-x: auto;
	border-radius: var(--radius);
	background: var(--mc-surface-2);
}

.mc-prose table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--mc-text-small);
	line-height: 1.4;
}

.mc-prose th,
.mc-prose td {
	padding: 0.75rem 1.25rem;
	border: 0;
	border-block-end: 1px solid color-mix(in oklch, var(--base) 8%, transparent);
	text-align: start;
	vertical-align: top;
}

.mc-prose tr:last-child td {
	border-block-end: 0;
}

.mc-prose th {
	font-weight: 700;
}

.mc-prose td:not(:first-child),
.mc-prose th:not(:first-child) {
	white-space: nowrap;
}

/* video: poster met afspeelknop; site.js vervangt hem bij klik door de YouTube-speler */
.mc-prose [data-video] {
	position: relative;
	display: block;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	margin-block: var(--space-m) var(--space-l);
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 1.5rem;
	background: var(--base);
	cursor: pointer;
}

.mc-prose [data-video] img,
.mc-prose [data-video] iframe {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}

.mc-prose [data-video] span {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	display: grid;
	place-items: center;
	inline-size: 6rem;
	block-size: 6rem;
	margin: -3rem;
	border-radius: 50%;
	background: var(--white);
	color: var(--primary);
	transition: transform 0.4s var(--mc-ease);
}

.mc-prose [data-video]:hover span {
	transform: scale(1.08);
}

.mc-prose [data-video] svg {
	inline-size: 2.125rem;
	block-size: 2.125rem;
	fill: currentColor;
}

@media (max-width: 599px) {
	.mc-prose ul,
	.mc-prose ol {
		padding-inline-start: 1.5rem;
	}

	.mc-prose th,
	.mc-prose td {
		padding: 0.625rem 0.875rem;
	}
}

/* afspeeldriehoek: wp_kses haalt een <svg> uit editor-HTML weg, dus getekend in CSS */
.mc-prose [data-video] span::before {
	content: "";
	margin-inline-start: 0.375rem;
	border-block: 0.875rem solid transparent;
	border-inline-start: 1.375rem solid currentColor;
}