/* =========================================================================
   Vakantieland Wiki — full page-template styling
   Design-tokens scoped op de wiki-article zodat de rest van de site niet
   wordt beïnvloed.
   ========================================================================= */

.wiki-article {
	--wiki-bg:           #FAF7F0;
	--wiki-bg-alt:       #F5F1E8;
	--wiki-bg-map:       #C4CCD6;
	--wiki-accent:       #B8954A;
	--wiki-accent-deep:  #8A6E36;
	--wiki-accent-soft:  #E8D9A8;
	--wiki-text:         #1F2A33;
	--wiki-text-soft:    #6B6B6B;
	--wiki-border:       #E5E0D5;
	--wiki-success:      #6FA86F;
	--wiki-warning:      #E89C5B;
	--wiki-danger:       #C4554A;
	--wiki-radius:       14px;
	--wiki-radius-sm:    8px;
	--wiki-radius-pill:  999px;
	--wiki-shadow-card:  0 4px 24px rgba(31,42,51,0.08);
	--wiki-shadow-deep:  0 20px 48px -20px rgba(31,42,51,0.32);
	--wiki-h1-size:      clamp(2.2rem, 4vw, 3.4rem);
	--wiki-h2-size:      clamp(1.5rem, 2.5vw, 2.2rem);
	--wiki-h3-size:      1.25rem;
	--wiki-body-size:    1.0625rem;
	--wiki-line-height:  1.75;
	--wiki-content-w:    720px;
	--wiki-wide-w:       1100px;
	--wiki-ease:         cubic-bezier(0.16, 1, 0.3, 1);
	background: var(--wiki-bg);
	color: var(--wiki-text);
	font-family: var(--font-body, "Inter", system-ui, sans-serif);
	/* Safety net: voorkomt dat één foutief wide element op mobiel het hele
	   scherm laat scrollen of cards buiten viewport laat vallen. */
	overflow-x: hidden;
	max-width: 100vw;
}
/* Alle direct kinderen van wiki-prose mogen nooit horizontaal overflowen. */
.wiki-prose > * { max-width: 100%; }
.wiki-prose img, .wiki-prose iframe, .wiki-prose video { max-width: 100%; height: auto; }

/* ---------- 1. Hero ---------- */
.wiki-hero {
	position: relative;
	min-height: 480px;
	background-color: var(--wiki-region, var(--wiki-accent));
	background-size: cover;
	background-position: center;
	color: #fff;
	display: flex;
	align-items: flex-end;
	padding: 32px 0 36px;
	overflow: hidden;
}
.wiki-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
	pointer-events: none;
}
.wiki-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}
.wiki-crumbs {
	display: flex;
	gap: 8px;
	font-size: 13px;
	color: rgba(255,255,255,0.85);
	margin-bottom: 24px;
}
.wiki-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.4); }
.wiki-crumbs a:hover { text-decoration-color: #fff; color: #fff; }
.wiki-crumbs .current { color: #fff; font-weight: 500; }

.wiki-hero__title-wrap { max-width: 720px; }
.wiki-hero__title {
	font-family: var(--font-display, "Fraunces", "Playfair Display", serif);
	font-size: var(--wiki-h1-size);
	line-height: 1.05;
	font-weight: 600;
	margin: 0 0 12px;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 14px rgba(0,0,0,0.25);
}
.wiki-hero__flag { font-size: 0.9em; line-height: 1; }
.wiki-hero__tag {
	max-width: 700px;
	margin: 0 0 24px;
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.45;
	color: rgba(255,255,255,0.95);
	text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.wiki-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: #fff;
}
.wiki-hero__meta span {
	background: rgba(255,255,255,0.18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 6px 12px;
	border-radius: var(--wiki-radius-pill);
	border: 1px solid rgba(255,255,255,0.2);
}
.wiki-hero__readtime { font-weight: 500; }

/* ---------- 2. Quick-facts strip ---------- */
.wiki-quickbar {
	background: #fff;
	border-bottom: 1px solid var(--wiki-border);
	box-shadow: var(--wiki-shadow-card);
	position: sticky;
	top: 0;
	z-index: 20;
}
.wiki-quickbar__inner { padding: 14px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wiki-quickfacts {
	display: flex;
	gap: 12px;
	min-width: max-content;
	padding: 0 4px;
}
.wiki-quickfact {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 16px;
	background: var(--wiki-bg-alt);
	border-radius: var(--wiki-radius-sm);
	min-width: 140px;
	scroll-snap-align: start;
}
.wiki-quickfact__icon { font-size: 16px; line-height: 1; }
.wiki-quickfact__label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wiki-text-soft); font-weight: 600; }
.wiki-quickfact__value { font-size: 14px; font-weight: 600; color: var(--wiki-text); }

/* ---------- 2b. Optionele animatie ---------- */
.wiki-animation {
	background: var(--wiki-bg, #FBF4E6);
	padding: 36px 0 8px;
}
.wiki-animation__title {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 500;
	color: var(--wiki-text);
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}
.wiki-animation__lede {
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 15px;
	color: var(--wiki-text-soft);
	margin: 0 0 18px;
	max-width: 680px;
}
.wiki-animation__player {
	position: relative;
	width: 100%;
	max-width: 1200px;
	aspect-ratio: 16 / 9;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	background: #0a0a0a;
	box-shadow: 0 12px 40px -16px rgba(31,42,55,0.25);
}
.wiki-animation__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Poster (klik-om-te-starten) */
.wiki-animation__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	background-color: #1a1a1a;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	font-family: var(--font-body, "Inter", sans-serif);
	transition: filter 0.2s ease;
}
.wiki-animation__poster:hover,
.wiki-animation__poster:focus-visible {
	filter: brightness(1.05);
	outline: none;
}
.wiki-animation__poster:focus-visible {
	box-shadow: inset 0 0 0 3px var(--wiki-accent, #B8954A);
}
.wiki-animation__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgba(255,255,255,0.92);
	color: #1a1a1a;
	box-shadow: 0 8px 28px -8px rgba(0,0,0,0.5);
	transition: transform 0.2s ease, background 0.2s ease;
}
.wiki-animation__poster:hover .wiki-animation__play,
.wiki-animation__poster:focus-visible .wiki-animation__play {
	transform: scale(1.06);
	background: #fff;
}
.wiki-animation__play svg { width: 36px; height: 36px; margin-left: 4px; }
.wiki-animation__poster-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.wiki-animation__poster-cta { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.wiki-animation__poster-dot { opacity: 0.6; }
.wiki-animation__poster-dur { font-variant-numeric: tabular-nums; opacity: 0.85; }

/* Fullscreen-knop (overlay rechtsboven) */
.wiki-animation__fs-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 8px;
	background: rgba(10,10,10,0.55);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background 0.15s ease, transform 0.15s ease;
}
.wiki-animation__fs-btn:hover { background: rgba(10,10,10,0.78); }
.wiki-animation__fs-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wiki-animation__fs-icon { width: 18px; height: 18px; }
.wiki-animation__fs-icon--exit { display: none; }
.wiki-animation__player.is-fullscreen .wiki-animation__fs-icon--enter { display: none; }
.wiki-animation__player.is-fullscreen .wiki-animation__fs-icon--exit  { display: block; }

/* In fullscreen: laat iframe het hele scherm vullen */
.wiki-animation__player:fullscreen,
.wiki-animation__player:-webkit-full-screen {
	width: 100vw;
	height: 100vh;
	max-width: none;
	aspect-ratio: auto;
	border-radius: 0;
}

@media (max-width: 700px) {
	.wiki-animation { padding: 24px 0 8px; }
	.wiki-animation__player { border-radius: 12px; }
	.wiki-animation__play { width: 68px; height: 68px; }
	.wiki-animation__play svg { width: 28px; height: 28px; }
	.wiki-animation__fs-btn { top: 8px; right: 8px; width: 34px; height: 34px; }
}

/* Inline-variant: zit binnen .wiki-content (na het meta-card, voor de eerste H2). */
.wiki-animation--inline {
	background: transparent;
	padding: 8px 0 32px;
	margin: 8px 0 8px;
}
.wiki-animation--inline .wiki-animation__title {
	font-size: clamp(22px, 2.2vw, 28px);
	margin-top: 8px;
}

/* Mobiel: speler blijft binnen de content-padding zodat 't keurig uitlijnt
   met de tekst eronder. Voor "groter" gebruikt de bezoeker de fullscreen-knop. */
@media (max-width: 760px) {
	.wiki-animation--inline .wiki-animation__player {
		border-radius: 10px;
	}
}

/* Pseudo-fullscreen fallback voor iOS Safari (geen Element.requestFullscreen
   op iframes vóór iOS 16.4). De .is-pseudo-fs klas zet de speler op de
   volledige viewport via position:fixed. */
.wiki-animation__player.is-pseudo-fs {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	aspect-ratio: auto;
	border-radius: 0;
	z-index: 9999;
	background: #000;
}
body.has-pseudo-fs { overflow: hidden; }

/* ---------- 3. Two-col layout ---------- */
/* NB: alleen verticale padding gebruiken — horizontale padding komt van
   .container-wide. Anders worden body-tekst en kaarten op mobiel tegen
   de schermrand gedrukt. */
.wiki-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 48px;
	padding-top: 48px;
	padding-bottom: 64px;
	align-items: start;
}
@media (max-width: 1023px) {
	.wiki-layout {
		grid-template-columns: 1fr;
		gap: 24px;
		padding-top: 32px;
		padding-bottom: 48px;
	}
}

/* Voorkom horizontale scroll wanneer een kindelement (bijv. een lange
   tabelregel of kaart-content) breder is dan de viewport op mobiel. */
@media (max-width: 760px) {
	html, body { overflow-x: hidden; }
}

/* TOC */
.wiki-toc {
	position: sticky;
	top: 100px;            /* onder de quickbar */
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 14px;
}
@media (max-width: 1023px) {
	.wiki-toc { position: static; top: auto; }
}
.wiki-toc__details summary {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	padding: 12px 14px;
	background: var(--wiki-bg-alt);
	border-radius: var(--wiki-radius-sm);
	list-style: none;
	margin-bottom: 12px;
}
.wiki-toc__details summary::-webkit-details-marker { display: none; }
.wiki-toc__details summary::after { content: "▸"; float: right; transition: transform 200ms var(--wiki-ease); }
.wiki-toc__details[open] summary::after { transform: rotate(90deg); }
.wiki-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: toc;
}
.wiki-toc__list li { counter-increment: toc; }
.wiki-toc__list a {
	display: block;
	padding: 6px 12px 6px 32px;
	color: var(--wiki-text-soft);
	text-decoration: none;
	border-left: 2px solid transparent;
	transition: color 160ms var(--wiki-ease), border-color 160ms var(--wiki-ease), background 160ms var(--wiki-ease);
	position: relative;
	line-height: 1.4;
}
.wiki-toc__list a::before {
	content: counter(toc, decimal-leading-zero);
	position: absolute;
	left: 8px;
	font-size: 11px;
	font-weight: 600;
	color: var(--wiki-accent);
	letter-spacing: 0.04em;
	top: 8px;
}
.wiki-toc__list a:hover {
	color: var(--wiki-text);
	background: var(--wiki-bg-alt);
	border-left-color: var(--wiki-accent-soft);
}
.wiki-toc__list a.is-active {
	color: var(--wiki-text);
	border-left-color: var(--wiki-accent);
	font-weight: 600;
	background: var(--wiki-bg-alt);
}

/* ---------- Content (prose) ---------- */
.wiki-content {
	max-width: var(--wiki-content-w);
	margin-left: auto;
	margin-right: auto;
	font-size: var(--wiki-body-size);
	line-height: var(--wiki-line-height);
	width: 100%;
}
.wiki-prose p { margin: 0 0 1.4em; }
.wiki-prose p.wiki-lead {
	font-size: 1.25em;
	line-height: 1.55;
	color: var(--wiki-text-soft);
	font-style: italic;
	border-left: 3px solid var(--wiki-accent);
	padding-left: 18px;
}
.wiki-prose ul, .wiki-prose ol { margin: 0 0 1.4em 1.2em; padding: 0; }
.wiki-prose li { margin-bottom: 0.4em; }
.wiki-prose a:not(.wiki-cta-link):not(.wiki-btn) {
	color: var(--wiki-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(184,149,74,0.4);
}
.wiki-prose a:not(.wiki-cta-link):not(.wiki-btn):hover {
	color: var(--wiki-accent-deep);
	text-decoration-color: var(--wiki-accent-deep);
}
.wiki-prose h2,
.wiki-prose .wiki-sec__title {
	font-family: var(--font-display, "Fraunces", "Playfair Display", serif);
	font-size: var(--wiki-h2-size);
	font-weight: 600;
	color: var(--wiki-text);
	margin: 2.4em 0 0.6em;
	letter-spacing: -0.01em;
	scroll-margin-top: 90px;
}
.wiki-prose h3 {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: var(--wiki-h3-size);
	font-weight: 600;
	margin: 1.8em 0 0.6em;
}
.wiki-prose blockquote {
	margin: 1.4em 0;
	padding: 16px 20px;
	background: var(--wiki-bg-alt);
	border-left: 3px solid var(--wiki-accent);
	border-radius: 0 var(--wiki-radius-sm) var(--wiki-radius-sm) 0;
	font-style: italic;
	color: var(--wiki-text);
}

.wiki-sec { scroll-margin-top: 90px; }
.wiki-sec__eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wiki-accent);
	font-weight: 700;
	margin-bottom: 8px;
}
.wiki-sec__title {
	margin-top: 0 !important;
}
.wiki-sec + .wiki-sec { margin-top: 3em; }

/* ---------- Fact-block: Meta-card (intro) ---------- */
.wiki-meta-card {
	background: #fff;
	border: 1px solid var(--wiki-border);
	border-radius: var(--wiki-radius);
	padding: 18px 22px;
	margin: 1.8em 0;
	box-shadow: var(--wiki-shadow-card);
}
.wiki-meta-card dl { margin: 0; }
.wiki-meta-card__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--wiki-border);
	font-size: 14px;
}
.wiki-meta-card__row:last-child { border-bottom: 0; }
.wiki-meta-card__row dt { color: var(--wiki-text-soft); font-weight: 500; }
.wiki-meta-card__row dd { margin: 0; color: var(--wiki-text); font-weight: 500; text-align: right; }

/* ---------- Fact-block: Scores ---------- */
.wiki-scores {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin: 1.8em 0;
}
@media (max-width: 600px) { .wiki-scores { grid-template-columns: repeat(2, 1fr); } }
.wiki-score {
	background: #fff;
	border: 1px solid var(--wiki-border);
	border-radius: var(--wiki-radius-sm);
	padding: 12px;
	text-align: center;
}
.wiki-score__label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wiki-text-soft); margin: 0 0 8px; font-weight: 600; }
.wiki-score__bar { height: 6px; background: var(--wiki-bg-alt); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.wiki-score__fill { height: 100%; background: linear-gradient(90deg, var(--wiki-accent) 0%, #E76F51 100%); border-radius: 999px; transition: width 600ms var(--wiki-ease); }
.wiki-score__value { font-family: var(--font-display, "Fraunces", serif); font-size: 18px; font-weight: 600; }

/* ---------- Fact-block: 12-month cards ----------
   12 maanden als kleurige cards. Score-badge rechtsboven, kleur volgt
   de rating (groen=top → rood=vermijd). Note-tekst onder de verdict
   geeft de specifieke reden waarom die maand wel/niet goed is. */
.wiki-monthcards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
	margin: 1.4em 0 2em;
}
.wiki-monthcard {
	position: relative;
	background: #fff;
	border: 1px solid var(--wiki-border);
	border-radius: var(--wiki-radius);
	padding: 14px 16px 16px;
	overflow: hidden;
	transition: transform 200ms var(--wiki-ease), box-shadow 200ms var(--wiki-ease);
}
.wiki-monthcard:hover {
	transform: translateY(-2px);
	box-shadow: var(--wiki-shadow-card);
}
/* Linker accent-streep — kleur volgt de rating */
.wiki-monthcard::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 4px;
	background: currentColor;
}
.wiki-monthcard__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}
.wiki-monthcard__name {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wiki-text);
}
.wiki-monthcard__score {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	background: currentColor; /* parent verdict-color sets via wrapper */
}
.wiki-monthcard__verdict {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	margin: 0 0 6px;
	color: currentColor;
}
.wiki-monthcard__note {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--wiki-text);
	margin: 0;
}
/* Kleurmodifiers — currentColor wordt geset op de card-root, zo erven
   accent-streep, score-badge én verdict-tekst dezelfde tint. */
.wiki-monthcard--top    { color: #2F6B2F; }
.wiki-monthcard--good   { color: #5B8A2F; }
.wiki-monthcard--okay   { color: #876C1A; }
.wiki-monthcard--low    { color: #B8693A; }
.wiki-monthcard--avoid  { color: #8E2E25; }
/* Score-badge krijgt een ietwat lichtere/zachtere fill voor leesbaarheid */
.wiki-monthcard--top   .wiki-monthcard__score { background: var(--wiki-success); }
.wiki-monthcard--good  .wiki-monthcard__score { background: #7FA84A; }
.wiki-monthcard--okay  .wiki-monthcard__score { background: #D4A82A; }
.wiki-monthcard--low   .wiki-monthcard__score { background: var(--wiki-warning); }
.wiki-monthcard--avoid .wiki-monthcard__score { background: var(--wiki-danger); }
/* Verdict-tekst krijgt iets soberder kleur dan de accent — leesbaarheid */
.wiki-monthcard__verdict { opacity: 0.95; }

@media (max-width: 600px) {
	.wiki-monthcards {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		grid-auto-rows: 1fr; /* alle rijen even hoog op mobiel */
	}
	.wiki-monthcard {
		padding: 12px 14px 14px;
		display: flex;
		flex-direction: column;
	}
	.wiki-monthcard__name { font-size: 1rem; }
	.wiki-monthcard__score { font-size: 1.2rem; width: 28px; height: 28px; flex: 0 0 auto; }
	.wiki-monthcard__note {
		font-size: 13px;
		line-height: 1.45;
		/* Tekst breekt netjes en cards blijven lekker leesbaar op smal scherm */
		word-break: normal;
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

/* ---------- Highlight cards (zelfde stijl als food-cards) ---------- */
.wiki-highlightcards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
	margin: 1.4em 0 1.6em;
}
.wiki-highlightcard {
	background: #fff;
	border: 1px solid var(--wiki-border);
	border-radius: var(--wiki-radius);
	padding: 20px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	position: relative;
	transition: transform 220ms var(--wiki-ease), box-shadow 220ms var(--wiki-ease), border-color 220ms var(--wiki-ease);
}
.wiki-highlightcard:hover {
	transform: translateY(-2px);
	box-shadow: var(--wiki-shadow-card);
	border-color: var(--wiki-accent-soft);
}
.wiki-highlightcard__icon {
	font-size: 30px;
	line-height: 1;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--wiki-accent-soft) 0%, var(--wiki-bg-alt) 100%);
	border-radius: 50%;
	margin-bottom: 12px;
	flex: 0 0 auto;
}
.wiki-highlightcard__name {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 1.18rem;
	font-weight: 600;
	color: var(--wiki-text);
	margin: 0;
	letter-spacing: -0.01em;
}
.wiki-highlightcard__type {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wiki-accent-deep);
	font-weight: 600;
	margin: 0 0 8px;
}
.wiki-highlightcard__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wiki-text);
	margin: 0;
}
.wiki-highlightcard__book {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	padding: 4px 12px;
	border-radius: var(--wiki-radius-pill);
	background: var(--wiki-accent-soft);
	color: var(--wiki-accent-deep);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	align-self: flex-start;
}

@media (max-width: 600px) {
	/* Mobiel: simpele 1-koloms stack, geen horizontale scroll-snap meer.
	   Eerder veroorzaakte de scroll-snap met overflow-x: auto dat cards
	   buiten het scherm vielen op smalle viewports. Dit is voorspelbaar. */
	.wiki-highlightcards {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
		margin: 1em 0 1.4em;
	}
	.wiki-cards-header + .wiki-highlightcards { margin-top: 0.4em; }
	.wiki-highlightcard {
		padding: 16px 16px 18px;
	}
	.wiki-highlightcard:hover { transform: none; box-shadow: none; border-color: var(--wiki-border); }
}

/* Oude .wiki-highlights / .wiki-highlight stijl is vervangen door
   .wiki-highlightcards / .wiki-highlightcard hierboven. */

/* ---------- Fact-block: Weather grid ---------- */
.wiki-weather-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 1.4em 0;
}
@media (max-width: 600px) { .wiki-weather-grid { grid-template-columns: repeat(2, 1fr); } }
.wiki-weather-card {
	background: #fff;
	border: 1px solid var(--wiki-border);
	border-radius: var(--wiki-radius-sm);
	padding: 16px;
	text-align: center;
}
.wiki-weather-card__season { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wiki-text-soft); margin: 0 0 4px; font-weight: 600; }
.wiki-weather-card__temp { font-family: var(--font-display, "Fraunces", serif); font-size: 32px; font-weight: 600; margin: 0 0 4px; line-height: 1; }
.wiki-weather-card__rain, .wiki-weather-card__sea { font-size: 12px; color: var(--wiki-text-soft); margin: 0; }

/* ---------- Fact-block: Budget ---------- */
.wiki-budget-tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 1.4em 0;
}
@media (max-width: 600px) { .wiki-budget-tiers { grid-template-columns: 1fr; } }
.wiki-budget-tier {
	background: #fff;
	border: 1px solid var(--wiki-border);
	border-radius: var(--wiki-radius-sm);
	padding: 14px;
	text-align: center;
}
.wiki-budget-tier--featured { background: var(--wiki-accent-soft); border-color: var(--wiki-accent); }
.wiki-budget-tier__label { font-size: 12px; color: var(--wiki-text-soft); font-weight: 600; margin: 0 0 4px; }
.wiki-budget-tier__price { font-family: var(--font-display, "Fraunces", serif); font-size: 24px; font-weight: 600; margin: 0; }
.wiki-budget-tier__sub { font-size: 11px; color: var(--wiki-text-soft); margin: 0; }

.wiki-budget-examples {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	margin: 0 0 12px;
}
@media (max-width: 600px) { .wiki-budget-examples { grid-template-columns: repeat(2, 1fr); } }
.wiki-budget-example {
	background: #fff;
	border: 1px solid var(--wiki-border);
	border-radius: var(--wiki-radius-sm);
	padding: 10px;
	text-align: center;
	font-size: 12px;
}
.wiki-budget-example__price { font-weight: 700; color: var(--wiki-text); margin-top: 2px; font-size: 14px; }

.wiki-price-compared { font-size: 13px; color: var(--wiki-text-soft); margin: 8px 0 0; }
.wiki-price-compared--up { color: var(--wiki-danger); }
.wiki-price-compared--down { color: var(--wiki-success); }

/* ---------- Fact-block: Safety + Health ---------- */
.wiki-twocol {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 1.4em 0;
}
@media (max-width: 700px) { .wiki-twocol { grid-template-columns: 1fr; } }
.wiki-block {
	background: #fff;
	border: 1px solid var(--wiki-border);
	border-radius: var(--wiki-radius);
	padding: 18px;
}
.wiki-block h3 {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 17px;
	margin: 0 0 10px;
}
.wiki-stat {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px dashed var(--wiki-border);
	font-size: 14px;
}
.wiki-stat:last-of-type { border-bottom: 0; }
.wiki-stat > span:first-child { color: var(--wiki-text-soft); }
.wiki-block__note { font-size: 13px; color: var(--wiki-text-soft); margin: 8px 0 4px; line-height: 1.5; }
.wiki-block__link { font-size: 13px; margin: 6px 0 0; }
.wiki-block__link a { color: var(--wiki-accent); text-decoration: underline; text-underline-offset: 3px; }

.wiki-stars { color: var(--wiki-accent); letter-spacing: 1px; font-size: 14px; }
.wiki-stars span[aria-hidden] { color: rgba(0,0,0,0.15); }

.wiki-lgbtq { display: inline-block; padding: 3px 10px; border-radius: var(--wiki-radius-pill); font-size: 12px; font-weight: 600; }
.wiki-lgbtq--zeer-vriendelijk { background: #DCEEDC; color: #2E7A2E; }
.wiki-lgbtq--vriendelijk { background: #EAF3DA; color: #5C7A2E; }
.wiki-lgbtq--neutraal { background: #FBEFC8; color: #8A6E36; }
.wiki-lgbtq--voorzichtig { background: #FBE0C8; color: #B8693A; }
.wiki-lgbtq--afgeraden { background: #F8D5D0; color: #A53A2E; }

.wiki-vacc { display: inline-block; padding: 3px 10px; border-radius: var(--wiki-radius-pill); font-size: 12px; font-weight: 600; background: var(--wiki-bg-alt); color: var(--wiki-text); }

.wiki-hazards { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wiki-hazards span {
	background: #ECECEC;
	font-size: 12px;
	color: var(--wiki-text-soft);
	padding: 3px 10px;
	border-radius: var(--wiki-radius-pill);
}

/* ---------- Fact-block: Routes ---------- */
.wiki-routes { display: grid; gap: 10px; margin: 1.4em 0; }
.wiki-route {
	background: #fff;
	border: 1px solid var(--wiki-border);
	border-radius: var(--wiki-radius);
	padding: 14px 16px;
}
.wiki-route__name { font-weight: 700; margin: 0 0 6px; }
.wiki-route__duration { color: var(--wiki-accent); font-weight: 600; font-size: 13px; margin-left: 4px; }
.wiki-route__stops { font-size: 14px; color: var(--wiki-text-soft); margin: 0; line-height: 1.5; }

/* ---------- Fact-block: Practical info ---------- */
.wiki-practical {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 24px;
	background: #fff;
	border: 1px solid var(--wiki-border);
	border-radius: var(--wiki-radius);
	padding: 16px 18px;
	margin: 1.4em 0;
}
@media (max-width: 600px) { .wiki-practical { grid-template-columns: 1fr; } }
.wiki-practical__row {
	display: flex;
	gap: 12px;
	font-size: 14px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--wiki-border);
}
.wiki-practical__row:last-child,
.wiki-practical__row:nth-last-child(2) { border-bottom: 0; }
.wiki-practical__icon { width: 22px; flex-shrink: 0; }
.wiki-practical__label { color: var(--wiki-text-soft); margin-right: 4px; font-weight: 500; }

/* ---------- Fact-block: Tips ---------- */
.wiki-tips {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 1.4em 0;
}
@media (max-width: 600px) { .wiki-tips { grid-template-columns: 1fr; } }
.wiki-tip {
	background: var(--wiki-accent-soft);
	border-radius: var(--wiki-radius);
	padding: 16px 18px;
	border-left: 3px solid var(--wiki-accent);
}
.wiki-tip--warn { background: #FBE0C8; border-left-color: var(--wiki-warning); }
.wiki-tip__label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wiki-accent-deep); margin-bottom: 4px; }
.wiki-tip--warn .wiki-tip__label { color: #B8693A; }
.wiki-tip p { font-size: 14px; line-height: 1.55; color: var(--wiki-text); margin: 0; }

/* ---------- Fact-block: Sustainability quote ---------- */
.wiki-sustain {
	background: #DCEEDC;
	border-left: 3px solid var(--wiki-success);
	padding: 14px 18px;
	border-radius: 0 var(--wiki-radius) var(--wiki-radius) 0;
	color: #2E5E2E;
	font-style: normal;
	margin: 1.4em 0;
	font-size: 14px;
	line-height: 1.5;
}

/* ---------- Fact-block: Food ---------- */
.wiki-food { margin: 1.4em 0; }
.wiki-foodrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.wiki-chip {
	font-size: 13px;
	background: var(--wiki-accent-soft);
	color: var(--wiki-text);
	padding: 5px 12px;
	border-radius: var(--wiki-radius-pill);
}
.wiki-drink { font-size: 14px; color: var(--wiki-text-soft); margin: 4px 0 0; }

/* ---------- Food/drink rich cards (object-format in countries.json) ----------
   Desktop: grid 2-3 koloms. Mobiel: horizontale scroll-snap carrousel zonder JS.
   Een visuele "peek" van de volgende card op mobiel zorgt voor een natuurlijke
   uitnodiging om door te scrollen. Geen extra scripts geladen. */
.wiki-foodcards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
	margin: 1.4em 0 1.6em;
}
.wiki-foodcard {
	background: #fff;
	border: 1px solid var(--wiki-border);
	border-radius: var(--wiki-radius);
	padding: 20px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	transition: transform 220ms var(--wiki-ease), box-shadow 220ms var(--wiki-ease), border-color 220ms var(--wiki-ease);
}
.wiki-foodcard:hover {
	transform: translateY(-2px);
	box-shadow: var(--wiki-shadow-card);
	border-color: var(--wiki-accent-soft);
}
.wiki-foodcard__icon {
	font-size: 30px;
	line-height: 1;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--wiki-accent-soft) 0%, var(--wiki-bg-alt) 100%);
	border-radius: 50%;
	margin-bottom: 12px;
	flex: 0 0 auto;
}
.wiki-foodcard__name {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 1.18rem;
	font-weight: 600;
	color: var(--wiki-text);
	margin: 0;
	letter-spacing: -0.01em;
}
.wiki-foodcard__type {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wiki-accent-deep);
	font-weight: 600;
	margin: 0 0 8px;
}
.wiki-foodcard__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wiki-text);
	margin: 0;
}

/* Cards-header (titel + subtitel boven elke card-grid) ---------------
   Subtiele kop die context geeft aan de cards eronder. Niet zo zwaar
   als een H2, maar wel duidelijk genoeg om uit de tekst te springen.
   Wordt gebruikt boven food, drinks, highlights en month-cards. */
.wiki-cards-header {
	margin: 1.4em 0 0.6em;
}
.wiki-cards-header:first-child { margin-top: 0; }
.wiki-cards-header__title {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--wiki-text);
	margin: 0 0 4px;
	letter-spacing: -0.01em;
	line-height: 1.25;
}
.wiki-cards-header__subtitle {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--wiki-text-soft);
	margin: 0;
	max-width: 56ch;
}
/* Cards die direct na een header komen: top-margin gelijktrekken zodat
   de header echt aan de cards "vast" zit, niet in de lucht hangt. */
.wiki-cards-header + .wiki-foodcards,
.wiki-cards-header + .wiki-highlightcards,
.wiki-cards-header + .wiki-monthcards,
.wiki-cards-header + .wiki-drinks__list {
	margin-top: 0.6em;
}

/* Drinks — secundair blok, rij van "drink-bars" met icon links + naam/desc rechts */
.wiki-drinks {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px dashed var(--wiki-border);
}
.wiki-drinks__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 12px;
}
.wiki-drinkcard {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 16px;
	background: var(--wiki-bg-alt);
	border-radius: var(--wiki-radius-sm);
}
.wiki-drinkcard__icon {
	font-size: 26px;
	line-height: 1;
	flex: 0 0 auto;
	margin-top: 2px;
}
.wiki-drinkcard__body { min-width: 0; }
.wiki-drinkcard__name {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wiki-text);
	margin: 0 0 2px;
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
.wiki-drinkcard__type {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wiki-text-soft);
	font-weight: 500;
}
.wiki-drinkcard__desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--wiki-text);
	margin: 0;
}

/* Mobiel: simpele 1-koloms stack, voorspelbaar en geen horizontale scroll.
   Cards die buiten het scherm vallen (bug uit eerdere versies) zijn hiermee
   uitgesloten. */
@media (max-width: 600px) {
	.wiki-foodcards {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
		margin: 1em 0 1.4em;
	}
	.wiki-cards-header + .wiki-foodcards { margin-top: 0.4em; }
	.wiki-foodcard {
		padding: 16px 16px 18px;
	}
	.wiki-foodcard:hover { transform: none; box-shadow: none; border-color: var(--wiki-border); }
	.wiki-drinks__list { grid-template-columns: 1fr; }
}

/* ---------- Live-data blokken (weer, reisadvies, koers) ----------
   Worden geladen uit een server-side cache (cron-refreshed). Geen API-calls
   op pageload. Visueel onderscheid met de andere fact-blocks via een subtiele
   linker accent-streep en de "Bijgewerkt"-tijdstempel. */
.wiki-live {
	background: #fff;
	border: 1px solid var(--wiki-border);
	border-radius: var(--wiki-radius);
	padding: 18px 20px;
	margin: 1.6em 0;
	box-shadow: var(--wiki-shadow-card);
	position: relative;
}
.wiki-live::before {
	content: "";
	position: absolute;
	top: 12px; bottom: 12px; left: 0;
	width: 3px;
	background: var(--wiki-accent);
	border-radius: 0 2px 2px 0;
}
.wiki-live__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.wiki-live__title {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0;
	color: var(--wiki-text);
	font-family: var(--font-body, "Inter", system-ui, sans-serif);
	letter-spacing: -0.01em;
}
.wiki-live__stamp {
	font-size: 12px;
	color: var(--wiki-text-soft);
	white-space: nowrap;
}
.wiki-live__source { margin: 12px 0 0; font-size: 12px; color: var(--wiki-text-soft); }
.wiki-live__source a { color: var(--wiki-accent); text-decoration: underline; text-underline-offset: 3px; }
.wiki-live__source a:hover { color: var(--wiki-accent-deep); }

/* Weer-blok: 2-3 koloms grid, kompacte stadkaarten */
.wiki-live-weather__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
}
.wiki-live-weather__city {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--wiki-bg-alt);
	border-radius: var(--wiki-radius-sm);
}
.wiki-live-weather__emoji {
	font-size: 26px;
	line-height: 1;
	flex: 0 0 auto;
}
.wiki-live-weather__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.wiki-live-weather__name {
	font-size: 12px;
	color: var(--wiki-text-soft);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wiki-live-weather__temp {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 22px;
	font-weight: 600;
	color: var(--wiki-text);
	line-height: 1.1;
}
.wiki-live-weather__cond {
	font-size: 12px;
	color: var(--wiki-text-soft);
	margin-top: 2px;
}

/* Reisadvies-blok: gekleurde badge naar BZ-kleurcode */
.wiki-live-advisory__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: var(--wiki-radius-pill);
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 10px;
}
.wiki-live-advisory__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}
.wiki-live-advisory__badge--groen  { background: #E8F4E8; color: #2F6B2F; }
.wiki-live-advisory__badge--geel   { background: #FBF3D6; color: #876C1A; }
.wiki-live-advisory__badge--oranje { background: #FBE0C8; color: #B8693A; }
.wiki-live-advisory__badge--rood   { background: #F7D8D4; color: #8E2E25; }
.wiki-live-advisory__summary {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wiki-text);
	margin: 0 0 10px;
}
.wiki-live-advisory__link {
	color: var(--wiki-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: 13px;
}
.wiki-live-advisory__link:hover { color: var(--wiki-accent-deep); }
.wiki-live-advisory--unknown::before { background: var(--wiki-text-soft); }

/* Wisselkoers-blok: één regel, prominent */
.wiki-live-currency__line {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 22px;
	color: var(--wiki-text);
	margin: 0;
}
.wiki-live-currency__line strong { font-weight: 600; }

@media (max-width: 600px) {
	.wiki-live { padding: 14px 16px; }
	.wiki-live__title { font-size: 1rem; }
	.wiki-live-weather__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
	.wiki-live-weather__city { padding: 8px 10px; gap: 10px; }
	.wiki-live-weather__emoji { font-size: 22px; }
	.wiki-live-weather__temp { font-size: 19px; }
	.wiki-live-currency__line { font-size: 19px; }
}

/* ---------- Generic callout (visa, vaccinations) ---------- */
.wiki-callout {
	background: #fff;
	border-left: 3px solid var(--wiki-accent);
	border-radius: 0 var(--wiki-radius-sm) var(--wiki-radius-sm) 0;
	padding: 12px 16px;
	margin: 1em 0;
	font-size: 14px;
}
.wiki-callout small { color: var(--wiki-text-soft); }
.wiki-callout small a { color: var(--wiki-accent); text-decoration: underline; text-underline-offset: 3px; }
.wiki-callout--info { border-left-color: var(--wiki-accent); }

/* ---------- Footer-meta + share ---------- */
.wiki-footer-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 24px 0 0;
	margin-top: 3em;
	border-top: 1px solid var(--wiki-border);
	font-size: 13px;
	color: var(--wiki-text-soft);
}
.wiki-footer-meta a { color: var(--wiki-accent); }
.wiki-footer-meta a:hover { color: var(--wiki-accent-deep); }
.wiki-share { display: inline-flex; align-items: center; gap: 8px; }
.wiki-share__label { font-size: 12px; color: var(--wiki-text-soft); margin-right: 4px; }
.wiki-share__btn {
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wiki-bg-alt);
	border: 1px solid var(--wiki-border);
	border-radius: 50%;
	font-size: 16px;
	cursor: pointer;
	text-decoration: none;
	transition: all 160ms var(--wiki-ease);
}
.wiki-share__btn:hover { background: var(--wiki-accent-soft); transform: translateY(-1px); }
.wiki-share__btn[data-copied="true"] { background: var(--wiki-success); color: #fff; }

/* ---------- 4. Related posts ---------- */
.wiki-related {
	background: var(--wiki-bg-alt);
	padding: 56px 0 64px;
	border-top: 1px solid var(--wiki-border);
}
.wiki-related__head { text-align: center; max-width: 600px; margin: 0 auto 32px; }
.wiki-related__head h2 {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: var(--wiki-h2-size);
	margin: 0;
	font-weight: 600;
	color: var(--wiki-text);
	letter-spacing: -0.01em;
}
.wiki-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
@media (max-width: 1023px) { .wiki-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .wiki-related__grid { grid-template-columns: 1fr; } }

.wiki-related__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--wiki-radius);
	overflow: hidden;
	box-shadow: var(--wiki-shadow-card);
	text-decoration: none;
	color: inherit;
	transition: transform 200ms var(--wiki-ease), box-shadow 200ms var(--wiki-ease);
}
.wiki-related__card:hover { transform: translateY(-3px); box-shadow: var(--wiki-shadow-deep); color: inherit; }
.wiki-related__thumb {
	aspect-ratio: 4 / 3;
	background: var(--wiki-bg-alt);
	overflow: hidden;
}
.wiki-related__thumb img { width: 100%; height: 100%; object-fit: cover; }
.wiki-related__body { padding: 16px 18px 20px; flex: 1; }
.wiki-related__cat {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wiki-accent);
	font-weight: 700;
	margin-bottom: 6px;
}
.wiki-related__title {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--wiki-text);
	line-height: 1.3;
}
.wiki-related__date { color: var(--wiki-text-soft); font-size: 12px; }
.wiki-related__more { text-align: center; margin: 32px 0 0; }
.wiki-cta-link {
	display: inline-block;
	color: var(--wiki-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	font-size: 15px;
}
.wiki-cta-link:hover { color: var(--wiki-accent-deep); }

/* ---------- 5. CTA ---------- */
.wiki-cta {
	background: linear-gradient(135deg, var(--wiki-accent-soft) 0%, #F5EDD8 100%);
	padding: 56px 0;
}
.wiki-cta__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
}
@media (max-width: 768px) { .wiki-cta__inner { grid-template-columns: 1fr; gap: 24px; } }
.wiki-cta__copy h2 {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: var(--wiki-h2-size);
	margin: 0 0 8px;
	color: var(--wiki-text);
	font-weight: 600;
}
.wiki-cta__copy p { margin: 0; color: var(--wiki-text-soft); max-width: 540px; }
.wiki-cta__btns { display: flex; gap: 10px; flex-wrap: wrap; }

.wiki-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 22px;
	border-radius: var(--wiki-radius-pill);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background 180ms var(--wiki-ease), color 180ms var(--wiki-ease), border-color 180ms var(--wiki-ease), transform 120ms var(--wiki-ease);
	font-family: inherit;
}
.wiki-article .wiki-btn--primary {
	background: var(--coral, #E76F51);
	color: #fff;
}
.wiki-article .wiki-btn--primary:hover {
	background: var(--coral-deep, #B84A2F);
	color: #fff;
	transform: translateY(-1px);
}
.wiki-article .wiki-btn--ghost {
	background: transparent;
	color: var(--wiki-text);
	border-color: var(--wiki-text);
}
.wiki-article .wiki-btn--ghost:hover {
	background: var(--wiki-text);
	color: #fff;
}

/* ---------- Repeater: Cities ---------- */
.wiki-cities { display: grid; gap: 16px; margin: 1.4em 0; }
.wiki-city {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 18px;
	background: #fff;
	border: 1px solid var(--wiki-border);
	border-radius: var(--wiki-radius);
	padding: 16px;
	overflow: hidden;
}
/* Zonder afbeelding: tekst over volledige breedte, geen lege linkerkolom. */
.wiki-city.wiki-city--no-img { grid-template-columns: 1fr; }
@media (max-width: 700px) { .wiki-city { grid-template-columns: 1fr; } }
.wiki-city__img { aspect-ratio: 4 / 3; border-radius: var(--wiki-radius-sm); overflow: hidden; background: var(--wiki-bg-alt); }
.wiki-city__img img { width: 100%; height: 100%; object-fit: cover; }
.wiki-city__name {
	font-family: var(--font-display, "Fraunces", serif);
	font-size: 20px;
	margin: 0 0 8px;
	font-weight: 600;
	color: var(--wiki-text);
}
.wiki-city__desc { font-size: 14px; color: var(--wiki-text-soft); line-height: 1.55; }
.wiki-city__desc p:last-child { margin-bottom: 0; }

/* ---------- Repeater: Airports table ---------- */
.wiki-airports {
	overflow-x: auto;
	margin: 1.4em 0;
	border-radius: var(--wiki-radius);
	background: #fff;
	border: 1px solid var(--wiki-border);
}
.wiki-airports table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.wiki-airports th,
.wiki-airports td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--wiki-border);
}
.wiki-airports thead th {
	background: var(--wiki-bg-alt);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wiki-text-soft);
	font-weight: 700;
}
.wiki-airports tbody tr:last-child td { border-bottom: 0; }
.wiki-airports tbody tr:hover { background: var(--wiki-bg-alt); }

/* ---------- Repeater: FAQ accordion ---------- */
.wiki-faq { display: grid; gap: 8px; margin: 1.4em 0; }
.wiki-faq__item {
	background: #fff;
	border: 1px solid var(--wiki-border);
	border-radius: var(--wiki-radius);
	overflow: hidden;
	transition: border-color 200ms var(--wiki-ease);
}
.wiki-faq__item[open] { border-color: var(--wiki-accent); }
.wiki-faq__item summary {
	padding: 14px 18px;
	cursor: pointer;
	font-weight: 600;
	color: var(--wiki-text);
	font-size: 16px;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	user-select: none;
}
.wiki-faq__item summary::-webkit-details-marker { display: none; }
.wiki-faq__item summary::after {
	content: "＋";
	font-size: 20px;
	color: var(--wiki-accent);
	flex: 0 0 auto;
	transition: transform 200ms var(--wiki-ease);
	line-height: 1;
}
.wiki-faq__item[open] summary::after { transform: rotate(45deg); }
.wiki-faq__answer {
	padding: 0 18px 18px;
	color: var(--wiki-text-soft);
	font-size: 15px;
	line-height: 1.6;
}
.wiki-faq__answer p:first-child { margin-top: 0; }
.wiki-faq__answer p:last-child { margin-bottom: 0; }

/* ---------- Sources list ---------- */
.wiki-sources {
	margin: 1em 0;
	padding-left: 1.2em;
	font-size: 14px;
}
.wiki-sources li { margin-bottom: 0.4em; }
.wiki-meta-line { margin: 1em 0 0; color: var(--wiki-text-soft); }

/* ---------- Error fallback ---------- */
.wiki-error { padding: 80px 0; text-align: center; }
.wiki-error h1 { font-family: var(--font-display, "Fraunces", serif); margin: 0 0 12px; }

/* ---------- Focus rings ---------- */
.wiki-article a:focus-visible,
.wiki-article button:focus-visible,
.wiki-article summary:focus-visible {
	outline: 2px solid var(--wiki-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.wiki-article *,
	.wiki-article *::before,
	.wiki-article *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Mobile (<= 768px) ---------- */
@media (max-width: 768px) {
	/* Hero compacter */
	.wiki-hero {
		min-height: 320px;
		padding: 20px 0 24px;
	}
	.wiki-hero__title {
		font-size: clamp(32px, 9vw, 44px);
		gap: 10px;
	}
	.wiki-hero__flag { font-size: 0.75em; }
	.wiki-hero__tag {
		font-size: 14px;
		margin: 4px 0 16px;
	}
	.wiki-hero__meta {
		gap: 6px;
		font-size: 12px;
	}
	.wiki-hero__meta span { padding: 5px 10px; }
	.wiki-crumbs {
		font-size: 12px;
		margin-bottom: 16px;
		flex-wrap: wrap;
	}

	/* Quickbar — al horizontaal scrollbaar; tweak padding */
	.wiki-quickbar { position: static; box-shadow: none; }
	.wiki-quickbar__inner { padding: 12px 0; }
	.wiki-quickfact { min-width: 130px; padding: 8px 14px; }

	/* Layout: minder padding, iets dichter op elkaar */
	.wiki-layout { padding: 24px 0 40px; gap: 20px; }
	.wiki-content { font-size: 16px; line-height: 1.65; }
	.wiki-prose h2, .wiki-prose .wiki-sec__title {
		font-size: clamp(22px, 6vw, 28px);
		margin: 1.8em 0 0.5em;
	}
	.wiki-prose h3 { font-size: 18px; }
	.wiki-prose p.wiki-lead { font-size: 1.1em; padding-left: 14px; }

	/* TOC blijft accordion (al gefixed) maar maak iets compacter */
	.wiki-toc__details summary { font-size: 16px; padding: 10px 12px; }
	.wiki-toc__list a { padding: 8px 12px 8px 32px; }

	/* Quick-fact ook compacter */
	.wiki-meta-card { padding: 14px 16px; }
	.wiki-meta-card__row { font-size: 13px; padding: 6px 0; }

	/* Score grid: 2 kolommen ipv 5 */
	.wiki-scores {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.wiki-score__value { font-size: 16px; }

	/* Weather: 2x2 ipv 4 kolommen */
	.wiki-weather-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.wiki-weather-card { padding: 12px; }
	.wiki-weather-card__temp { font-size: 26px; }

	/* Budget tiers en examples */
	.wiki-budget-tiers { grid-template-columns: 1fr; gap: 8px; }
	.wiki-budget-examples { grid-template-columns: repeat(2, 1fr); }

	/* Two-col blokken (safety+health) → stack */
	.wiki-twocol { grid-template-columns: 1fr; gap: 10px; }
	.wiki-block { padding: 14px 16px; }

	/* Practical: stack */
	.wiki-practical { grid-template-columns: 1fr; gap: 0; }

	/* Tips */
	.wiki-tips { grid-template-columns: 1fr; gap: 8px; }

	/* Cities en airports tabel: zorg dat tekst niet over rand gaat */
	.wiki-cities { gap: 12px; }
	.wiki-city, .wiki-city.wiki-city--no-img {
		grid-template-columns: 1fr;
		padding: 14px;
	}
	.wiki-city__img { aspect-ratio: 16 / 10; }
	.wiki-city__name { font-size: 18px; }

	.wiki-airports table { font-size: 13px; }
	.wiki-airports th, .wiki-airports td { padding: 8px 10px; }

	/* FAQ */
	.wiki-faq__item summary { font-size: 15px; padding: 12px 14px; }
	.wiki-faq__answer { padding: 0 14px 14px; font-size: 14px; }

	/* Footer-meta + share */
	.wiki-footer-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.wiki-share { width: 100%; flex-wrap: wrap; }

	/* Related posts: stacked single-column al via grid; tighten head */
	.wiki-related { padding: 36px 0 40px; }
	.wiki-related__head { margin-bottom: 22px; }
}

/* Extra small phones (<= 380px) */
@media (max-width: 380px) {
	.wiki-hero__meta span { font-size: 11px; padding: 4px 8px; }
	.wiki-scores { grid-template-columns: repeat(2, 1fr); }
	.wiki-budget-examples { grid-template-columns: 1fr 1fr; gap: 6px; }
}

/* ---------- Print ---------- */
@media print {
	.wiki-quickbar,
	.wiki-toc,
	.wiki-related,
	.wiki-cta,
	.wiki-share,
	.site-header,
	.site-footer,
	.site-search { display: none !important; }
	.wiki-article { background: #fff !important; }
	.wiki-hero {
		background: none !important;
		color: var(--wiki-text) !important;
		min-height: auto !important;
		padding: 0 0 16px !important;
		border-bottom: 1px solid var(--wiki-border);
		margin-bottom: 16px;
	}
	.wiki-hero__overlay { display: none !important; }
	.wiki-hero__title, .wiki-hero__tag { color: var(--wiki-text) !important; text-shadow: none !important; }
	.wiki-hero__meta span {
		background: none !important;
		border: 1px solid var(--wiki-border) !important;
		color: var(--wiki-text) !important;
	}
	.wiki-layout { grid-template-columns: 1fr !important; padding: 8px 0 !important; }
	.wiki-content { max-width: 100% !important; font-size: 12pt; }
	.wiki-prose h2, .wiki-prose h3 { page-break-after: avoid; }
	.wiki-prose p, .wiki-block, .wiki-route, .wiki-highlight { page-break-inside: avoid; }
	.wiki-footer-meta { border-top: 1px solid var(--wiki-border); margin-top: 16px; padding-top: 8px; }
}