/*
 * Huisstijl Debora Richard — maatvoering, ruimte en kleur als één systeem.
 *
 * De letter zelf wordt door de plugin ingeladen (die wisselt per richting tijdens
 * de letterproef); alles hieronder staat vast.
 *
 * Breekpunten volgen die van Elementor op deze site: mobiel t/m 767, tablet
 * 768–1198, desktop vanaf 1199. Zo blijft het gedrag gelijk aan hoe de pagina's
 * gebouwd zijn.
 */

:root {
	/* ---- Kleur ---------------------------------------------------------- */
	--dr-rood: #e10019;
	--dr-rood-donker: #b30313;
	--dr-turquoise: #46aab2;

	/*
	 * Turquoise op wit haalt 2,75:1 en is dus te licht voor tekst — hij zakt weg
	 * voor wie minder scherp ziet of in de zon op de telefoon kijkt. Deze
	 * donkerdere variant haalt 4,7:1 en is voor links en tekst. De originele
	 * turquoise blijft voor vlakken, lijnen en beeld.
	 */
	--dr-turquoise-tekst: #2f7f86;

	--dr-inkt: #191919;
	--dr-inkt-zacht: #4a4a4a;
	--dr-inkt-stil: #6b6b6b;
	--dr-papier: #ffffff;
	--dr-papier-getint: #f7f8f8;
	--dr-lijn: #e3e6e6;

	/* ---- Maatvoering ----------------------------------------------------- */
	/* Rolnamen, geen maatnamen: een rol kan van maat veranderen, zijn taak niet. */
	/*
	 * Deze maten volgen het bestaande ontwerp, niet een systeem van buiten. Het
	 * viel op dat de site een ongewoon compacte kopschaal heeft: sectiekoppen
	 * staan op 20px met gewicht 600 — nauwelijks groter dan de tekst — terwijl
	 * de kop van het eerste scherm naar 66px gaat. Dat grote gat is precies wat
	 * de pagina's rustig houdt. Een gewonere schaal (32px koppen) maakt van elke
	 * sectiekop een aankondiging en haalt de hiërarchie onderuit.
	 */
	--dr-maat-display: 4.125rem;  /* 66px — alleen het eerste scherm */
	--dr-maat-h1: 2.8125rem;      /* 45px */
	--dr-maat-h2: 1.625rem;       /* 26px */
	--dr-maat-h3: 1.25rem;        /* 20px */
	--dr-maat-h4: 1.25rem;        /* 20px */
	--dr-maat-lead: 1.125rem;     /* 18px — inleidende alinea */
	--dr-maat-tekst: 1rem;        /* 16px — leestekst */
	--dr-maat-klein: 0.875rem;    /* 14px — bijschrift, label, datum */
	--dr-maat-knop: 0.8125rem;    /* 13px — altijd in kapitalen */
	--dr-maat-nav: 0.9375rem;       /* 15px — hoofdmenu */
	--dr-maat-nav-klein: 0.8125rem; /* 13px — bovenbalk en footermenu */

	--dr-hoogte-display: 1.06;
	--dr-hoogte-kop: 1.18;
	--dr-hoogte-subkop: 1.3;
	--dr-hoogte-tekst: 1.7;
	--dr-hoogte-klein: 1.55;

	--dr-spatie-display: -0.021em;
	--dr-spatie-kop: -0.015em;
	--dr-spatie-subkop: -0.006em;
	--dr-spatie-label: 0.01em;

	--dr-gewicht-kop: 700;      /* eerste scherm en h1 */
	--dr-gewicht-subkop: 600;   /* h2 en lager — zo stond het ontwerp */
	--dr-gewicht-tekst: 400;
	--dr-gewicht-nadruk: 600;

	/* ---- Ruimte ---------------------------------------------------------- */
	/* Eén reeks, stap voor stap groter. Alles daartussenin is willekeur. */
	--dr-ruimte-2xs: 0.25rem;   /*  4px */
	--dr-ruimte-xs: 0.5rem;     /*  8px */
	--dr-ruimte-s: 1rem;        /* 16px */
	--dr-ruimte-m: 1.5rem;      /* 24px */
	--dr-ruimte-l: 2.5rem;      /* 40px */
	--dr-ruimte-xl: 4rem;       /* 64px */
	--dr-ruimte-2xl: 6rem;      /* 96px */

	--dr-sectie: 6rem;          /* verticale lucht tussen secties */
	--dr-leesbreedte: 68ch;     /* comfortabele regellengte voor lopende tekst */

	/*
	 * De kolom van een gewone inhoudspagina. Bewust in rem en niet in ch: ch
	 * hangt af van de lettergrootte van het element zelf, dus een kop van 32px
	 * zou een bredere kolom krijgen dan de alinea eronder — en dan lijnt de
	 * linkerrand van de kop niet meer uit met die van de tekst.
	 */
	--dr-leeskolom: 37rem;

	/*
	 * De hoogte van de bovenbalk met de drie ingangen. De kop plakt op min deze
	 * waarde, zodat die balk wegschuift en het menu blijft staan. Verandert de
	 * hoogte van die balk, dan moet dit getal mee.
	 */
	--dr-bovenbalk: 60px;
}

@media (max-width: 1198px) {
	:root {
		--dr-bovenbalk: 0px;
		--dr-maat-display: 3.125rem; /* 50px */
		--dr-maat-h1: 2.375rem;      /* 38px */
		--dr-maat-h2: 1.5rem;        /* 24px */
		--dr-maat-h3: 1.1875rem;     /* 19px */
		--dr-maat-h4: 1.1875rem;     /* 19px */
		--dr-maat-lead: 1.0625rem;   /* 17px */
		--dr-sectie: 4.5rem;
	}
}

@media (max-width: 767px) {
	:root {
		--dr-maat-display: 2.375rem; /* 38px */
		--dr-maat-h1: 1.9375rem;     /* 31px */
		--dr-maat-h2: 1.375rem;      /* 22px */
		--dr-maat-h3: 1.125rem;      /* 18px */
		--dr-maat-h4: 1.125rem;      /* 18px */
		--dr-maat-lead: 1.0625rem;   /* 17px */
		--dr-hoogte-display: 1.14;
		--dr-hoogte-kop: 1.22;
		--dr-sectie: 3.5rem;
	}
}

/* ---- Basis -------------------------------------------------------------- */

/*
 * Let op: .ast-container hoort hier níét bij. Dat is het omhulsel van de kop en
 * de voet; kreeg dat de leesmaat, dan werd de menubalk te breed en brak hij over
 * twee regels — waarna logo en zoekknop meeschoven en de hele kop scheef stond.
 */
body,
.elementor-widget-text-editor,
.elementor-widget-theme-post-content {
	font-family: var(--dr-letter-tekst);
	font-size: var(--dr-maat-tekst);
	line-height: var(--dr-hoogte-tekst);
	font-weight: var(--dr-gewicht-tekst);
	color: var(--dr-inkt);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.entry-title,
.ast-archive-title {
	font-family: var(--dr-letter-koppen);
	color: var(--dr-inkt);
	text-wrap: balance;
	margin-block: 0;

	/*
	 * Koppen stonden overal in hoofdletters. Dat leest langzamer — het oog
	 * herkent een woord aan zijn silhouet, en in kapitalen heeft elk woord
	 * hetzelfde blokvorm-silhouet. Op een telefoon kost het bovendien twee
	 * regels waar er één nodig was. Koppen staan nu in hun eigen schrijfwijze.
	 */
	text-transform: none;
}

h1, .entry-title, .elementor-widget-heading h1.elementor-heading-title {
	font-size: var(--dr-maat-h1);
	line-height: var(--dr-hoogte-kop);
	letter-spacing: var(--dr-spatie-kop);
	font-weight: var(--dr-gewicht-kop);
}

h2, .elementor-widget-heading h2.elementor-heading-title {
	font-size: var(--dr-maat-h2);
	line-height: var(--dr-hoogte-subkop);
	letter-spacing: var(--dr-spatie-subkop);
	font-weight: var(--dr-gewicht-subkop);
}

h3, .elementor-widget-heading h3.elementor-heading-title {
	font-size: var(--dr-maat-h3);
	line-height: var(--dr-hoogte-subkop);
	letter-spacing: var(--dr-spatie-subkop);
	font-weight: var(--dr-gewicht-subkop);
}

h4, h5, h6,
.elementor-widget-heading :is(h4, h5, h6).elementor-heading-title {
	font-size: var(--dr-maat-h4);
	line-height: var(--dr-hoogte-subkop);
	font-weight: var(--dr-gewicht-subkop);
}

/*
 * Het eerste scherm. Alleen daar mag de letter echt groot worden; verderop op de
 * pagina zou dat de hiërarchie platslaan.
 */
.dr-display,
.elementor-element.dr-display .elementor-heading-title {
	font-size: var(--dr-maat-display);
	line-height: var(--dr-hoogte-display);
	letter-spacing: var(--dr-spatie-display);
	font-weight: var(--dr-gewicht-kop);
}

/* Meer lucht bóven een kop dan eronder: zo hoort de kop bij wat erna komt. */
.entry-content :is(h2, h3, h4):not(:first-child) { margin-top: var(--dr-ruimte-xl); }
.entry-content :is(h2, h3, h4) + * { margin-top: var(--dr-ruimte-m); }

p { margin-block: 0 var(--dr-ruimte-m); }
p:last-child { margin-bottom: 0; }

.dr-lead,
.elementor-element.dr-lead .elementor-widget-container {
	font-size: var(--dr-maat-lead);
	line-height: 1.62;
	color: var(--dr-inkt-zacht);
}

small, .dr-klein, figcaption, .elementor-widget-post-info {
	font-size: var(--dr-maat-klein);
	line-height: var(--dr-hoogte-klein);
	letter-spacing: var(--dr-spatie-label);
	color: var(--dr-inkt-stil);
}

strong, b { font-weight: var(--dr-gewicht-nadruk); }

/* ---- Regellengte -------------------------------------------------------- */
/*
 * Alleen op pagina's die niet met Elementor zijn gebouwd. Op Elementor-pagina's
 * is de breedte per kolom ingesteld, en een grens hier bovenop pakt verkeerd uit:
 * de doos wordt smaller dan de kolom en blijft links staan, terwijl de kop
 * erboven over de hele kolom gecentreerd is. Dan staan kop en tekst niet meer
 * onder elkaar — precies wat er in het blok Sollicitatietraining gebeurde.
 */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: var(--dr-leesbreedte);
}

/* Lijsten leesbaar houden */
.entry-content :is(ul, ol) { padding-left: var(--dr-ruimte-m); }
.entry-content li { margin-bottom: var(--dr-ruimte-xs); }

/* ---- Navigatie ---------------------------------------------------------- */
/*
 * De maat van de menubalk stond eerder per item in Elementor. Nu staat hij hier,
 * op één plek. Voorwaarde: het menu past op één regel. Breekt het af, dan
 * schuift de hele kop uit het lood.
 */
.elementor-nav-menu .elementor-item,
.main-header-menu .menu-link,
.ast-header-break-point .main-header-menu .menu-link {
	font-family: var(--dr-letter-koppen);
	font-size: var(--dr-maat-nav);
	font-weight: var(--dr-gewicht-subkop);
	line-height: 1.2;

	/* Net als de knoppen: het menu stond in kapitalen, en dat hoort erbij. */
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* Uitklapmenu's mogen wél afbreken; die staan onder elkaar. */
.elementor-nav-menu--dropdown .elementor-item,
.elementor-nav-menu--dropdown .elementor-sub-item {
	white-space: normal;
	font-size: var(--dr-maat-nav);
	font-weight: var(--dr-gewicht-tekst);
}

/* Bovenbalk en footermenu zijn ondergeschikt, dus een maat kleiner. */
.ast-above-header-menu .menu-link,
.ast-below-header-menu .menu-link,
.site-footer .elementor-nav-menu .elementor-item {
	font-size: var(--dr-maat-nav-klein);
}

/* ---- Links -------------------------------------------------------------- */

.entry-content a:not(.elementor-button):not(.ast-button),
.elementor-widget-text-editor a:not(.elementor-button) {
	color: var(--dr-turquoise-tekst);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, var(--dr-turquoise-tekst) 45%, transparent);
	transition: text-decoration-color 140ms ease-out, color 140ms ease-out;
}

.entry-content a:not(.elementor-button):not(.ast-button):hover,
.elementor-widget-text-editor a:not(.elementor-button):hover {
	color: var(--dr-rood);
	text-decoration-color: currentColor;
}

/* ---- Knoppen ------------------------------------------------------------ */
/*
 * Op de telefoon moet een knop met een duim te raken zijn: minstens 48 hoog.
 * De maat van het label staat vast, de knop groeit met zijn ruimte mee.
 */
.elementor-button,
.ast-button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
	font-family: var(--dr-letter-koppen);
	font-size: var(--dr-maat-knop);
	font-weight: var(--dr-gewicht-subkop);
	line-height: 1.2;

	/*
	 * Knoppen stonden op de hele site in kapitalen — honderd van de honderd. Dat
	 * is geen slordigheid maar het teken waaraan je op deze site een knop
	 * herkent. Kapitalen op 13px vragen wel om meer letterafstand, anders lopen
	 * ze dicht.
	 */
	text-transform: uppercase;
	letter-spacing: 0.07em;
	min-height: 44px;
	padding: var(--dr-ruimte-xs) var(--dr-ruimte-m);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dr-ruimte-xs);
	border-radius: 4px;
	transition: background-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out;
}

.elementor-button:active,
.ast-button:active { transform: translateY(1px); }

/* ---- Formulieren -------------------------------------------------------- */

input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
	font-family: var(--dr-letter-tekst);
	font-size: var(--dr-maat-knop);
	line-height: 1.5;
	min-height: 48px;
	color: var(--dr-inkt);
	border: 1px solid var(--dr-lijn);
	border-radius: 4px;
	padding: var(--dr-ruimte-xs) var(--dr-ruimte-s);
}

textarea { min-height: 8rem; }

::placeholder { color: var(--dr-inkt-stil); opacity: 1; }

label { font-size: var(--dr-maat-klein); font-weight: var(--dr-gewicht-nadruk); }

/* ---- Onderdelen die de browser zelf tekent ------------------------------ */
/*
 * Selectie, cursor, focusring en schuifbalk komen standaard uit de browser en
 * horen bij geen enkele huisstijl. Ze meenemen kost weinig en is precies het
 * verschil tussen een pagina die is samengesteld en een die is ontworpen.
 */
::selection {
	background: color-mix(in srgb, var(--dr-turquoise) 28%, transparent);
	color: var(--dr-inkt);
}

:focus-visible {
	outline: 2px solid var(--dr-turquoise-tekst);
	outline-offset: 3px;
	border-radius: 2px;
}

/* De oude ring van Astra en Elementor uitzetten, anders staan er twee. */
:focus:not(:focus-visible) { outline: none; }

input, textarea, select { caret-color: var(--dr-rood); }

html {
	scrollbar-color: var(--dr-turquoise) var(--dr-papier-getint);
	scrollbar-width: thin;
	scroll-behavior: smooth;
}

/* Cijfers in tabellen onder elkaar uitlijnen */
table, .dr-cijfers { font-variant-numeric: tabular-nums; }

@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;
	}
}

/* ---- Mobiel en tablet --------------------------------------------------- */
/*
 * De maten hierboven schalen al mee via de breekpunten. Wat hier staat, gaat
 * over gedrag dat op een klein scherm anders moet zijn dan op een groot: het
 * aanraakvlak, de foto's en de dingen die anders buiten beeld lopen.
 */

@media (max-width: 767px) {
	/* Met een duim raken: 48 is de ondergrens waar een knop nog te bedienen is. */
	.elementor-button,
	.ast-button,
	.wp-block-button__link,
	input[type="submit"],
	button[type="submit"],
	.elementor-nav-menu--dropdown .elementor-item {
		min-height: 48px;
	}

	/* Twee knoppen naast elkaar passen niet; onder elkaar en over de volle breedte. */
	.elementor-widget-button .elementor-button {
		width: 100%;
		max-width: 24rem;
	}

	/* Naast elkaar staande knoppen houden lucht ertussen. */
	.elementor-widget-button + .elementor-widget-button {
		margin-top: var(--dr-ruimte-s);
	}

	/*
	 * Foto's op telefoonformaat. Geen minimumhoogte op secties opleggen: de
	 * bovenbalk van de kop is op de telefoon leeg, en die kreeg dan een gat van
	 * een half scherm. Alleen het beeld zelf normaliseren.
	 */
	img,
	.elementor-widget-image img,
	.elementor-widget-theme-post-featured-image img {
		height: auto;
		max-width: 100%;
	}

	/* Tabellen en brede blokken mogen schuiven in plaats van de pagina te rekken. */
	.entry-content table,
	.elementor-widget-table-of-contents,
	.wp-block-table {
		display: block;
		overflow-x: auto;
		max-width: 100%;
	}

	/* Op één kolom heeft de leesbreedte geen werk meer te doen. */
	.entry-content > p,
	.entry-content > ul,
	.entry-content > ol {
		max-width: none;
	}

}

@media (min-width: 768px) and (max-width: 1198px) {
	.elementor-button,
	.ast-button,
	input[type="submit"],
	button[type="submit"] {
		min-height: 48px;
	}
}

/* ---- Het eerste scherm -------------------------------------------------- */
/*
 * De kop van de homepage zit in een schuifelement. Die had zijn eigen maten in
 * Elementor; nu volgt hij de displaymaat uit dit systeem. De regel eronder is de
 * belofte, niet een tweede kop — vandaar de rustiger maat en het lichtere gewicht.
 */
.elementor-slide-heading {
	font-family: var(--dr-letter-koppen);
	font-size: var(--dr-maat-display);
	line-height: var(--dr-hoogte-display);
	letter-spacing: var(--dr-spatie-display);
	font-weight: var(--dr-gewicht-kop);
	text-wrap: balance;
	margin-bottom: var(--dr-ruimte-s);
	max-width: 18ch;
}

.elementor-slide-description {
	font-family: var(--dr-letter-tekst);
	font-size: var(--dr-maat-lead);
	line-height: 1.5;
	font-weight: var(--dr-gewicht-tekst);
	margin-bottom: var(--dr-ruimte-l);
	max-width: 46ch;
}

.elementor-slide-button {
	font-size: var(--dr-maat-knop);
	font-weight: var(--dr-gewicht-subkop);
	min-height: 44px;
}

/* Bij gecentreerde of rechts uitgelijnde tekst hoort de begrenzing mee te schuiven. */
.elementor-slide-content--center .elementor-slide-heading,
.elementor-slide-content--center .elementor-slide-description { margin-inline: auto; }
.elementor-slide-content--right .elementor-slide-heading,
.elementor-slide-content--right .elementor-slide-description { margin-left: auto; }

@media (max-width: 767px) {
	.elementor-slide-heading { max-width: none; }
	.elementor-slide-description { max-width: none; }
	.elementor-slide-button { width: auto; }
}

/* ---- Gewone inhoudspagina's --------------------------------------------- */
/*
 * Pagina's die niet met Elementor zijn gebouwd — de dienstpagina's, de
 * rechtsgebieden — krijgen hier hun opmaak. De leeskolom staat gecentreerd in
 * plaats van tegen de linkerrand: op een breed scherm blijft er anders een halve
 * pagina leeg naast de tekst.
 */
body:not(.elementor-page) .entry-content > :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote, figure, .wp-block-buttons, .wp-block-table) {
	max-width: var(--dr-leeskolom);
	margin-inline: auto;
}

body:not(.elementor-page) .entry-header,
body:not(.elementor-page) .ast-single-post-order {
	max-width: var(--dr-leeskolom);
	margin-inline: auto;
}

body:not(.elementor-page) .entry-title {
	margin-bottom: var(--dr-ruimte-l);
}

/* ---- Knoppen uit de blokeditor ------------------------------------------ */
/*
 * De blokeditor levert zijn eigen knop. Die stond grijs; hier krijgt hij het
 * rood van de huisstijl, zodat een knop er overal hetzelfde uitziet.
 */
.wp-block-button__link,
.wp-block-button__link:visited {
	background-color: var(--dr-rood);
	border: 0;
	color: #fff;
	text-decoration: none;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background-color: var(--dr-rood-donker);
	color: #fff;
}

.wp-block-buttons { margin-top: var(--dr-ruimte-l); }

/* ---- Correcties op het thema -------------------------------------------- */
/*
 * Astra Pro zet de paginatitel op 15px met gewicht 400 — een instelling die
 * ooit voor een blogoverzicht bedoeld was en nu elke paginakop plat slaat.
 * Dezelfde selector, later in de rij, zet hem terug op de kopmaat.
 */
header.entry-header .entry-title,
.ast-single-post .entry-title,
.page-title {
	font-size: var(--dr-maat-h1);
	font-weight: var(--dr-gewicht-kop);
	line-height: var(--dr-hoogte-kop);
	letter-spacing: var(--dr-spatie-kop);
}

/* De knop uit de blokeditor krijgt ook de klasse wp-element-button mee. */
.wp-block-button__link.wp-element-button,
.wp-block-button__link.wp-element-button:visited {
	color: #fff;
}

/* ---- Knoppen naast elkaar ----------------------------------------------- */
/*
 * Een binnensectie van Elementor centreert zijn inhoud en geeft elke kolom een
 * vast percentage. Voor twee knoppen naast elkaar wil je precies het
 * tegenovergestelde: tegen de linkerrand, en elke knop zo breed als zijn tekst.
 */
.dr-hero-knoppen > .elementor-container {
	justify-content: flex-start;
	width: auto;
	max-width: none;
	gap: var(--dr-ruimte-s);
}

.dr-hero-knoppen > .elementor-container > .elementor-column {
	width: auto;
	flex: 0 0 auto;
}

/* De band onder de kop: twee knoppen, één links en één rechts. */
.dr-band-knoppen .elementor-widget-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dr-ruimte-s);
}

.dr-band-knoppen .elementor-widget-button { width: auto; }

@media (max-width: 767px) {
	.dr-hero-knoppen > .elementor-container {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.dr-hero-knoppen > .elementor-container > .elementor-column { width: 100%; }

	.dr-band-knoppen .elementor-widget-wrap { flex-direction: column; align-items: stretch; }
}

/* ---- Tekst over beeld ---------------------------------------------------- */
/*
 * Een link staat sitebreed in turquoise. Op een foto is dat te donker om op te
 * vallen en te licht om te lezen. In een blok met deze klasse worden links wit,
 * met een onderstreping die het toch als link laat lezen.
 */
.dr-op-foto .elementor-widget-container a:not(.elementor-button) {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.55);
	text-underline-offset: 0.18em;
}

.dr-op-foto .elementor-widget-container a:not(.elementor-button):hover,
.dr-op-foto .elementor-widget-container a:not(.elementor-button):focus-visible {
	color: #fff;
	text-decoration-color: #fff;
}

@media (max-width: 767px) {
	/* De knoppenband raakte op de telefoon de linkerrand van het scherm. */
	.dr-band-knoppen .elementor-container { padding-inline: var(--dr-ruimte-s); }
}

/* ---- Kaarten naast elkaar ------------------------------------------------ */
/*
 * Drie alinea's die elk een andere bezoeker aanspreken, naast elkaar in plaats
 * van onder elkaar. De rand is het enige wat ze scheidt: geen vlak, geen schaduw
 * — anders wordt een pagina met een paar van deze rijen al gauw een dambord.
 */
.dr-kaartenrij > .elementor-container {
	align-items: stretch;
}

.dr-kaart > .elementor-widget-wrap {
	height: 100%;
	padding: var(--dr-ruimte-m);
	border: 1px solid var(--dr-lijn);
	border-radius: 6px;
	background: var(--dr-papier);
	align-content: start;
	gap: var(--dr-ruimte-xs);
	transition: border-color 140ms ease-out;
}

.dr-kaart:hover > .elementor-widget-wrap {
	border-color: var(--dr-turquoise);
}

.dr-kaart .elementor-widget { width: 100%; }

/* De regel boven de kaarten staat gecentreerd binnen een leesbare breedte. */
.dr-midden .elementor-widget-container {
	max-width: 46rem;
	margin-inline: auto;
}

/* ---- Labels -------------------------------------------------------------- */
/*
 * Een opsomming met verticale streepjes leest als één lange regel, en je ziet
 * niet welke woorden aanklikbaar zijn. Als losse labels is dat allebei opgelost,
 * en past dezelfde inhoud in de helft van de hoogte.
 */
/*
 * Geen flexrij maar losse blokjes in een alinea. Zo volgen ze de uitlijning van
 * de tekst eromheen — in een gecentreerd blok staan ze gecentreerd, in een
 * links uitgelijnd blok links. Een flexrij zou dat negeren en altijd links
 * beginnen, ook buiten de kolom.
 */
.dr-chips {
	margin-top: var(--dr-ruimte-s);
	line-height: 2.6;
}

/*
 * De :not()-staarten staan er voor de specificiteit, niet voor de logica: zonder
 * die twee verliest deze regel van de algemene linkregel verderop en worden de
 * labels turquoise — wat op een donkere foto wegvalt.
 */
.dr-chips a:not(.elementor-button):not(.ast-button) {
	/* De kleur komt van de tekst eromheen, zodat dit ook op wit werkt. */
	color: inherit;
	display: inline-block;
	margin: 0 0.35rem 0 0;
	padding: 0.28rem 0.85rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: var(--dr-maat-klein);
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 140ms ease-out, color 140ms ease-out;
}

.dr-chips a:not(.elementor-button):not(.ast-button):hover,
.dr-chips a:not(.elementor-button):not(.ast-button):focus-visible {
	background: currentColor;
	color: var(--dr-inkt);
}


@media (max-width: 767px) {
	.dr-kaart > .elementor-widget-wrap { padding: var(--dr-ruimte-s); }
}

/*
 * Belangrijk voor de kop hieronder: ergens in het thema staat
 * `body { overflow: hidden }`, bedoeld om een te breed element af te knippen.
 * Maar overflow hidden maakt van dat element een scrollbox, en binnen een
 * scrollbox werkt `position: sticky` niet — de kop bleef daardoor gewoon
 * meescrollen. `clip` knipt net zo goed af, maar maakt geen scrollbox.
 */
html,
body {
	overflow-x: clip;
	overflow-y: visible;
}

/* ---- De kop van de site ------------------------------------------------- */
/*
 * Eén vaste balk boven de pagina, die meeschuift bij het scrollen.
 *
 * Daarvóór lag hij doorzichtig over de foto van elke pagina en sprong hij bij het
 * scrollen om naar wit — met javascript dat hem uit de pagina-opbouw haalde,
 * waardoor alles eronder 69 pixels omhoog schoot. `position: sticky` doet
 * hetzelfde werk zonder die sprong: het element blijft in de opbouw staan, dus
 * er valt geen hoogte weg.
 *
 * De bovenbalk met de drie ingangen schuift weg, het menu blijft staan. Dat gaat
 * met één getal: de kop plakt niet op 0 maar op min de hoogte van die bovenbalk.
 * De hele kop schuift dus mee tot de bovenbalk precies boven het scherm uit is,
 * en blijft daar hangen — met het menu op 0.
 *
 * Het alternatief zou zijn om alleen de menubalk te laten plakken, maar een
 * plakkend element blijft binnen de doos van zijn ouder: zodra de kop uit beeld
 * is, gaat het menu mee. Vandaar deze weg, en niet die.
 */
.elementor-location-header {
	position: sticky;
	top: calc(-1 * var(--dr-bovenbalk));
	z-index: 99;
	background: var(--dr-papier);
}

/* Het uitklapmenu moet over de pagina heen kunnen, niet erachter. */
.elementor-location-header .elementor-nav-menu--dropdown {
	z-index: 100;
}

/*
 * Bij het springen naar een anker — de knop 'omlaag' op de homepage, of een link
 * met een # erin — komt de aangewezen plek anders onder de balk te liggen.
 */
html {
	scroll-padding-top: 150px;
}

@media (max-width: 1024px) {
	html { scroll-padding-top: 90px; }
}

/* ---- Teller in het menu -------------------------------------------------- */
/*
 * Het bolletje achter "Vacatures" met het aantal dat openstaat. Het getal komt
 * uit de plugin rankdata-vacatures; de vorm staat hier, omdat deze stylesheet op
 * elke pagina meekomt en het menu dat ook doet.
 *
 * De maat staat in em, niet in pixels: zo krimpt en groeit hij mee met het
 * menu-item waar hij achter staat, ook als de menumaat ooit verandert.
 */
.dr-teller {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6em;
	height: 1.6em;
	padding: 0 0.45em;
	margin-inline-start: 0.5em;
	border-radius: 999px;
	background: var(--dr-rood);
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;

	/* Geen letterafstand: die van het menu duwt het cijfer uit het midden. */
	letter-spacing: 0;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	vertical-align: 0.1em;
}

/* In het uitklapmenu is de regel al smal; daar mag hij iets kleiner. */
.elementor-nav-menu--dropdown .dr-teller {
	font-size: 0.7em;
}