@charset "UTF-8";
/*
 * ATLAS REISGIDS — vormgeving van /reisgids/
 *
 * Mobile-first: de basisregels zijn de telefoonweergave, de media queries
 * gebruiken uitsluitend min-width en voegen toe. Er staat nergens een
 * max-width query die op mobiel iets terugdraait.
 *
 * Breakpoints:  768px  tablet
 *              1100px  desktop
 *
 * De selectors zijn met .rg voorafgegaan en gebruiken !important op de
 * eigenschappen die de oude atlas-CSS in Customizer → Extra CSS ook zet. Die
 * CSS wordt door WordPress ná de enqueued stylesheets afgedrukt, dus zonder
 * hogere specificiteit zou zij winnen. Zo werkt deze stylesheet of die
 * Customizer-CSS er nog staat of niet.
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. Tokens
   ═══════════════════════════════════════════════════════════════════════ */

.rg {
	--rg-ink: #1a1612;
	--rg-forest: #1a2a1e;
	--rg-green: #2d5a3d;
	--rg-gold: #c8a84b;
	--rg-gold-light: #e8c87a;
	--rg-cream: #fefcf8;
	--rg-sand: #f0ede5;
	--rg-grey: #7a7065;
	--rg-grey-light: #a49a8d;
	--rg-hairline: rgba(200, 168, 75, 0.25);

	--rg-serif: Lora, Georgia, "Times New Roman", serif;
	--rg-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Horizontale marge: op een telefoon smal, op desktop ruim. */
	--rg-gutter: 18px;
	--rg-measure: 720px;

	background: var(--rg-cream);
	color: var(--rg-ink);
	font-family: var(--rg-sans);
	/* 16px voorkomt dat iOS inzoomt zodra een formulierveld focus krijgt. */
	font-size: 16px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

@media (min-width: 768px) {
	.rg {
		--rg-gutter: 32px;
	}
}

@media (min-width: 1100px) {
	.rg {
		--rg-gutter: 40px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   2. Het thema opzij zetten
   ───────────────────────────────────────────────────────────────────────
   De tagDiv-header blijft staan; die is de menubalk. Wat weg moet zijn de
   containers die onze inhoud in een kolom duwen, de post-meta van het thema
   en de themafooter.
   ═══════════════════════════════════════════════════════════════════════ */

.rg-section .td-main-content-wrap {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	background: var(--rg-cream) !important;
}

.rg-section .td-main-content-wrap > .td-container,
.rg-section .td-main-content-wrap > .tdc-zone,
.rg-section .td-container,
.rg-section .tdc-row,
.rg-section .td-pb-row,
.rg-section .td-pb-span8,
.rg-section .td-pb-span12,
.rg-section .vc_column_container,
.rg-section .wpb_wrapper {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	float: none !important;
}

/* Sidebar en thema-postmeta hebben hier niets te doen. */
.rg-section .td-main-sidebar,
.rg-section .td-sidebar,
.rg-section .td-post-header,
.rg-section .td-post-sharing,
.rg-section .td-post-source-tags,
.rg-section .td-author-name,
.rg-section .td-post-next-prev,
.rg-section .td-related-posts,
.rg-section .comments,
.rg-section #comments {
	display: none !important;
}

/*
 * De themafooter wordt verborgen in plaats van niet gerenderd. get_footer()
 * moet wél lopen: daar zit wp_footer() in, waar WP Rocket, de consent-API en
 * de pushmeldingen aan hangen, en het thema sluit daar de containers die de
 * header opent.
 *
 * De klassenamen hieronder komen uit de markup van de live gids, niet uit de
 * documentatie van het thema. Let op: tdc-footer-template staat op de body en
 * is dus géén footer-wrapper; die hier gebruiken zou de hele pagina verbergen.
 * wpautoterms-footer is de juridische footer van de auto-terms-plugin; onze
 * eigen footer draagt die privacy- en cookielinks al.
 */
.rg-section .td-footer-template-wrap,
.rg-section .wpautoterms-footer {
	display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. Raamwerk
   ═══════════════════════════════════════════════════════════════════════ */

.rg-shell {
	width: 100%;
	max-width: calc(var(--rg-measure) + var(--rg-gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--rg-gutter);
	box-sizing: border-box;
}

.rg-hub .rg-shell {
	max-width: 1180px;
}

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

.rg img {
	max-width: 100%;
	height: auto;
}

/* Leesvoortgang. De balk zelf wordt door reisgids.js gevuld. */
.rg-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 9999;
	pointer-events: none;
	background: transparent;
}

.rg-progress-bar {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--rg-gold), var(--rg-gold-light));
	box-shadow: 0 0 6px rgba(200, 168, 75, 0.4);
	transition: width 0.1s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.rg-progress-bar {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   4. Hero
   ───────────────────────────────────────────────────────────────────────
   Op een telefoon van rand tot rand, met de tekst onder het beeld zodat de
   titel altijd leesbaar is. Vanaf 768px schuift de tekst over het beeld.
   ═══════════════════════════════════════════════════════════════════════ */

.rg-hero {
	position: relative;
	background: var(--rg-forest);
	color: var(--rg-cream);
}

.rg-hero-media {
	position: relative;
	margin: 0;
	/*
	 * Vaste verhouding reserveert de ruimte: geen layout shift tijdens laden.
	 * 3:2 en niet 4:3, omdat de foto's in de mediabibliotheek vrijwel allemaal
	 * 3:2 zijn. Bij 4:3 zou object-fit de zijkanten wegsnijden van precies de
	 * brede panorama's die als hero het sterkst zijn.
	 */
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--rg-forest);
}

.rg-hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rg-hero-body {
	position: relative;
	padding: 22px var(--rg-gutter) 30px;
	max-width: calc(var(--rg-measure) + var(--rg-gutter) * 2);
	margin: 0 auto;
}

.rg-kicker {
	font-family: var(--rg-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--rg-gold);
	margin: 0 0 12px;
}

.rg-kicker-sep {
	opacity: 0.5;
}

.rg-title {
	font-family: var(--rg-serif);
	font-size: 30px;
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: var(--rg-cream);
	margin: 0 0 14px;
}

.rg-hero-lead {
	font-family: var(--rg-serif);
	font-size: 17px;
	font-style: italic;
	line-height: 1.55;
	color: rgba(254, 252, 248, 0.88);
	margin: 0 0 16px;
	padding-top: 14px;
	border-top: 2px solid var(--rg-gold);
}

.rg-hero-meta {
	font-family: var(--rg-sans);
	font-size: 12px;
	letter-spacing: 0.4px;
	color: rgba(254, 252, 248, 0.6);
	margin: 0;
}

.rg-hero-meta-sep {
	margin: 0 6px;
	opacity: 0.5;
}

@media (min-width: 768px) {
	.rg-hero-media {
		aspect-ratio: 21 / 9;
		max-height: 62vh;
	}

	/* Tekst over het beeld, met een verloop zodat er altijd contrast is. */
	.rg-hero--overlay .rg-hero-media::after,
	.rg-hero .rg-hero-media::after {
		content: "";
		position: absolute;
		inset: 0;
		/*
		 * Het tekstblok beslaat op deze breedte ruwweg de onderste helft, dus
		 * het verloop moet daar ook echt dekken. Met een lichtere versie viel
		 * de gouden kicker weg tegen een witte gevel.
		 */
		background: linear-gradient(
			to top,
			rgba(26, 42, 30, 0.95) 0%,
			rgba(26, 42, 30, 0.86) 40%,
			rgba(26, 42, 30, 0.52) 66%,
			rgba(26, 42, 30, 0.12) 100%
		);
	}

	.rg-hero {
		display: grid;
	}

	.rg-hero-media {
		grid-area: 1 / 1;
		width: 100%;
	}

	.rg-hero-body {
		grid-area: 1 / 1;
		align-self: end;
		width: 100%;
		padding: 40px var(--rg-gutter) 48px;
		/*
		 * Vanaf hier ligt de tekst op de foto. Het verloop dekt het meeste af,
		 * maar bij een lichte lucht of een witte gevel is dat niet genoeg.
		 * Deze schaduw garandeert leesbaarheid, wat de foto ook toont.
		 */
		text-shadow: 0 1px 14px rgba(26, 42, 30, 0.6);
	}

	.rg-title {
		font-size: 46px;
	}

	.rg-hero-lead {
		font-size: 19px;
		max-width: 34em;
	}
}

@media (min-width: 1100px) {
	.rg-title {
		font-size: 56px;
	}
}

/* Kruimelpad */
.rg-crumbs {
	margin: 0 0 16px;
	font-family: var(--rg-sans);
	font-size: 11px;
	letter-spacing: 0.6px;
}

.rg-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.rg-crumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 6px;
	color: rgba(254, 252, 248, 0.35);
}

.rg-crumbs a {
	color: rgba(254, 252, 248, 0.82);
	text-decoration: none;
}

.rg-crumbs a:hover,
.rg-crumbs a:focus {
	color: var(--rg-gold);
	text-decoration: underline;
}

.rg-crumbs [aria-current="page"] {
	color: rgba(254, 252, 248, 0.55);
}

/* ═══════════════════════════════════════════════════════════════════════
   5. Artikelinhoud (atlas-pillar)
   ───────────────────────────────────────────────────────────────────────
   Dezelfde class-namen als de bestaande gidsen, zodat die zonder
   herschrijven blijven werken. Alleen de bezorging verandert.
   ═══════════════════════════════════════════════════════════════════════ */

.rg-body {
	padding: 30px 0 12px;
	counter-reset: chapter;
}

.rg .atlas-pillar p {
	font-family: var(--rg-sans) !important;
	font-size: 17px !important;
	line-height: 1.72 !important;
	color: var(--rg-ink) !important;
	margin: 0 0 20px !important;
}

.rg .atlas-pillar a {
	color: var(--rg-green);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.rg .atlas-pillar strong {
	font-weight: 700;
	color: var(--rg-forest);
}

/* Hoofdstukkoppen met automatische nummering. */
.rg .atlas-pillar h2 {
	font-family: var(--rg-serif) !important;
	font-size: 25px !important;
	font-weight: 700 !important;
	color: var(--rg-forest) !important;
	line-height: 1.18 !important;
	letter-spacing: -0.3px !important;
	margin: 52px 0 18px !important;
	padding: 0 !important;
	border: none !important;
	counter-increment: chapter !important;
	scroll-margin-top: 24px;
}

.rg .atlas-pillar h2::before {
	content: "Hoofdstuk " counter(chapter, decimal-leading-zero) !important;
	display: block !important;
	font-family: var(--rg-sans) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 3.5px !important;
	text-transform: uppercase !important;
	color: var(--rg-gold) !important;
	margin-bottom: 10px !important;
	position: static !important;
	background: none !important;
	width: auto !important;
	height: auto !important;
}

.rg .atlas-pillar h3 {
	font-family: var(--rg-sans) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 2.6px !important;
	text-transform: uppercase !important;
	color: var(--rg-gold) !important;
	line-height: 1.4 !important;
	margin: 34px 0 12px !important;
	padding: 0 0 10px !important;
	border: none !important;
	border-bottom: 1px solid var(--rg-hairline) !important;
}

.rg .atlas-pillar h3::before {
	display: none !important;
}

.rg .atlas-pillar .atlas-lead {
	font-family: var(--rg-serif) !important;
	font-size: 18px !important;
	font-style: italic !important;
	line-height: 1.58 !important;
	color: var(--rg-green) !important;
	padding: 18px 0 !important;
	margin: 0 0 28px !important;
	border-top: 2px solid var(--rg-gold) !important;
	border-bottom: 1px solid var(--rg-hairline) !important;
}

@media (min-width: 768px) {
	.rg-body {
		padding: 44px 0 20px;
	}

	.rg .atlas-pillar p {
		font-size: 18px !important;
		line-height: 1.75 !important;
	}

	.rg .atlas-pillar h2 {
		font-size: 36px !important;
		margin: 76px 0 24px !important;
	}

	.rg .atlas-pillar h3 {
		font-size: 13px !important;
		margin: 44px 0 16px !important;
	}

	.rg .atlas-pillar .atlas-lead {
		font-size: 20px !important;
		padding: 22px 0 !important;
	}
}

/* ── Inhoudsopgave ──────────────────────────────────────────────────────
   Twaalf hoofdstukken op één kolom duwt op een telefoon de hele gids weg.
   Daarom twee kolommen met compacte typografie: alles blijft zichtbaar,
   zonder uitklapmechaniek die stuk kan gaan.
   ─────────────────────────────────────────────────────────────────────── */

.rg .atlas-pillar .atlas-toc {
	background: var(--rg-sand) !important;
	border-left: 4px solid var(--rg-gold) !important;
	border-radius: 4px !important;
	padding: 18px 16px !important;
	margin: 26px 0 !important;
}

/*
 * De titel is een <summary>: op een telefoon is dit de knop waarmee de lijst
 * open en dicht gaat, dus hij moet als volwaardige tikzone aanvoelen (44px is
 * de ondergrens). Vanaf 768px zet reisgids.js het blok open en is dit weer
 * gewoon een kopje.
 */
.rg .atlas-pillar .atlas-toc-title {
	font-family: var(--rg-sans) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 3px !important;
	text-transform: uppercase !important;
	color: var(--rg-grey) !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	min-height: 44px !important;
	cursor: pointer !important;
	list-style: none !important;
}

/* Het standaard driehoekje van de browser weg; we zetten er zelf een. */
.rg .atlas-pillar .atlas-toc-title::-webkit-details-marker {
	display: none !important;
}

.rg .atlas-pillar .atlas-toc-title::after {
	content: '' !important;
	flex: 0 0 auto !important;
	width: 8px !important;
	height: 8px !important;
	margin-right: 2px !important;
	border-right: 2px solid var(--rg-gold) !important;
	border-bottom: 2px solid var(--rg-gold) !important;
	transform: rotate(45deg) !important;
	transition: transform 0.2s ease !important;
}

.rg .atlas-pillar .atlas-toc[open] > .atlas-toc-title::after {
	transform: rotate(-135deg) !important;
}

.rg .atlas-pillar .atlas-toc-body {
	padding-top: 6px !important;
}

/*
 * Eén kolom op de telefoon. Twee kolommen van dertien pixels serif naast
 * elkaar op 360px werd een blok waar je niet meer langs leest.
 */
.rg .atlas-pillar .atlas-toc ol {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	counter-reset: toc-counter !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 0 14px !important;
}

@media (min-width: 768px) {
	.rg .atlas-pillar .atlas-toc ol {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/*
 * Op de telefoon ruimer en groter: dit is een lijst waar met een vinger op
 * getikt wordt. Vanaf 768px staan de items in twee kolommen en mag het
 * compacter, want daar wordt geklikt in plaats van getikt.
 */
.rg .atlas-pillar .atlas-toc li {
	counter-increment: toc-counter !important;
	font-family: var(--rg-serif) !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: var(--rg-ink) !important;
	padding: 11px 0 !important;
	border-bottom: 1px solid rgba(200, 168, 75, 0.15) !important;
	display: flex !important;
	gap: 8px !important;
}

@media (min-width: 768px) {
	.rg .atlas-pillar .atlas-toc li {
		font-size: 13px !important;
		line-height: 1.35 !important;
		padding: 7px 0 !important;
	}
}

.rg .atlas-pillar .atlas-toc li::before {
	content: counter(toc-counter, decimal-leading-zero) !important;
	font-family: var(--rg-serif) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	color: var(--rg-gold) !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
}

.rg .atlas-pillar .atlas-toc a {
	color: var(--rg-ink) !important;
	text-decoration: none !important;
	/* Ruime raakvlakken: 44px is de ondergrens voor een vingertik. */
	min-height: 24px;
	display: inline-block;
}

.rg .atlas-pillar .atlas-toc a:hover,
.rg .atlas-pillar .atlas-toc a:focus {
	color: var(--rg-green) !important;
	text-decoration: underline !important;
}

/* Het hoofdstuk waar je nu bent, gemarkeerd door reisgids.js. */
.rg .atlas-pillar .atlas-toc li.rg-toc-active a {
	color: var(--rg-green) !important;
	font-weight: 700 !important;
}

.rg .atlas-pillar .atlas-toc li.rg-toc-active::before {
	color: var(--rg-green) !important;
}

@media (min-width: 768px) {
	.rg .atlas-pillar .atlas-toc {
		padding: 26px 28px !important;
		margin: 32px 0 !important;
	}

	.rg .atlas-pillar .atlas-toc ol {
		gap: 0 28px !important;
	}

	.rg .atlas-pillar .atlas-toc li {
		font-size: 15px !important;
		padding: 9px 0 !important;
	}

	.rg .atlas-pillar .atlas-toc li::before {
		font-size: 13px !important;
	}
}

/* ── Fotografie ─────────────────────────────────────────────────────────
   Op een telefoon breekt het beeld uit de leesmarge zodat het van rand tot
   rand loopt. Dat leest rustiger dan een foto met marges op een smal scherm.
   ─────────────────────────────────────────────────────────────────────── */

.rg .atlas-pillar .atlas-figure {
	margin: 30px calc(var(--rg-gutter) * -1) !important;
	padding: 0 !important;
}

.rg .atlas-pillar .atlas-figure img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	border-radius: 0 !important;
	background: var(--rg-sand) !important;
}

.rg .atlas-pillar .atlas-figcaption {
	font-family: var(--rg-sans) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--rg-grey) !important;
	margin: 10px var(--rg-gutter) 0 !important;
	padding: 0 0 0 12px !important;
	border-left: 2px solid var(--rg-gold) !important;
}

.rg .atlas-pillar .atlas-figcaption .atlas-credit {
	display: block !important;
	font-size: 11px !important;
	letter-spacing: 0.3px !important;
	color: var(--rg-grey-light) !important;
	margin-top: 5px !important;
}

.rg .atlas-pillar .atlas-figcaption a {
	color: var(--rg-grey-light) !important;
	text-decoration: underline !important;
}

@media (min-width: 768px) {
	.rg .atlas-pillar .atlas-figure {
		margin: 44px 0 !important;
	}

	.rg .atlas-pillar .atlas-figure img {
		border-radius: 4px !important;
	}

	.rg .atlas-pillar .atlas-figcaption {
		margin: 12px 0 0 !important;
		padding-left: 14px !important;
	}
}

/* ── Donkere informatieblokken ─────────────────────────────────────────── */

.rg .atlas-pillar .atlas-info-box {
	background: var(--rg-forest) !important;
	color: var(--rg-cream) !important;
	border-left: 4px solid var(--rg-gold) !important;
	border-radius: 4px !important;
	padding: 20px 18px !important;
	margin: 28px 0 !important;
}

.rg .atlas-pillar .atlas-info-box .atlas-label {
	display: block !important;
	font-family: var(--rg-sans) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 3px !important;
	text-transform: uppercase !important;
	color: var(--rg-gold) !important;
	margin-bottom: 10px !important;
}

.rg .atlas-pillar .atlas-info-box h3 {
	font-family: var(--rg-serif) !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	color: var(--rg-cream) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 0 10px !important;
}

.rg .atlas-pillar .atlas-info-box p {
	color: rgba(254, 252, 248, 0.85) !important;
	font-size: 16px !important;
	line-height: 1.62 !important;
	margin: 0 0 12px !important;
}

.rg .atlas-pillar .atlas-info-box p:last-child {
	margin-bottom: 0 !important;
}

.rg .atlas-pillar .atlas-info-box strong,
.rg .atlas-pillar .atlas-info-box a {
	color: var(--rg-cream) !important;
}

@media (min-width: 768px) {
	.rg .atlas-pillar .atlas-info-box {
		padding: 28px 32px !important;
	}
}

/* ── Citaat en callout ─────────────────────────────────────────────────── */

.rg .atlas-pillar .atlas-quote {
	font-family: var(--rg-serif) !important;
	font-size: 20px !important;
	font-style: italic !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	color: var(--rg-forest) !important;
	text-align: center !important;
	padding: 26px 8px !important;
	margin: 34px 0 !important;
	border-top: 2px solid var(--rg-gold) !important;
	border-bottom: 2px solid var(--rg-gold) !important;
}

.rg .atlas-pillar .atlas-callout {
	background: rgba(200, 168, 75, 0.08) !important;
	border-left: 4px solid var(--rg-gold) !important;
	border-radius: 0 4px 4px 0 !important;
	padding: 16px 18px !important;
	margin: 26px 0 !important;
}

.rg .atlas-pillar .atlas-callout p {
	font-family: var(--rg-serif) !important;
	font-size: 16px !important;
	font-style: italic !important;
	line-height: 1.5 !important;
	color: var(--rg-forest) !important;
	margin: 0 !important;
}

.rg .atlas-pillar .atlas-callout strong {
	font-style: normal !important;
	font-weight: 700 !important;
	color: var(--rg-green) !important;
}

@media (min-width: 768px) {
	.rg .atlas-pillar .atlas-quote {
		font-size: 25px !important;
		padding: 38px 24px !important;
	}

	.rg .atlas-pillar .atlas-callout p {
		font-size: 17px !important;
	}
}

/* ── Kerncijfers ───────────────────────────────────────────────────────
   Op een telefoon twee naast elkaar in plaats van drie: bij drie kolommen
   loopt "Aantal inwoners" buiten zijn vakje.
   ─────────────────────────────────────────────────────────────────────── */

.rg .atlas-pillar .atlas-stats {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 10px !important;
	margin: 28px 0 !important;
}

.rg .atlas-pillar .atlas-stat {
	background: var(--rg-sand) !important;
	border-top: 3px solid var(--rg-gold) !important;
	border-radius: 4px !important;
	padding: 16px 12px !important;
	text-align: center !important;
	min-width: 0 !important;
}

.rg .atlas-pillar .atlas-stat-number {
	display: block !important;
	font-family: var(--rg-serif) !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	color: var(--rg-forest) !important;
	margin-bottom: 6px !important;
	overflow-wrap: break-word !important;
}

.rg .atlas-pillar .atlas-stat-label {
	font-family: var(--rg-sans) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 1.1px !important;
	text-transform: uppercase !important;
	color: var(--rg-grey) !important;
	line-height: 1.35 !important;
}

@media (min-width: 768px) {
	.rg .atlas-pillar .atlas-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}

	.rg .atlas-pillar .atlas-stat {
		padding: 24px 18px !important;
	}

	.rg .atlas-pillar .atlas-stat-number {
		font-size: 34px !important;
	}

	.rg .atlas-pillar .atlas-stat-label {
		font-size: 11px !important;
		letter-spacing: 1.5px !important;
	}
}

/* ── Kaarten (wijken, hotels) ─────────────────────────────────────────── */

.rg .atlas-pillar .atlas-cards {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 14px !important;
	margin: 22px 0 !important;
}

.rg .atlas-pillar .atlas-card {
	background: var(--rg-cream) !important;
	border: 1px solid var(--rg-hairline) !important;
	border-top: 3px solid var(--rg-gold) !important;
	border-radius: 4px !important;
	padding: 18px !important;
	min-width: 0 !important;
}

.rg .atlas-pillar .atlas-card h3,
.rg .atlas-pillar .atlas-card h4,
.rg .atlas-pillar .atlas-card-title {
	font-family: var(--rg-serif) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.28 !important;
	color: var(--rg-forest) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 0 8px !important;
}

.rg .atlas-pillar .atlas-card h3::before,
.rg .atlas-pillar .atlas-card h4::before {
	display: none !important;
}

.rg .atlas-pillar .atlas-card-meta {
	display: block !important;
	font-family: var(--rg-sans) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	color: var(--rg-gold) !important;
	margin-bottom: 8px !important;
}

.rg .atlas-pillar .atlas-card p,
.rg .atlas-pillar .atlas-card-text {
	font-family: var(--rg-sans) !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--rg-ink) !important;
	margin: 0 !important;
}

.rg .atlas-pillar .atlas-card-price {
	font-family: var(--rg-sans) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.4px !important;
	color: var(--rg-green) !important;
	margin-top: 12px !important;
	padding-top: 12px !important;
	border-top: 1px solid rgba(200, 168, 75, 0.2) !important;
}

@media (min-width: 768px) {
	.rg .atlas-pillar .atlas-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 20px !important;
	}

	.rg .atlas-pillar .atlas-card {
		padding: 24px !important;
	}

	.rg .atlas-pillar .atlas-card h3,
	.rg .atlas-pillar .atlas-card h4,
	.rg .atlas-pillar .atlas-card-title {
		font-size: 20px !important;
	}
}

/* ── Hotelkaart met beoordeling ───────────────────────────────────────── */

.rg .atlas-pillar .atlas-hotel {
	display: flex !important;
	flex-direction: column !important;
	padding: 0 !important;
	overflow: hidden !important;
}

.rg .atlas-pillar .atlas-hotel-photo,
.rg .atlas-pillar .atlas-hotel img {
	display: block !important;
	width: 100% !important;
	height: 180px !important;
	object-fit: cover !important;
	margin: 0 !important;
	border: 0 !important;
	padding: 0 !important;
}

.rg .atlas-pillar .atlas-hotel-body {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	padding: 16px 16px 18px !important;
	min-width: 0 !important;
}

.rg .atlas-pillar .atlas-hotel .atlas-card-text {
	margin: 0 0 auto !important;
	padding-bottom: 12px !important;
}

@media (min-width: 768px) {
	.rg .atlas-pillar .atlas-hotel-photo,
	.rg .atlas-pillar .atlas-hotel img {
		height: 210px !important;
	}

	.rg .atlas-pillar .atlas-hotel-body {
		padding: 20px 22px 22px !important;
	}
}

.rg .atlas-pillar .atlas-score {
	display: inline-flex !important;
	align-items: baseline !important;
	gap: 6px !important;
	background: var(--rg-forest) !important;
	color: var(--rg-cream) !important;
	border-radius: 3px !important;
	padding: 4px 9px !important;
	font-family: var(--rg-sans) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	margin: 0 0 10px !important;
}

.rg .atlas-pillar .atlas-score-src {
	font-size: 10px !important;
	font-weight: 500 !important;
	letter-spacing: 0.5px !important;
	color: rgba(254, 252, 248, 0.7) !important;
	text-transform: uppercase !important;
}

/* ── Affiliate-knop ────────────────────────────────────────────────────
   Op een telefoon volle breedte en minstens 48px hoog. Dit is de knop
   waaraan de sectie zijn inkomsten verdient; een te klein raakvlak kost
   direct conversie.
   ─────────────────────────────────────────────────────────────────────── */

.rg .atlas-pillar .atlas-btn {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 52px !important;
	margin-top: 14px !important;
	padding: 13px 18px !important;
	background: linear-gradient(135deg, var(--rg-gold), var(--rg-gold-light)) !important;
	color: var(--rg-forest) !important;
	font-family: var(--rg-sans) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	text-align: center !important;
	text-decoration: none !important;
	border: none !important;
	border-radius: 3px !important;
	box-sizing: border-box !important;
	transition: background 0.2s, color 0.2s !important;
	/* Voorkomt de grijze tikflits op iOS. */
	-webkit-tap-highlight-color: transparent;
}

.rg .atlas-pillar .atlas-btn:hover,
.rg .atlas-pillar .atlas-btn:focus-visible {
	background: var(--rg-forest) !important;
	color: var(--rg-gold) !important;
}

.rg .atlas-pillar .atlas-btn .atlas-btn-sub {
	display: block !important;
	margin-top: 4px !important;
	font-size: 10px !important;
	font-weight: 500 !important;
	letter-spacing: 0.6px !important;
	text-transform: none !important;
	opacity: 0.85 !important;
}

.rg .atlas-pillar .atlas-btn-wide {
	max-width: none !important;
	margin: 24px 0 8px !important;
}

@media (min-width: 768px) {
	.rg .atlas-pillar .atlas-btn-wide {
		max-width: 420px !important;
		margin: 28px auto 8px !important;
	}
}

/* ── Affiliate-melding ────────────────────────────────────────────────── */

.rg .atlas-pillar .atlas-disclosure {
	background: var(--rg-sand) !important;
	border: 1px dashed rgba(200, 168, 75, 0.65) !important;
	border-radius: 4px !important;
	padding: 14px 16px !important;
	margin: 24px 0 !important;
}

.rg .atlas-pillar .atlas-disclosure p {
	font-family: var(--rg-sans) !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: #5a5248 !important;
	margin: 0 !important;
}

.rg .atlas-pillar .atlas-disclosure strong {
	color: var(--rg-green) !important;
}

/* ── Genummerde tips ──────────────────────────────────────────────────── */

.rg .atlas-pillar .atlas-tips {
	list-style: none !important;
	margin: 28px 0 !important;
	padding: 0 !important;
	counter-reset: tip-counter !important;
}

.rg .atlas-pillar .atlas-tips li {
	counter-increment: tip-counter !important;
	position: relative !important;
	padding: 14px 0 14px 46px !important;
	border-bottom: 1px solid rgba(200, 168, 75, 0.2) !important;
	font-family: var(--rg-sans) !important;
	font-size: 16px !important;
	line-height: 1.62 !important;
	color: var(--rg-ink) !important;
}

.rg .atlas-pillar .atlas-tips li::before {
	content: counter(tip-counter) !important;
	position: absolute !important;
	left: 0 !important;
	top: 12px !important;
	width: 32px !important;
	height: 32px !important;
	background: var(--rg-forest) !important;
	color: var(--rg-gold) !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: var(--rg-serif) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
}

.rg .atlas-pillar .atlas-tips li:last-child {
	border-bottom: none !important;
}

@media (min-width: 768px) {
	.rg .atlas-pillar .atlas-tips li {
		padding: 16px 0 16px 60px !important;
	}

	.rg .atlas-pillar .atlas-tips li::before {
		width: 40px !important;
		height: 40px !important;
		font-size: 18px !important;
		top: 14px !important;
	}
}

/* ── Veelgestelde vragen ──────────────────────────────────────────────── */

.rg .atlas-pillar .atlas-faq {
	margin: 22px 0 !important;
}

.rg .atlas-pillar .atlas-faq-item {
	padding: 18px 0 !important;
	border-bottom: 1px solid var(--rg-hairline) !important;
}

.rg .atlas-pillar .atlas-faq-item:last-child {
	border-bottom: none !important;
}

.rg .atlas-pillar .atlas-faq-q {
	font-family: var(--rg-serif) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.32 !important;
	color: var(--rg-forest) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 0 8px !important;
}

.rg .atlas-pillar .atlas-faq-q::before {
	display: none !important;
}

.rg .atlas-pillar .atlas-faq-a {
	font-family: var(--rg-sans) !important;
	font-size: 16px !important;
	line-height: 1.65 !important;
	color: var(--rg-ink) !important;
	margin: 0 !important;
}

@media (min-width: 768px) {
	.rg .atlas-pillar .atlas-faq-q {
		font-size: 19px !important;
	}
}

/* ── Auteursblok en datum ─────────────────────────────────────────────── */

.rg .atlas-pillar .atlas-author {
	background: var(--rg-sand) !important;
	border-left: 4px solid var(--rg-green) !important;
	border-radius: 4px !important;
	padding: 20px 18px !important;
	margin: 36px 0 0 !important;
}

.rg .atlas-pillar .atlas-author .atlas-label {
	display: block !important;
	font-family: var(--rg-sans) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 3px !important;
	text-transform: uppercase !important;
	color: var(--rg-grey) !important;
	margin-bottom: 10px !important;
}

.rg .atlas-pillar .atlas-author p {
	font-size: 15px !important;
	line-height: 1.65 !important;
	margin: 0 0 10px !important;
}

.rg .atlas-pillar .atlas-author p:last-child {
	margin-bottom: 0 !important;
}

.rg .atlas-pillar .atlas-updated {
	font-family: var(--rg-sans) !important;
	font-size: 12px !important;
	letter-spacing: 0.5px !important;
	color: var(--rg-grey) !important;
	margin: 22px 0 0 !important;
	padding-top: 14px !important;
	border-top: 1px solid rgba(200, 168, 75, 0.3) !important;
}

/* ── Lees ook ─────────────────────────────────────────────────────────── */

.rg .atlas-pillar .atlas-lees-ook {
	background: var(--rg-forest) !important;
	color: var(--rg-cream) !important;
	border-radius: 4px !important;
	padding: 24px 18px !important;
	margin: 40px 0 20px !important;
}

.rg .atlas-pillar .atlas-lees-ook-title {
	font-family: var(--rg-sans) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 3px !important;
	text-transform: uppercase !important;
	color: var(--rg-gold) !important;
	margin: 0 0 14px !important;
}

.rg .atlas-pillar .atlas-lees-ook ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.rg .atlas-pillar .atlas-lees-ook li {
	padding: 10px 0 !important;
	border-bottom: 1px solid rgba(200, 168, 75, 0.2) !important;
	font-family: var(--rg-serif) !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
}

.rg .atlas-pillar .atlas-lees-ook li:last-child {
	border-bottom: none !important;
}

.rg .atlas-pillar .atlas-lees-ook a {
	color: var(--rg-cream) !important;
	text-decoration: none !important;
}

.rg .atlas-pillar .atlas-lees-ook a:hover,
.rg .atlas-pillar .atlas-lees-ook a:focus {
	color: var(--rg-gold) !important;
	text-decoration: underline !important;
}

@media (min-width: 768px) {
	.rg .atlas-pillar .atlas-lees-ook {
		padding: 34px 32px !important;
	}
}

/* Tabellen mogen nooit de layout oprekken op een telefoon. */
.rg .atlas-pillar table {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. Hub
   ═══════════════════════════════════════════════════════════════════════ */

.rg-jump {
	background: var(--rg-forest);
	padding: 14px 0;
	position: sticky;
	top: 0;
	z-index: 40;
}

.rg-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
	/* Op een telefoon horizontaal schuiven in plaats van afbreken. */
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.rg-chips::-webkit-scrollbar {
	display: none;
}

.rg-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	padding: 9px 14px;
	min-height: 40px;
	border: 1px solid rgba(200, 168, 75, 0.45);
	border-radius: 999px;
	font-family: var(--rg-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.4px;
	color: var(--rg-cream);
	text-decoration: none;
	background: transparent;
}

.rg-chip:hover,
.rg-chip:focus-visible {
	background: var(--rg-gold);
	color: var(--rg-forest);
}

.rg-chip-count {
	font-size: 10px;
	font-weight: 700;
	opacity: 0.65;
}

.rg-region {
	padding: 34px 0 6px;
}

.rg-region-head {
	margin-bottom: 18px;
}

.rg-region-title {
	font-family: var(--rg-serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--rg-forest);
	margin: 0 0 8px;
	scroll-margin-top: 70px;
}

.rg-region-intro {
	font-family: var(--rg-sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--rg-grey);
	margin: 0;
	max-width: 46em;
}

.rg-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.rg-card {
	min-width: 0;
}

.rg-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--rg-cream);
	border: 1px solid var(--rg-hairline);
	border-radius: 5px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rg-card-link:hover,
.rg-card-link:focus-visible {
	box-shadow: 0 8px 24px rgba(26, 42, 30, 0.14);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.rg-card-link:hover {
		transform: translateY(-3px);
	}
}

.rg-card-media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--rg-sand);
}

.rg-card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rg-card-name {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 12px;
	font-family: var(--rg-serif);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--rg-cream);
	text-shadow: 0 2px 14px rgba(26, 42, 30, 0.75);
}

.rg-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(26, 42, 30, 0.75) 0%, rgba(26, 42, 30, 0) 55%);
}

.rg-card-name {
	z-index: 1;
}

.rg-card-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	flex: 1 1 auto;
}

.rg-card-title {
	font-family: var(--rg-serif);
	font-size: 19px;
	font-weight: 700;
	color: var(--rg-forest);
	line-height: 1.25;
}

.rg-card-text {
	font-family: var(--rg-sans);
	font-size: 15px;
	line-height: 1.55;
	color: var(--rg-ink);
}

.rg-card-season {
	font-family: var(--rg-sans);
	font-size: 12px;
	color: var(--rg-grey);
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid rgba(200, 168, 75, 0.2);
}

.rg-card-season-label {
	display: block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--rg-gold);
	margin-bottom: 3px;
}

.rg-card-cta {
	font-family: var(--rg-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--rg-green);
}

.rg-card-cta::after {
	content: " →";
}

@media (min-width: 768px) {
	.rg-region {
		padding: 48px 0 8px;
	}

	.rg-region-title {
		font-size: 30px;
	}

	.rg-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
	}
}

@media (min-width: 1100px) {
	.rg-grid--cities {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rg-grid--related {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.rg-region-title {
		font-size: 34px;
	}
}

/* ── Reisnieuws op de hub ─────────────────────────────────────────────── */

.rg-news {
	padding: 34px 0 10px;
	margin-top: 24px;
	border-top: 1px solid var(--rg-hairline);
}

.rg-news-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rg-news-item {
	border-bottom: 1px solid rgba(200, 168, 75, 0.18);
}

.rg-news-item a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 0;
	min-height: 48px;
	text-decoration: none;
	color: inherit;
}

.rg-news-item time {
	font-family: var(--rg-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--rg-gold);
}

.rg-news-title {
	font-family: var(--rg-serif);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--rg-forest);
}

.rg-news-item a:hover .rg-news-title,
.rg-news-item a:focus-visible .rg-news-title {
	color: var(--rg-green);
	text-decoration: underline;
}

@media (min-width: 768px) {
	.rg-news-item a {
		flex-direction: row;
		align-items: baseline;
		gap: 18px;
	}

	.rg-news-item time {
		flex: 0 0 96px;
	}

	.rg-news-title {
		font-size: 19px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   7. Verder in de reisgids
   ═══════════════════════════════════════════════════════════════════════ */

.rg-related {
	padding: 34px 0 10px;
	margin-top: 20px;
	background: var(--rg-sand);
}

.rg-related-title {
	font-family: var(--rg-serif);
	font-size: 22px;
	font-weight: 700;
	color: var(--rg-forest);
	margin: 0 0 18px;
}

.rg-related .rg-card-link {
	background: var(--rg-cream);
}

.rg-related-all {
	margin: 20px 0 0;
	font-family: var(--rg-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.rg-related-all a {
	color: var(--rg-green);
	text-decoration: none;
	display: inline-block;
	min-height: 44px;
	line-height: 44px;
}

.rg-related-all a:hover,
.rg-related-all a:focus {
	text-decoration: underline;
}

.rg-related-all a::after {
	content: " →";
}

@media (min-width: 768px) {
	.rg-related-title {
		font-size: 26px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   8. Eigen footer
   ═══════════════════════════════════════════════════════════════════════ */

.rg-footer {
	background: var(--rg-forest);
	color: rgba(254, 252, 248, 0.75);
	padding: 30px 0 34px;
	margin-top: 30px;
}

.rg-footer-disclosure {
	font-family: var(--rg-sans);
	font-size: 13px;
	line-height: 1.65;
	margin: 0 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(200, 168, 75, 0.28);
	max-width: 56em;
}

.rg-footer-disclosure strong {
	color: var(--rg-gold);
}

.rg-footer-nav ul {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
}

.rg-footer-nav a {
	display: inline-block;
	font-family: var(--rg-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
	color: rgba(254, 252, 248, 0.85);
	text-decoration: none;
	/* Volwaardig raakvlak op een telefoon. */
	min-height: 44px;
	line-height: 44px;
}

.rg-footer-nav a:hover,
.rg-footer-nav a:focus {
	color: var(--rg-gold);
	text-decoration: underline;
}

.rg-footer-legal {
	font-family: var(--rg-sans);
	font-size: 11px;
	line-height: 1.6;
	color: rgba(254, 252, 248, 0.45);
	margin: 0;
}

.rg-empty {
	padding: 40px 0;
	font-family: var(--rg-sans);
	color: var(--rg-grey);
}

/* ═══════════════════════════════════════════════════════════════════════
   9. Toegankelijkheid
   ═══════════════════════════════════════════════════════════════════════ */

.rg a:focus-visible,
.rg .atlas-pillar a:focus-visible {
	outline: 3px solid var(--rg-gold);
	outline-offset: 2px;
	border-radius: 2px;
}

@media print {
	.rg-progress,
	.rg-jump,
	.rg-related,
	.rg-footer {
		display: none;
	}
}