:root {

	/* =========================================================
	   AdM Administraties - huisstijl
	   ========================================================= */

	--adm-dark: #B8757A;
	--adm-dark-2: #A8666C;

	--adm-light: #FFF3FF;
	--adm-light-soft: #FFFAFF;

	--adm-pink: #B8757A;
	--adm-pink-dark: #B8757A;
	--adm-pink-deep: #9D5D63;

	--adm-white: #FFFFFF;

	--adm-text: #3D3336;
	--adm-heading: #2F2528;
	--adm-muted: #6D6064;

	--adm-border:
		rgba(
			184,
			117,
			122,
			0.22
		);

	--adm-container: 1180px;
	--adm-gutter: 24px;

	--adm-radius: 22px;

	--adm-font:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;

	--adm-serif:
		Georgia,
		"Times New Roman",
		serif;

	--adm-section:
		clamp(
			68px,
			7vw,
			96px
		);
}


/* =========================================================
   Basis
   ========================================================= */

html {
	box-sizing: border-box;

	scroll-behavior: smooth;
}

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

body.adm-site {
	margin: 0;

	background: var(--adm-light);
	color: var(--adm-text);

	font-family: var(--adm-font);
	font-size: 16px;
	line-height: 1.7;

	-webkit-font-smoothing: antialiased;

	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	display: block;

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

a {
	color: inherit;
}

button,
input,
textarea,
select {
	font: inherit;
}


/* =========================================================
   Typografie
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;

	color: var(--adm-heading);

	font-family: var(--adm-serif);
	font-weight: 700;

	line-height: 1.1;
}

h1 {
	font-size:
		clamp(
			2.55rem,
			5vw,
			4.6rem
		);

	letter-spacing: -0.03em;
}

h2 {
	font-size:
		clamp(
			1.95rem,
			3.2vw,
			3rem
		);

	letter-spacing: -0.02em;
}

h3 {
	font-size:
		clamp(
			1.25rem,
			2vw,
			1.65rem
		);
}

p {
	margin-top: 0;
	margin-bottom: 1.3rem;
}


/* =========================================================
   Containers
   ========================================================= */

.adm-container {
	width:
		min(
			calc(
				100% - (var(--adm-gutter) * 2)
			),
			var(--adm-container)
		);

	margin-inline: auto;
}

.adm-container--narrow {
	max-width: 820px;
}

.adm-prose {
	font-size: 1.08rem;
}


/* =========================================================
   Sectiekleuren - DONKER
   ========================================================= */

.adm-section--dark {
	background: var(--adm-dark);
	color: var(--adm-white);
}

.adm-section--dark h1,
.adm-section--dark h2,
.adm-section--dark h3,
.adm-section--dark h4,
.adm-section--dark h5,
.adm-section--dark h6 {
	color: var(--adm-white);
}

.adm-section--dark p,
.adm-section--dark li {
	color:
		rgba(
			255,
			255,
			255,
			0.94
		);
}

.adm-section--dark .adm-eyebrow {
	color: var(--adm-white);
}


/* =========================================================
   Sectiekleuren - LICHT
   ========================================================= */

.adm-section--light {
	background: var(--adm-light);
	color: var(--adm-text);
}

.adm-section--light h1,
.adm-section--light h2,
.adm-section--light h3,
.adm-section--light h4,
.adm-section--light h5,
.adm-section--light h6 {
	color: var(--adm-heading);
}

.adm-section--light .adm-eyebrow {
	color: var(--adm-dark);
}


/* =========================================================
   Eyebrow
   ========================================================= */

.adm-eyebrow {
	margin-bottom: 12px;

	font-size: 0.78rem;
	font-weight: 800;

	letter-spacing: 0.13em;
	line-height: 1.4;

	text-transform: uppercase;
}


/* =========================================================
   Links
   ========================================================= */

.adm-section--light a:not(.adm-button) {
	color: var(--adm-dark);
}

.adm-section--dark a:not(.adm-button) {
	color: var(--adm-white);
}


/* =========================================================
   Focus
   ========================================================= */

:focus-visible {
	outline:
		3px solid
		var(--adm-pink-dark);

	outline-offset: 4px;
}


/* =========================================================
   Tekstselectie
   ========================================================= */

::selection {
	background: var(--adm-dark);
	color: var(--adm-white);
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;

		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;

		transition-duration: 0.01ms !important;
	}

}


/* =========================================================
   Mobiel
   ========================================================= */

@media (max-width: 700px) {

	h1 {
		font-size:
			clamp(
				2.35rem,
				11vw,
				3.5rem
			);
	}

	h2 {
		font-size:
			clamp(
				1.85rem,
				8vw,
				2.6rem
			);
	}

}