/*
 * Basisopmaak
 * ------------------------------------------------------------------------
 * De algemene regels voor tekst, links, knoppen, iconen en secties. Alles
 * gebruikt de tokens uit tokens.css; losse kleurcodes horen hier niet.
 *
 * Twee afspraken:
 * 1. Eigen klassen beginnen met "mc-", zodat ze nooit botsen met Kadence of
 *    WordPress.
 * 2. Links/rechts schrijven we als "inline-start/-end" en boven/onder als
 *    "block-start/-end" (CSS logical properties). In een Arabische versie
 *    (rechts naar links) draait de opmaak dan vanzelf goed om.
 */

/* ---- Pagina ---------------------------------------------------------------- */

body.mc {
	background-color: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-text);
	font-size: var(--fs-base);
	line-height: var(--lh-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/*
 * Kadence geeft de buitenste pagina-omhulling (#wrapper) een eigen
 * achtergrond (palette9: wit, of #111a1d in de donkere modus). Die dekt de
 * kleur van de gekozen modus af. Transparant maken, zodat de achtergrond
 * van body (--c-bg) zichtbaar is. Kadence-kaders binnen gewone pagina's
 * (.content-bg) houden hun eigen, iets lichtere vlak; dat is bedoeld.
 */
body.mc #wrapper {
	background-color: transparent;
}

/*
 * Een sectie met een set kleurt zelf haar achtergrond en tekst.
 * .mc-set-media niet: die ligt over een foto of video.
 */
.mc-set-alt,
.mc-set-inverse,
.mc-set-accent,
.mc-set-deep,
.mc-set-dark,
.mc-set-paper {
	background-color: var(--c-bg);
	color: var(--c-text);
}

/* ---- Koppen en tekst ------------------------------------------------------- */

.mc :is(h1, h2, h3, h4) {
	font-family: var(--font-display);
	font-optical-sizing: auto;      /* Fraunces kiest zelf de fijnste vorm per grootte */
	line-height: var(--lh-snug);
	letter-spacing: -0.01em;
	text-wrap: balance;             /* nette regelval, geen los woord op de laatste regel */
	color: inherit;
}

.mc-display {
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	font-weight: 600;
	line-height: var(--lh-tight);
	letter-spacing: -0.02em;
}

/*
 * Kopstijlen als klasse, los van het HTML-element. Zo kan een <h2> eruitzien
 * als een grote kop, of een <p> als een kop, zonder de documentstructuur
 * (belangrijk voor schermlezers en SEO) aan te passen.
 */
.mc-h1,
.mc-h2,
.mc-h3 {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.mc-h1 { font-size: var(--fs-2xl); font-weight: 600; line-height: var(--lh-tight); }
.mc-h2 { font-size: var(--fs-xl);  font-weight: 600; line-height: var(--lh-snug); }
.mc-h3 { font-size: var(--fs-lg);  font-weight: 560; line-height: var(--lh-snug); }

.mc p {
	text-wrap: pretty;
}

/* Inleidende alinea onder een kop. */
.mc-lead {
	font-size: var(--fs-md);
	line-height: 1.55;
	color: var(--c-text-2);
	max-inline-size: 38em;
}

/* Klein label boven een kop, in smalle hoofdletters. */
.mc-kicker {
	display: inline-block;
	font-family: var(--font-text);
	font-size: var(--fs-xs);
	font-weight: 600;
	font-stretch: var(--label-stretch);
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--c-kicker, var(--c-accent));
	margin-block-end: var(--sp-3);
}

/* Messing lijntje als sierelement onder of naast een kop. */
.mc-rule {
	display: block;
	inline-size: 3.5rem;
	block-size: 2px;
	margin-block: var(--sp-4) var(--sp-5);
	background: var(--c-brass);
	border: 0;
}

.mc-muted { color: var(--c-text-2); }

/* ---- Links en focus -------------------------------------------------------- */

.mc :where(main) a:not([class]) {
	color: var(--c-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.mc :where(main) a:not([class]):hover {
	color: var(--c-accent-hover);
	text-decoration-thickness: 2px;
}

/*
 * Zichtbare focus voor wie met het toetsenbord navigeert. :focus-visible
 * toont de ring alleen bij toetsenbordgebruik, niet bij een muisklik.
 */
.mc :focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 3px;
	border-radius: var(--radius-s);
}

.mc ::selection {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

/* ---- Layout-hulpen --------------------------------------------------------- */

/* Houdt de inhoud binnen een prettige breedte, met marge aan beide kanten. */
.mc-container {
	inline-size: 100%;
	max-inline-size: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.mc-container--narrow {
	max-inline-size: calc(var(--container-narrow) + 2 * var(--gutter));
}

/* Is een container zelf een raster (bijv. de prijslijst of het contactblok), dan
   mogen de onderdelen ook smaller worden dan hun inhoud; anders duwt een foto of
   formulierveld ze op een heel smal scherm (320 px) net buiten beeld. */
.mc-container > * {
	min-inline-size: 0;
}

/* Een sectie: vaste ruimte boven en onder. */
.mc-section {
	padding-block: var(--sp-section);
}

/*
 * Elementen onder elkaar met een gelijke tussenruimte.
 * Met "gap" in een raster, niet met marges: zo kan een onderdeel dat zelf
 * margin: 0 heeft (bijv. een lijst) de ruimte nooit per ongeluk wegnemen.
 */
.mc-stack {
	display: grid;
	gap: var(--stack-space, var(--sp-4));
	align-content: start;
}

.mc-stack > * {
	margin-block: 0;
	min-inline-size: 0; /* lange woorden of rijen mogen het raster niet oprekken */
}

/* Elementen naast elkaar die netjes doorlopen naar een volgende regel. */
.mc-cluster {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cluster-space, var(--sp-3));
}

/*
 * Een raster dat zelf bepaalt hoeveel kolommen passen. --grid-min is de
 * minimale kolombreedte; smaller wordt het nooit, dus op een telefoon
 * vanzelf één kolom.
 */
.mc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
	gap: var(--grid-gap, var(--sp-5));
}

/* Alleen voor schermlezers: onzichtbaar, maar wel voorgelezen. */
.mc-visually-hidden {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- Knoppen --------------------------------------------------------------- */

/*
 * .mc-btn             hoofdknop: teal met donkere tekst (7,9:1)
 * .mc-btn--ghost      omlijnd, voor een tweede keuze naast de hoofdknop
 * .mc-btn--quiet      alleen tekst met pijl, voor "lees meer"
 * .mc-btn--block      over de volle breedte (bijv. op mobiel)
 *
 * Elke knop is minstens 44px hoog, zodat hij met een duim goed te raken is.
 */
.mc-btn {
	--btn-bg: var(--c-accent);
	--btn-fg: var(--c-on-accent);
	--btn-border: var(--c-accent);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-block-size: var(--tap-min);
	padding-block: 0.8em;
	padding-inline: 1.4em;
	font-family: var(--font-text);
	font-size: var(--fs-sm);
	font-weight: 600;
	font-stretch: 92%;
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--btn-fg);
	background: var(--btn-bg);
	border: 1.5px solid var(--btn-border);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition:
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.mc-btn:hover {
	--btn-bg: var(--c-accent-hover);
	--btn-border: var(--c-accent-hover);
	color: var(--btn-fg);
}

.mc-btn:active {
	--btn-bg: var(--c-accent-press);
	--btn-border: var(--c-accent-press);
	transform: translateY(1px);
}

.mc-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--c-text);
	--btn-border: var(--c-line-control);
}

.mc-btn--ghost:hover {
	--btn-bg: transparent;
	--btn-fg: var(--c-accent);
	--btn-border: var(--c-accent);
}

.mc-btn--quiet {
	--btn-bg: transparent;
	--btn-fg: var(--c-accent);
	--btn-border: transparent;
	padding-inline: 0;
}

.mc-btn--quiet:hover {
	--btn-bg: transparent;
	--btn-fg: var(--c-accent-hover);
	--btn-border: transparent;
}

.mc-btn--block {
	display: flex;
	inline-size: 100%;
}

.mc-btn[disabled],
.mc-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ---- Iconen ---------------------------------------------------------------- */

/*
 * Iconen komen uit één SVG-bestand (assets/icons/sprite.svg) en worden
 * geplaatst met mc_icon('naam') in PHP. Ze nemen de tekstkleur over
 * (currentColor) en schalen mee met de lettergrootte.
 */
.mc-icon {
	inline-size: 1.25em;
	block-size: 1.25em;
	flex: none;
	vertical-align: -0.2em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mc-icon--lg { inline-size: 2rem;   block-size: 2rem;   stroke-width: 1.5; }
.mc-icon--xl { inline-size: 3rem;   block-size: 3rem;   stroke-width: 1.25; }

/* Merklogo's (zoals Instagram) zijn gevuld in plaats van lijn. */
.mc-icon--solid {
	fill: currentColor;
	stroke: none;
}

/*
 * Alleen iconen met een richting (pijlen, chevrons) spiegelen in een
 * rechts-naar-links-taal. Gereedschap, klokken en logo's nooit.
 */
[dir="rtl"] .mc-icon--dir {
	transform: scaleX(-1);
}

/* ---- Beweging -------------------------------------------------------------- */

/*
 * Wie in het besturingssysteem "minder beweging" heeft ingesteld (bijv.
 * vanwege duizeligheid of migraine), krijgt geen animaties en geen
 * automatisch spelende video.
 */
@media (prefers-reduced-motion: reduce) {
	.mc *,
	.mc *::before,
	.mc *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}