/**
 * Venue map: the street map with the festival locations and the list beside it.
 *
 * Loaded only on pages carrying the [vmf_karta] shortcode (inc/venue-map.php).
 * Everything is scoped to .vmf-map so it cannot reach the rest of the site, and the map's own
 * palette lives on that element rather than on :root. The link and venue colours are the theme's;
 * the map surface keeps the colours it was drawn with. Map data (c) OpenStreetMap contributors (ODbL).
 */

.vmf-map {
	--panel: #ffffff;
	--ink: #15262f;
	--muted: #5b6a70;
	--line: #d8ddd9;
	--land: #eef0ec;
	--road: #ffffff;
	--roadcase: #cfd5d2;
	--major: #f4d98f;
	--majorcase: #d9b65c;
	--ped: #f1e6d6;
	--green: #d3e5c8;
	--rail: #8d989c;
	--accent: var(--color-red-text);
	--venue: var(--color-red);
	--stay: #1f5e7a;
	--night: #6b3fa0;
	--transit: #3d7a3a;
	--display: var(--font-heading);
	--body: var(--font-body);
}

/* A page puts its content in the narrow reading column, which leaves the map about 600 px wide - too
   little for the street names to be readable. The map steps out of that column up to the site's full
   container width, and never past the viewport, so the page still does not scroll sideways. */
@media (min-width: 48em) {

	.vmf-map {
		--vmf-map-width: min(var(--container), calc(100vw - 2 * var(--gutter)));

		/* .prose > * caps everything at the reading measure, which is what makes the column narrow */
		max-width: none;
		width: var(--vmf-map-width);
		margin-left: calc(50% - var(--vmf-map-width) / 2);
	}
}

.vmf-map .grid {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* seven cards: four in the first row, three in the second; one under another on a phone */
.vmf-map #vmf-map-list {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 12px;
}

.vmf-map #vmf-map-list li { grid-column: span 3; }
.vmf-map #vmf-map-list li:nth-child(n+5) { grid-column: span 4; }

@media (max-width: 860px) {

	.vmf-map #vmf-map-list { grid-template-columns: 1fr; }

	.vmf-map #vmf-map-list li,
	.vmf-map #vmf-map-list li:nth-child(n+5) { grid-column: auto; }
}

.vmf-map .map {
	background: var(--land);
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	margin: 0;
}

.vmf-map .map svg {
	display: block;
	width: 100%;
	height: auto;
}

.vmf-map .map-note {
	font-size: 13px;
	color: var(--muted);
	padding: 10px 14px;
	border-top: 1px solid var(--line);
	background: var(--panel);
}

.vmf-map ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vmf-map li {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 4px 12px;
	margin: 0;
}

.vmf-map .pin {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #fff;
	display: grid;
	place-items: center;
	font: 700 14px var(--display);
	grid-row: span 3;
}

.vmf-map li h2 {
	font: 700 16px/1.25 var(--display);
	margin: 0;
	color: var(--ink);
	text-transform: none;
	letter-spacing: normal;
}

.vmf-map .role { font-size: 13px; color: var(--muted); }
.vmf-map .addr { font-size: 14px; color: var(--ink); }

.vmf-map .meta {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 13px;
	align-items: center;
}

.vmf-map .walk { font-variant-numeric: tabular-nums; color: var(--muted); }

.vmf-map a { color: var(--accent); font-weight: 600; }
.vmf-map a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.vmf-map svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.vmf-map .lbl {
	font: 700 17px var(--display);
	fill: var(--ink);
	paint-order: stroke;
	stroke: var(--land);
	stroke-width: 5px;
	stroke-linejoin: round;
}

.vmf-map .sub {
	font: 600 13px var(--body);
	fill: var(--muted);
	paint-order: stroke;
	stroke: var(--land);
	stroke-width: 4px;
	stroke-linejoin: round;
}

.vmf-map .street { font: 400 10.5px var(--body); fill: var(--muted); letter-spacing: .02em; }
.vmf-map .num { font: 700 14px var(--display); fill: #fff; }
.vmf-map .axis { font: 600 12px var(--body); fill: var(--ink); }