/*
Theme Name: Tollatlas Atlas
Description: Thema voor tollatlas.com in de richting Wegenkaart: kaartpapier met ruitnet, vaste legendakleuren per tolsysteem, wegschildjes en smalle kapitalen.
Version: 0.2.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: ta-atlas
*/

:root {
	/* Papier en inkt */
	--ta-papier: #eef1e8;
	--ta-vlak: #fbfcf7;
	--ta-inkt: #18242c;
	--ta-grijs: #55636a;
	--ta-lijn: #b9c2b4;
	--ta-ruit: #dfe5d8;
	/* Wegenblauw: links, schildjes, het antwoordbord */
	--ta-blauw: #1f5fae;
	--ta-blauw-tekst: #ffffff;
	--ta-geel: #f3d34a;
	/* Legenda: één kleur per tolsysteem, overal dezelfde */
	--ta-r-vignet: #9ccaa2;
	--ta-r-traject: #ecbb8c;
	--ta-r-km_heffing: #c5aadb;
	--ta-r-gemengd: #9fbbe0;
	--ta-r-geen: #e7e4d2;
	--ta-r-onbekend: #cfd0c6;
	--ta-zee: #d5e4ea;
	--ta-breed: 72rem;
	--ta-smal: 46rem;
	--ta-kop: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
	--ta-tekst: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background-color: var(--ta-papier);
	/* Ruitnet van het kaartblad */
	background-image: linear-gradient(var(--ta-ruit) 1px, transparent 1px), linear-gradient(90deg, var(--ta-ruit) 1px, transparent 1px);
	background-size: 6rem 6rem;
	color: var(--ta-inkt);
	font-family: var(--ta-tekst);
	font-size: 1.0625rem;
	line-height: 1.6;
}
a { color: var(--ta-blauw); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ta-blauw); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--ta-kop); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; margin: 2rem 0 0.75rem; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3rem); margin-top: 0; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }

.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.8rem; padding-bottom: 0.8rem; }
.ta-logo { font-family: var(--ta-kop); font-weight: 700; font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ta-inkt); text-decoration: none; line-height: 1; }
.ta-logo span { color: var(--ta-blauw); }
.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.2rem; }
.ta-nav__lijst { font-family: var(--ta-kop); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ta-nav__lijst a { color: var(--ta-inkt); text-decoration: none; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.ta-nav__lijst a:hover, .ta-nav__lijst a[aria-current="page"] { border-bottom-color: var(--ta-blauw); }
.ta-talen__lijst { font-size: 0.9rem; gap: 0.25rem 0.8rem; }
.ta-talen__lijst [aria-current] { font-weight: 600; }

/* 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 > .ta-kaart, .ta-inhoud > .alignwide { max-width: none; }
.ta-inhoud > p:first-of-type { font-size: 1.15rem; }

/* Voertuigkiezer: rechthoekige knoppen */
.ta-kies { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1.5rem 0; }
.ta-kies__titel { font-family: var(--ta-kop); font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; 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); }

/* Telefoon eerst: de voertuigkiezer blijft bovenin beeld, tikvlakken zijn minstens 44 px hoog */
.ta-kies { position: sticky; top: 0; z-index: 5; background: var(--ta-papier); padding: 0.5rem 0; border-bottom: 1px solid var(--ta-lijn); }
.ta-kies__knop { min-height: 2.75rem; }
.ta-land[data-land] { cursor: pointer; }
.ta-rij--aan > th, .ta-rij--aan > td { background: var(--ta-geel); }
@media (max-width: 44rem) {
	.ta-kies { flex-wrap: nowrap; overflow-x: auto; margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; scrollbar-width: none; }
	.ta-kies__titel { display: none; }
	.ta-kies__knop { flex: none; }
	.ta-nav__lijst a, .ta-talen__lijst a, .ta-talen__lijst span { display: inline-block; padding: 0.6rem 0; }
	.ta-kaart__vlak { margin-left: -1rem; margin-right: -1rem; border-left: 0; border-right: 0; }
	.ta-rij--aan { background: var(--ta-geel); }
	h1 { font-size: 2rem; }
}

/* 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: legendavakje plus tekst, nooit alleen kleur */
.ta-regime { display: inline-flex; align-items: center; gap: 0.45rem; margin-right: 0.35rem; }
.ta-regime::before, .ta-vak { content: ""; display: inline-block; width: 1rem; height: 1rem; flex: none; border: 1px solid var(--ta-inkt); background: var(--ta-r-onbekend); }
.ta-regime--vignet::before, .ta-vak--vignet { background: var(--ta-r-vignet); }
.ta-regime--traject::before, .ta-vak--traject { background: var(--ta-r-traject); }
.ta-regime--km_heffing::before, .ta-vak--km_heffing { background: var(--ta-r-km_heffing); }
.ta-regime--gemengd::before, .ta-vak--gemengd { background: var(--ta-r-gemengd); }
.ta-regime--geen::before, .ta-vak--geen { background: var(--ta-r-geen); }
.ta-v__noot { display: block; font-size: 0.95rem; }

/* Kaart: SVG uit eigen grensbestand. De kleur volgt de voertuigkiezer. */
.ta-kaart { margin: 1.5rem 0; }
.ta-kaart__vlak { background: var(--ta-zee); border: 1px solid var(--ta-inkt); max-width: 44rem; }
.ta-kaart svg { display: block; width: 100%; height: auto; }
.ta-land { fill: var(--ta-r-onbekend); stroke: var(--ta-vlak); stroke-width: 0.8; stroke-linejoin: round; }
.ta-land--focus { stroke: var(--ta-inkt); stroke-width: 2.5; }
.ta-kaart a:hover .ta-land, .ta-kaart a:focus .ta-land { stroke: var(--ta-inkt); stroke-width: 1.6; }
.ta-land[data-auto="vignet"], html[data-ta-v="caravan"] .ta-land[data-caravan="vignet"], html[data-ta-v="camper_licht"] .ta-land[data-camper_licht="vignet"], html[data-ta-v="camper_zwaar"] .ta-land[data-camper_zwaar="vignet"] { fill: var(--ta-r-vignet); }
.ta-land[data-auto="traject"], html[data-ta-v="caravan"] .ta-land[data-caravan="traject"], html[data-ta-v="camper_licht"] .ta-land[data-camper_licht="traject"], html[data-ta-v="camper_zwaar"] .ta-land[data-camper_zwaar="traject"] { fill: var(--ta-r-traject); }
.ta-land[data-auto="km_heffing"], html[data-ta-v="caravan"] .ta-land[data-caravan="km_heffing"], html[data-ta-v="camper_licht"] .ta-land[data-camper_licht="km_heffing"], html[data-ta-v="camper_zwaar"] .ta-land[data-camper_zwaar="km_heffing"] { fill: var(--ta-r-km_heffing); }
.ta-land[data-auto="gemengd"], html[data-ta-v="caravan"] .ta-land[data-caravan="gemengd"], html[data-ta-v="camper_licht"] .ta-land[data-camper_licht="gemengd"], html[data-ta-v="camper_zwaar"] .ta-land[data-camper_zwaar="gemengd"] { fill: var(--ta-r-gemengd); }
.ta-land[data-auto="geen"], html[data-ta-v="caravan"] .ta-land[data-caravan="geen"], html[data-ta-v="camper_licht"] .ta-land[data-camper_licht="geen"], html[data-ta-v="camper_zwaar"] .ta-land[data-camper_zwaar="geen"] { fill: var(--ta-r-geen); }
.ta-land[data-auto="onbekend"], html[data-ta-v="caravan"] .ta-land[data-caravan="onbekend"], html[data-ta-v="camper_licht"] .ta-land[data-camper_licht="onbekend"], html[data-ta-v="camper_zwaar"] .ta-land[data-camper_zwaar="onbekend"] { fill: var(--ta-r-onbekend); }
.ta-legenda { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.95rem; }
.ta-legenda li { display: flex; align-items: center; gap: 0.45rem; }
.ta-kaart__noot { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--ta-grijs); }

/* 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-family: var(--ta-kop); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ta-grijs); font-weight: 600; }
.ta-tabel tbody th { 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; }
}

/* Antwoordbord: het blauwe bord boven de weg, met witte binnenrand */
.ta-bord { margin: 1.5rem 0; background: var(--ta-blauw); color: var(--ta-blauw-tekst); border-radius: 8px; padding: 1.2rem 1.4rem; box-shadow: inset 0 0 0 4px var(--ta-blauw), inset 0 0 0 6px var(--ta-blauw-tekst); }
.ta-bord__vraag { margin: 0 0 0.2rem; opacity: 0.9; font-size: 0.95rem; }
.ta-bord__antwoord { margin: 0; font-size: 1.2rem; line-height: 1.4; }
.ta-bord__antwoord strong { font-family: var(--ta-kop); font-size: 2rem; text-transform: uppercase; margin-right: 0.4rem; }
.ta-bord a { color: inherit; }
.ta-let-op { margin: 1rem 0; background: var(--ta-geel); color: var(--ta-inkt); padding: 0.6rem 0.9rem; }

/* Wegschildje */
.ta-schild { display: inline-block; font-family: var(--ta-kop); font-weight: 700; font-size: 0.95rem; padding: 0.05rem 0.45rem; min-width: 2.6em; text-align: center; background: var(--ta-blauw); color: var(--ta-blauw-tekst); border-radius: 3px; }

/* 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-family: var(--ta-kop); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.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; }
}