/*
Theme Name: Tollatlas Atlas
Description: Licht thema voor tollatlas.com. Skelet (v0.1): structuur en leesbaarheid, de ontwerprichting volgt nog.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: ta-atlas
*/

:root {
	--ta-papier: #f6f4ee;
	--ta-vlak: #ffffff;
	--ta-inkt: #1b2430;
	--ta-grijs: #5b6470;
	--ta-lijn: #d9d4c7;
	--ta-accent: #0b4f8a;
	--ta-vignet: #2e7d4f;
	--ta-traject: #b3541e;
	--ta-km: #7a3e9d;
	--ta-geen: #6b7280;
	--ta-breed: 72rem;
	--ta-smal: 46rem;
	--ta-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--ta-papier);
	color: var(--ta-inkt);
	font-family: var(--ta-font);
	font-size: 1.0625rem;
	line-height: 1.6;
}
a { color: var(--ta-accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ta-accent); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.2; margin: 2rem 0 0.75rem; }
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-top: 0; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

.ta-wrap { max-width: var(--ta-breed); margin: 0 auto; padding: 0 1rem; }
.ta-skip { position: absolute; left: -999rem; }
.ta-skip:focus { left: 1rem; top: 1rem; background: var(--ta-vlak); padding: 0.5rem 0.75rem; z-index: 10; }

/* Kop */
.ta-header { background: var(--ta-vlak); border-bottom: 1px solid var(--ta-lijn); }
.ta-header__in { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.ta-logo { font-weight: 700; font-size: 1.25rem; color: var(--ta-inkt); text-decoration: none; letter-spacing: 0.01em; }
.ta-nav { flex: 1 1 auto; }
.ta-nav__lijst, .ta-talen__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }
.ta-nav__lijst a { color: var(--ta-inkt); text-decoration: none; padding: 0.25rem 0; border-bottom: 2px solid transparent; }
.ta-nav__lijst a:hover, .ta-nav__lijst a[aria-current="page"] { border-bottom-color: var(--ta-accent); }
.ta-talen__lijst { font-size: 0.9rem; gap: 0.25rem 0.8rem; }
.ta-talen__lijst [aria-current] { font-weight: 700; }

/* Inhoud */
.ta-main { padding-top: 2rem; padding-bottom: 3rem; }
.ta-inhoud > * { max-width: var(--ta-smal); }
.ta-inhoud > .ta-tabel, .ta-inhoud > .ta-kies, .ta-inhoud > .alignwide { max-width: none; }

/* Voertuigkiezer: gewone rechthoekige knoppen, geen pillen */
.ta-kies { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1.5rem 0; }
.ta-kies__titel { font-weight: 700; margin-right: 0.5rem; }
.ta-kies__knop {
	font: inherit; cursor: pointer; padding: 0.45rem 0.8rem;
	background: var(--ta-vlak); color: var(--ta-inkt);
	border: 1px solid var(--ta-inkt); border-radius: 2px;
}
.ta-kies__knop[aria-pressed="true"] { background: var(--ta-inkt); color: var(--ta-vlak); }

/* Voertuigregels: zonder JavaScript alles zichtbaar, met JavaScript alleen de gekozen regel */
.ta-v { margin: 0 0 0.35rem; }
.ta-v__label { color: var(--ta-grijs); font-size: 0.9rem; }
html[data-ta-v] .ta-v { display: none; }
html[data-ta-v="auto"] .ta-v[data-ta-v="auto"],
html[data-ta-v="caravan"] .ta-v[data-ta-v="caravan"],
html[data-ta-v="camper_licht"] .ta-v[data-ta-v="camper_licht"],
html[data-ta-v="camper_zwaar"] .ta-v[data-ta-v="camper_zwaar"] { display: block; }
html[data-ta-v] .ta-v__label { display: none; }

/* Systeemtype: kleur plus tekst, nooit alleen kleur */
.ta-regime { display: inline-block; padding-left: 0.6rem; border-left: 0.5rem solid var(--ta-geen); margin-right: 0.35rem; }
.ta-regime--vignet { border-left-color: var(--ta-vignet); }
.ta-regime--traject { border-left-color: var(--ta-traject); }
.ta-regime--km_heffing { border-left-color: var(--ta-km); }
.ta-regime--gemengd { border-left-color: var(--ta-accent); }
.ta-v__noot { display: block; font-size: 0.95rem; }

/* Tabel: op smal scherm een kaart per rij */
.ta-tabel { margin: 1.5rem 0; background: var(--ta-vlak); border: 1px solid var(--ta-lijn); }
.ta-tabel table { width: 100%; border-collapse: collapse; }
.ta-tabel th, .ta-tabel td { text-align: left; vertical-align: top; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--ta-lijn); }
.ta-tabel thead th { font-size: 0.9rem; color: var(--ta-grijs); font-weight: 600; }
.ta-tabel tbody tr:last-child th, .ta-tabel tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 44rem) {
	.ta-tabel thead { position: absolute; left: -999rem; }
	.ta-tabel tr, .ta-tabel th, .ta-tabel td { display: block; }
	.ta-tabel tbody th { padding-bottom: 0.2rem; font-size: 1.1rem; border-bottom: 0; }
	.ta-tabel td { padding-top: 0.2rem; border-bottom: 0; }
	.ta-tabel tr { border-bottom: 1px solid var(--ta-lijn); padding: 0.4rem 0; }
	.ta-tabel tbody tr:last-child { border-bottom: 0; }
}

/* Feitenblok */
.ta-feiten { margin: 1.5rem 0; background: var(--ta-vlak); border: 1px solid var(--ta-lijn); padding: 0.25rem 1rem 0.75rem; }
.ta-feiten dl { margin: 0; }
.ta-feiten__rij { display: grid; grid-template-columns: 11rem 1fr; gap: 0.25rem 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--ta-lijn); }
.ta-feiten dt { font-weight: 700; }
.ta-feiten dd { margin: 0; }
@media (max-width: 36rem) { .ta-feiten__rij { grid-template-columns: 1fr; } }
.ta-bron { font-size: 0.9rem; color: var(--ta-grijs); margin: 0.75rem 0 0; }
.ta-fout { color: #a11; }

/* Voet */
.ta-footer { border-top: 1px solid var(--ta-lijn); background: var(--ta-vlak); font-size: 0.9rem; color: var(--ta-grijs); }
.ta-footer__in { padding-top: 1.25rem; padding-bottom: 1.5rem; }

@media print {
	.ta-header, .ta-footer, .ta-kies { display: none; }
	body { background: #fff; }
}