/* =========================================================================
   REISTOOLS: styling voor de vier tool-templates:
   warm-in-maand, vertrek-checklist, veiligheidsindex en vluchttijden.
   De footer/sidebar-blokken staan in site.css (laden op elke pagina).
   ========================================================================= */

/* ---- Hero ---- */
.tool-hero {
	padding: var(--s-10) 0 var(--s-8);
	background: linear-gradient(180deg, var(--bone) 0%, var(--cream) 100%);
}
.tool-hero .lead { max-width: 62ch; color: var(--graphite); }
.tool-hero h1 em { font-style: italic; color: var(--coral); }

/* ---- Maand-chips ---- */
.tool-months {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--s-5);
}
.tool-months__chip {
	padding: 7px 14px;
	border: 1px solid var(--clay);
	border-radius: var(--r-pill);
	background: #fff;
	font-size: var(--fs-sm);
	color: var(--graphite);
}
.tool-months__chip:hover { border-color: var(--coral); color: var(--coral-deep); }
.tool-months__chip.is-active {
	background: var(--coral);
	border-color: var(--coral);
	color: #fff;
	font-weight: 600;
}

/* ---- Body ---- */
.tool-body { padding: var(--s-10) 0 var(--s-16); }
.tool-group-title { font-size: var(--fs-xl); margin: var(--s-8) 0 var(--s-5); }
.tool-group-title:first-child { margin-top: 0; }
.tool-empty { color: var(--graphite); }
.tool-footnote { margin-top: var(--s-6); color: var(--mist); }

/* ---- Warm-cards ---- */
.tool-warm-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-4);
	margin-bottom: var(--s-6);
}
@media (max-width: 960px) { .tool-warm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tool-warm-grid { grid-template-columns: 1fr; } }

.tool-warm-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--s-5);
	background: #fff;
	border: 1px solid var(--sand);
	border-radius: var(--r-md);
	border-top: 4px solid var(--sun);
}
.tool-warm-card--r5 { border-top-color: #4C9A4C; }
.tool-warm-card--r4 { border-top-color: #7FB069; }
.tool-warm-card--r3 { border-top-color: var(--sun); }
.tool-warm-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.tool-warm-card__name { margin: 0; font-size: var(--fs-md); }
.tool-warm-card__temp {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	color: var(--coral-deep);
	white-space: nowrap;
}
.tool-warm-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--graphite);
}
.tool-warm-card__note { margin: 0; font-size: var(--fs-sm); color: var(--graphite); line-height: 1.5; }
.tool-warm-card__link { margin-top: auto; font-weight: 600; color: var(--coral-deep); font-size: var(--fs-sm); }

.tool-maybe { margin-top: var(--s-6); }
.tool-maybe summary {
	cursor: pointer;
	font-weight: 600;
	padding: var(--s-3) 0;
	color: var(--graphite);
}
.tool-maybe[open] summary { margin-bottom: var(--s-4); }

/* ---- Land-picker + landgrid (checklist) ---- */
.tool-landpicker { margin-top: var(--s-5); max-width: 420px; }
.tool-landpicker label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: 600;
	margin-bottom: 6px;
}
.tool-landpicker select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--clay);
	border-radius: var(--r-sm);
	background: #fff;
	font: inherit;
	color: var(--ink);
}
.tool-landgrid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tool-landgrid__chip {
	padding: 8px 14px;
	border: 1px solid var(--sand);
	border-radius: var(--r-pill);
	background: #fff;
	font-size: var(--fs-sm);
}
.tool-landgrid__chip:hover { border-color: var(--coral); color: var(--coral-deep); }

/* ---- Checklist ---- */
.tool-check__topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	flex-wrap: wrap;
	margin-bottom: var(--s-5);
}
.tool-check__progress { margin: 0; font-weight: 600; color: var(--ocean-deep); }
.tool-check__advisory {
	padding: 14px 18px;
	border-radius: var(--r-md);
	background: var(--bone);
	border-left: 5px solid var(--mist-soft);
	margin-bottom: var(--s-6);
	font-size: var(--fs-sm);
	line-height: 1.55;
}
.tool-check__advisory--groen  { border-left-color: #4C9A4C; }
.tool-check__advisory--geel   { border-left-color: var(--sun); }
.tool-check__advisory--oranje { border-left-color: #E08A3C; }
.tool-check__advisory--rood   { border-left-color: var(--coral); }
.tool-check__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-8);
}
@media (max-width: 860px) { .tool-check__grid { grid-template-columns: 1fr; } }
.tool-check__col h2 { font-size: var(--fs-lg); margin: var(--s-6) 0 var(--s-3); }
.tool-check__col h2:first-child { margin-top: 0; }
.tool-check__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tool-check__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--sand);
	border-radius: var(--r-sm);
}
.tool-check__item input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--ocean);
	flex: 0 0 auto;
}
.tool-check__item label { cursor: pointer; font-size: var(--fs-sm); line-height: 1.5; }
.tool-check__item input:checked + label { opacity: 0.55; }
.tool-check__item input:checked + label strong { text-decoration: line-through; }
.tool-check__detail { display: block; color: var(--graphite); margin-top: 2px; }
.tool-check__wiki-cta { margin-top: var(--s-6); }

/* ---- Tabel (veiligheidsindex) ---- */
.tool-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tool-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border-radius: var(--r-md);
	overflow: hidden;
	font-size: var(--fs-sm);
	min-width: 760px;
}
.tool-table thead th {
	background: var(--bone);
	text-align: left;
	padding: 12px 14px;
	white-space: nowrap;
}
.tool-table thead th button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
}
.tool-table thead th[aria-sort] button::after { content: " ↓"; color: var(--coral-deep); }
.tool-table thead th[aria-sort="ascending"] button::after { content: " ↑"; }
.tool-table tbody th,
.tool-table tbody td {
	padding: 10px 14px;
	border-top: 1px solid var(--sand);
	text-align: left;
}
.tool-table tbody tr:hover { background: var(--cream); }
.tool-score {
	display: inline-block;
	min-width: 40px;
	text-align: center;
	padding: 3px 8px;
	border-radius: var(--r-pill);
	font-weight: 700;
	font-size: 13px;
}
.tool-score--good { background: #E3F1E3; color: #2F6B2F; }
.tool-score--okay { background: var(--sun-soft); color: var(--sun-deep); }
.tool-score--low  { background: var(--coral-soft); color: var(--coral-deep); }
.tool-score--na   { background: var(--bone); color: var(--mist); }
.tool-adv {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--r-pill);
	font-weight: 600;
	font-size: 12px;
}
.tool-adv--groen  { background: #E3F1E3; color: #2F6B2F; }
.tool-adv--geel   { background: var(--sun-soft); color: var(--sun-deep); }
.tool-adv--oranje { background: #FBE3CC; color: #9A5518; }
.tool-adv--rood   { background: var(--coral-soft); color: var(--coral-deep); }
.tool-adv-link { font-size: 12px; color: var(--coral-deep); }

/* ---- Filterchips + vluchtenlijst ---- */
.tool-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--s-5);
}
.tool-filters__chip {
	padding: 7px 14px;
	border: 1px solid var(--clay);
	border-radius: var(--r-pill);
	background: #fff;
	font-size: var(--fs-sm);
	color: var(--graphite);
	cursor: pointer;
}
.tool-filters__chip:hover { border-color: var(--coral); color: var(--coral-deep); }
.tool-filters__chip.is-active {
	background: var(--ocean);
	border-color: var(--ocean);
	color: #fff;
	font-weight: 600;
}
.tool-flights {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	counter-reset: none;
}
.tool-flight {
	padding: 14px 18px;
	background: #fff;
	border: 1px solid var(--sand);
	border-radius: var(--r-md);
}
.tool-flight__main {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}
.tool-flight__name { font-weight: 600; }
.tool-flight__hours { font-family: var(--font-display); font-size: var(--fs-md); color: var(--coral-deep); white-space: nowrap; }
.tool-flight__bar-wrap {
	height: 6px;
	border-radius: 3px;
	background: var(--bone);
	margin: 8px 0;
	overflow: hidden;
}
.tool-flight__bar {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--ocean) 0%, var(--coral) 100%);
}
.tool-flight__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--graphite);
}

/* ---- Content onder de tool ---- */
.tool-page-content { padding: 0 0 var(--s-16); }
.tool-page-content__inner { max-width: var(--w-prose); }

/* ---- Print: checklist als nette afvinklijst ---- */
@media print {
	.tool-hero, .tool-landpicker, .tool-check__topbar button, .tool-check__wiki-cta, .tool-months, .tool-filters { display: none !important; }
	.tool-check__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
	.tool-check__item { border: 1px solid #999; break-inside: avoid; }
	.tool-body { padding: 0; }
}

/* ---- Valuta-omrekenaar ---- */
.valuta-conv {
	padding: var(--s-6);
	background: #fff;
	border: 1px solid var(--sand);
	border-radius: var(--r-md);
	margin-bottom: var(--s-8);
}
.valuta-conv__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}
.valuta-conv__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: var(--graphite);
	flex: 1 1 180px;
}
.valuta-conv__field input,
.valuta-conv__field select {
	padding: 12px 14px;
	border: 1px solid var(--clay);
	border-radius: var(--r-sm);
	background: var(--cream);
	font: inherit;
	font-size: var(--fs-md);
	color: var(--ink);
	width: 100%;
}
.valuta-conv__swap {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--clay);
	border-radius: 50%;
	background: var(--bone);
	font-size: 20px;
	color: var(--coral-deep);
}
.valuta-conv__swap:hover { background: var(--coral-soft); border-color: var(--coral); }
.valuta-conv__result {
	margin-top: var(--s-5);
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.valuta-conv__result strong {
	font-family: var(--font-display);
	font-size: clamp(30px, 4vw, 44px);
	color: var(--ink);
	line-height: 1;
}
.valuta-conv__result-code { color: var(--graphite); font-size: var(--fs-md); }
.valuta-conv__meta { margin: var(--s-3) 0 0; font-size: 13px; color: var(--graphite); }

/* ---- Omrekentabellen ---- */
.valuta-tables {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-6);
	margin-bottom: var(--s-8);
}
@media (max-width: 760px) { .valuta-tables { grid-template-columns: 1fr; } }
.valuta-table h2 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.valuta-table table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border-radius: var(--r-md);
	overflow: hidden;
	font-size: var(--fs-sm);
}
.valuta-table th {
	background: var(--bone);
	text-align: left;
	padding: 10px 14px;
}
.valuta-table td {
	padding: 8px 14px;
	border-top: 1px solid var(--sand);
	font-variant-numeric: tabular-nums;
}
.valuta-table tr:hover td { background: var(--cream); }

/* ---- Hub-grid en landen ---- */
.valuta-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: var(--s-8);
}
@media (max-width: 960px) { .valuta-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .valuta-grid { grid-template-columns: 1fr; } }
.valuta-grid__card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--sand);
	border-radius: var(--r-sm);
}
.valuta-grid__card:hover { border-color: var(--coral); }
.valuta-grid__name { font-weight: 600; font-size: var(--fs-sm); }
.valuta-grid__rate { font-size: 12px; color: var(--graphite); font-variant-numeric: tabular-nums; }

.valuta-countries {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-4);
	margin-bottom: var(--s-8);
}
@media (max-width: 960px) { .valuta-countries { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .valuta-countries { grid-template-columns: 1fr; } }
.valuta-country {
	padding: var(--s-5);
	background: #fff;
	border: 1px solid var(--sand);
	border-radius: var(--r-md);
}
.valuta-country h3 { font-size: var(--fs-md); margin-bottom: var(--s-3); }
.valuta-country ul {
	list-style: none;
	margin: 0 0 var(--s-3);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: var(--graphite);
}

/* ---- FAQ + related ---- */
.valuta-faq { max-width: 720px; margin-bottom: var(--s-8); }
.valuta-faq details {
	background: #fff;
	border: 1px solid var(--sand);
	border-radius: var(--r-sm);
	padding: 12px 16px;
	margin-bottom: 8px;
}
.valuta-faq summary { cursor: pointer; font-weight: 600; }
.valuta-faq details p { margin: 10px 0 2px; color: var(--graphite); font-size: var(--fs-sm); line-height: 1.6; }
.valuta-related {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--s-8);
}

/* ---- Koershistorie ---- */
.valuta-hist { margin-bottom: var(--s-8); }
.valuta-hist__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--s-3);
}
.valuta-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 14px;
	border-radius: var(--r-pill);
	background: var(--bone);
	font-size: 13px;
}
.valuta-badge__label { color: var(--graphite); }
.valuta-badge--up strong   { color: #2F6B2F; }
.valuta-badge--down strong { color: var(--coral-deep); }
.valuta-badge--flat strong { color: var(--graphite); }
.valuta-hist__trend { margin: 0 0 var(--s-4); color: var(--graphite); font-size: var(--fs-md); }
.valuta-chart { margin: 0 0 var(--s-4); }
.valuta-chart svg {
	width: 100%;
	height: auto;
	background: #fff;
	border: 1px solid var(--sand);
	border-radius: var(--r-md);
}
.valuta-chart__caption {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 6px;
	font-size: 12px;
	color: var(--graphite);
}
.valuta-hist__table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	background: #fff;
	border-radius: var(--r-md);
	overflow: hidden;
	font-size: var(--fs-sm);
}
.valuta-hist__table th,
.valuta-hist__table td { padding: 9px 14px; border-top: 1px solid var(--sand); text-align: left; }
.valuta-hist__table thead th { background: var(--bone); border-top: 0; }
.valuta-hist__table td.is-up   { color: #2F6B2F; font-weight: 600; }
.valuta-hist__table td.is-down { color: var(--coral-deep); font-weight: 600; }

/* ---- Prijzen in het land ---- */
.valuta-prices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-4);
}
@media (max-width: 960px) { .valuta-prices { grid-template-columns: 1fr; } }
.valuta-prices__card {
	background: #fff;
	border: 1px solid var(--sand);
	border-radius: var(--r-md);
	padding: var(--s-4) var(--s-5);
}
.valuta-prices__card h3 { font-size: var(--fs-md); margin-bottom: var(--s-3); }
.valuta-prices__card table { width: 100%; border-collapse: collapse; font-size: 13px; }
.valuta-prices__card th { text-align: left; font-weight: 400; color: var(--graphite); padding: 5px 0; }
.valuta-prices__card td { text-align: right; padding: 5px 0 5px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.valuta-regio { max-width: 62ch; color: var(--graphite); margin-bottom: var(--s-8); }
.valuta-printbtn { margin: calc(-1 * var(--s-4)) 0 var(--s-8); }

/* ---- Spiekbriefje: print alleen de omrekentabellen ---- */
.print-only { display: none; }
@media print {
	.tool-hero, .valuta-conv, .valuta-hist, .valuta-printbtn, .valuta-countries,
	.valuta-prices, .valuta-faq, .valuta-related, .valuta-regio, .tool-group-title,
	.tool-footnote, .tool-page-content { display: none !important; }
	.print-only { display: block !important; }
	.valuta-print-head {
		display: flex !important;
		flex-direction: column;
		gap: 4px;
		margin-bottom: 14px;
		font-size: 14px;
	}
	.valuta-tables { grid-template-columns: 1fr 1fr; gap: 14px; }
	.valuta-table table { border: 1px solid #999; }
	.valuta-table h2 { font-size: 15px; }
	.tool-body { padding: 0; }
}

/* ---- Valuta v3: presets, kopieerknop, duiding, ezelsbrug ---- */
.valuta-conv.is-js .valuta-conv__submit { display: none; }
.valuta-conv__submit { align-self: flex-end; }
.valuta-conv__presets {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.valuta-conv__preset {
	padding: 4px 12px;
	border: 1px solid var(--clay);
	border-radius: var(--r-pill);
	background: var(--cream);
	font-size: 13px;
	color: var(--graphite);
	cursor: pointer;
}
.valuta-conv__preset:hover { border-color: var(--coral); color: var(--coral-deep); }
.valuta-conv__copy {
	margin-left: 6px;
	padding: 6px 12px;
	border: 1px solid var(--clay);
	border-radius: var(--r-pill);
	background: #fff;
	font-size: 13px;
	color: var(--graphite);
	cursor: pointer;
	align-self: center;
}
.valuta-conv__copy:hover { border-color: var(--coral); color: var(--coral-deep); }
.valuta-conv.has-invalid-amount [data-valuta-amount] {
	border-color: var(--coral);
	background: var(--coral-soft);
}
.valuta-hist__duiding {
	margin: 0 0 var(--s-4);
	padding: 10px 14px;
	border-radius: var(--r-sm);
	background: var(--bone);
	font-size: var(--fs-sm);
	color: var(--graphite);
}
.valuta-hist__duiding--goed  { background: #E3F1E3; color: #2F6B2F; }
.valuta-hist__duiding--matig { background: var(--coral-soft); color: var(--coral-deep); }
.valuta-brug {
	margin: 0 0 var(--s-4);
	padding: 10px 14px;
	border-left: 4px solid var(--sun);
	background: var(--sun-soft);
	border-radius: var(--r-xs);
	font-size: var(--fs-sm);
	color: var(--sun-deep);
}
.valuta-disclaimer { margin: calc(-1 * var(--s-4)) 0 var(--s-8); color: var(--mist); }
.valuta-country__check { display: block; margin-top: 6px; }
@media print {
	.valuta-conv__presets, .valuta-conv__copy, .valuta-brug, .valuta-disclaimer { display: none !important; }
}

/* ---- Zo betaal je slim ---- */
.valuta-slim {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-4);
	margin-bottom: var(--s-8);
}
@media (max-width: 760px) { .valuta-slim { grid-template-columns: 1fr; } }
.valuta-slim__card {
	padding: var(--s-5);
	background: #fff;
	border: 1px solid var(--sand);
	border-radius: var(--r-md);
	border-top: 4px solid var(--ocean);
}
.valuta-slim__card h3 { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.valuta-slim__card p { margin: 0; font-size: var(--fs-sm); color: var(--graphite); line-height: 1.6; }

/* ---- Zoekbare valutakiezer ---- */
.valuta-conv select.is-combo-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}
.valuta-combo {
	padding: 12px 14px;
	border: 1px solid var(--clay);
	border-radius: var(--r-sm);
	background: var(--cream);
	font: inherit;
	font-size: var(--fs-md);
	color: var(--ink);
	width: 100%;
}