/* kitsune-travel-tools/stadsroute — frontend styling.
   Kaartkleuren = "Kitsune Warm" (op verzoek eigenaar, 2026-09-09): zelfde
   crème/zand-basis als de rest van de site, zodat de kaart als onderdeel van
   de pagina voelt i.p.v. een los donker widget. De route (lijn + pins)
   krijgt een eigen accentkleur (vermiljoen), duidelijk te onderscheiden van
   de neutrale straten — de daadwerkelijke kaartlaag-kleuren staan in
   frontend.js (MAP_STYLE_TWEAKS), hier alleen de UI-elementen eromheen.
   Tijdlijn rechts blijft de bestaande huisstijl (color_land/color_accent/
   color_active uit japan-kaart.php). */

.ktt-route {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border: 1px solid #e2ddd4;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 3px rgba(13, 70, 99, .08);
	margin: 2rem 0;
}
.ktt-route--empty { display:block; padding: 1rem 1.2rem; border-radius: 10px; background:#f6f3ee; }

.ktt-route__map-col { position: relative; min-height: 340px; background: #f0e4cf; }
.ktt-route__map { position: absolute !important; inset: 0 !important; width: 100%; height: 100%; }
.ktt-route__map .maplibregl-ctrl-attrib { font-size: 9px; }

/* KRITIEK: dit moet absolute zijn, niet relative. MapLibre's Marker
   positioneert een eigen custom-element uitsluitend via een CSS-transform
   (translate), en verwacht dat het element zelf uit de normale document-
   flow is gehaald. Met position:relative bleven de pin-wraps gewoon
   meetellen in de flow van MapLibre's interne .maplibregl-canvas-container
   (ze stapelden verticaal op, één na de ander) — die container kreeg
   daardoor een hoogte van maar een paar tientallen pixels (som van de
   pin-hoogtes) in plaats van de volledige kaarthoogte, en de transform-
   offset werd vervolgens berekend vanaf die verkeerde, opgestapelde
   flow-positie in plaats van vanaf (0,0). Gevolg: pins leken willekeurig
   verschoven t.o.v. de routelijn/landmark-labels (die wél via de canvas
   zelf renderen en dus altijd correct stonden). Gevonden en bevestigd via
   live DOM-inspectie in een echte Chrome-sessie (niet de sandboxed
   testtool) — zie takenlijst.md vervolg 32 voor het volledige traject. */
.ktt-route-pin-wrap { position: absolute; top: 0; left: 0; }
.ktt-route-pin {
	width: 26px; height: 26px; border-radius: 50% 50% 50% 0;
	background: #c1502e; border: 2px solid #fff;
	transform: rotate(-45deg);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 6px rgba(90,50,20,.35);
	cursor: pointer;
}
.ktt-route-pin span { transform: rotate(45deg); font-weight: 800; font-size: .65rem; color: #fff; }
.ktt-route-pin--start { background: #fff; border-color: #c1502e; }
.ktt-route-pin--start span { color: #c1502e; }
.ktt-route-pin-label {
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	margin-top: .3rem; color: #0d4663;
	font-size: .72rem; font-weight: 800;
	white-space: nowrap; pointer-events: none;
	text-shadow: 0 0 5px #f0e4cf, 0 0 5px #f0e4cf, 0 1px 2px #f0e4cf;
}

.ktt-route__side { padding: 1.8rem 2rem; }
.ktt-route__head { margin-bottom: 1.2rem; }
.ktt-route__title { font-weight: 700; font-size: 1.25rem; margin: 0 0 .3rem; color: #0d4663; }
.ktt-route__meta { font-size: .8rem; color: #7c93a2; }

.ktt-route__stop { display: grid; grid-template-columns: 80px 1px 1fr; gap: 0 1rem; }
.ktt-route__stop-time {
	font-weight: 700; font-size: .82rem; color: #be988b; padding-top: .1rem;
	font-variant-numeric: tabular-nums;
	/* De meeste stops hebben een korte "09:00"-tijd, maar een tijdstip
	   gekoppeld aan een natuurverschijnsel (bv. "Voor zonsondergang") is
	   bewust langer, zie stadsroute-paginastructuur. Kolom iets breder dan
	   strikt nodig voor de korte variant + hyphens:auto zodat zo'n langer
	   label netjes met een echt afbreekstreepje breekt i.p.v. willekeurig
	   midden in het woord (overflow-wrap:break-word staat al sitebreed aan
	   als vangnet voor browsers zonder afbreek-ondersteuning). */
	hyphens: auto;
}
.ktt-route__stop-rail { position: relative; }
.ktt-route__stop-rail::before {
	content: ""; position: absolute; left: 50%; top: 6px; bottom: -1.2rem; width: 1.5px;
	background: #e2ddd4; transform: translateX(-50%);
}
.ktt-route__stop:last-child .ktt-route__stop-rail::before { display: none; }
.ktt-route__stop-rail::after {
	content: ""; position: absolute; left: 50%; top: 2px; width: 9px; height: 9px;
	border-radius: 50%; background: #be988b; transform: translateX(-50%);
}
.ktt-route__stop-body { padding-bottom: 1.4rem; }
.ktt-route__stop-body b { display: block; font-size: .96rem; font-weight: 700; color: #0d4663; margin-bottom: .2rem; }
.ktt-route__stop-link {
	cursor: pointer; width: fit-content;
	border-bottom: 1.5px dotted transparent;
	transition: border-color .15s, color .15s;
}
.ktt-route__stop-link:hover, .ktt-route__stop-link:focus-visible {
	color: #c1502e; border-color: #c1502e;
	outline: none;
}
.ktt-route__stop-body p { margin: 0; font-size: .86rem; color: #4d6d81; max-width: 46ch; line-height: 1.55; }
.ktt-route__tag {
	display: inline-block; margin-top: .5rem; font-size: .7rem; font-weight: 700;
	letter-spacing: .03em; color: #4a7c59; background: rgba(74,124,89,.14);
	padding: .15rem .5rem; border-radius: 5px;
}

@media (max-width: 780px) {
	.ktt-route { grid-template-columns: 1fr; }
	.ktt-route__map-col { min-height: 260px; }
	.ktt-route__side { padding: 1.4rem 1.3rem; }
}