/* Kartat: korjaamo- ja myymälähaku (blocks/location-search) ja korjaamosivun
   kartta (blocks/shop-map). Molemmat piirtävät saman pohjakartan
   (blocks/location-search/map-style.js) ja samat merkit
   (froggy_location_pin_svg(), inc/location-search.php).

   Rekisteröidään kahvalla froggy-map (inc/assets.php), ja lohkot ottavat sen
   käyttöön block.json:n style-listassa, joten tiedosto latautuu vain sivuilla,
   joilla jompikumpi lohko on. */

/* --------------------------------------------------------------------------
 * Karttamerkki
 * ----------------------------------------------------------------------- */

.froggy-location-pin {
	/* Myymälä keltainen (korostus) sinisellä kuvakkeella, korjaamo
	   päinvastoin (Figma legenda). Merkin omassa elementissä, jotta värit
	   ratkeavat siellä, missä merkki on (legenda, kartta). */
	--froggy-pin-stores-body: var(--wp--preset--color--accent);
	--froggy-pin-stores-core: var(--wp--preset--color--primary);
	--froggy-pin-stores-icon: var(--wp--preset--color--accent);
	--froggy-pin-shops-body: var(--wp--preset--color--primary);
	--froggy-pin-shops-core: var(--wp--preset--color--accent);
	--froggy-pin-shops-icon: var(--wp--preset--color--primary);

	display: block;
	overflow: visible;
}

.froggy-location-pin--stores .froggy-location-pin__body {
	fill: var(--froggy-pin-stores-body);
}

.froggy-location-pin--stores .froggy-location-pin__core {
	fill: var(--froggy-pin-stores-core);
}

.froggy-location-pin--stores .froggy-location-pin__icon {
	color: var(--froggy-pin-stores-icon);
}

.froggy-location-pin--shops .froggy-location-pin__body {
	fill: var(--froggy-pin-shops-body);
}

.froggy-location-pin--shops .froggy-location-pin__core {
	fill: var(--froggy-pin-shops-core);
}

.froggy-location-pin--shops .froggy-location-pin__icon {
	color: var(--froggy-pin-shops-icon);
}

/* Reunaviiva: 15 % tummaa keltaisella, 15 % valkoista sinisellä (Figma). */
.froggy-location-pin__edge {
	stroke: rgb(0 0 0 / 15%);
}

.froggy-location-pin--shops .froggy-location-pin__edge {
	stroke: rgb(255 255 255 / 15%);
}

/* --------------------------------------------------------------------------
 * Kartta
 * ----------------------------------------------------------------------- */

.froggy-map {
	/* Pohjakartan värit (map-style.js lukee nämä). Rakenne on CARTOn
	   Voyagerista, sävyt paletin semanttisista slugeista: pohja korostus-
	   värillä lämmitettyä valkoista, vesi ja nimet ensisijaisesta, tiet
	   korostusväristä. Näin Mekonomenin paletti (brands/mekonomen/theme.json)
	   värjää kartan omilla väreillään. */

	/* Lämmin, Voyagerin kermaa muistuttava pohja (Fixuksella ~#fcfbf7):
	   hitunen korostusväriä valkoiseen ja hitunen harmaata taittamaan sitä.
	   Pohjan sävyt (rajat, rakennukset, katujen reunat, hehku) johdetaan
	   tästä, jotta koko kartta pysyy samassa lämpötilassa. */
	--froggy-map-land: color-mix(
		in srgb,
		color-mix(
			in srgb,
			var(--wp--preset--color--accent) 2%,
			var(--wp--preset--color--white)
		),
		var(--wp--preset--color--gray) 2%
	);
	/* Metsät ja puistot: kartan oma vihreä (Voyager), ei brändiväri. Tyyli
	   antaa peittävyyden zoomauksen mukaan. */
	--froggy-map-green: rgb(197 225 178);
	--froggy-map-residential: color-mix(
		in srgb,
		var(--wp--preset--color--gray) 8%,
		var(--froggy-map-land)
	);
	--froggy-map-building: color-mix(
		in srgb,
		var(--wp--preset--color--gray) 7%,
		var(--froggy-map-land)
	);
	--froggy-map-building-outline: color-mix(
		in srgb,
		var(--wp--preset--color--gray) 18%,
		var(--froggy-map-land)
	);
	/* Vesi: ensisijaista väriä lämpimään pohjaan, jolloin sininen taittuu
	   Voyagerin harmaansiniseksi (Fixuksella ~#d9e4e9). */
	--froggy-map-water: color-mix(
		in srgb,
		var(--wp--preset--color--primary) 14%,
		var(--froggy-map-land)
	);
	--froggy-map-water-label: color-mix(
		in srgb,
		var(--wp--preset--color--primary) 60%,
		var(--wp--preset--color--white)
	);
	--froggy-map-road: var(--wp--preset--color--white);
	--froggy-map-road-casing: color-mix(
		in srgb,
		var(--wp--preset--color--gray) 18%,
		var(--froggy-map-land)
	);
	/* Tiehierarkia korostusvärin sävyinä: seututiet lähes valkoiset,
	   kantatiet vaalean- ja valtatiet täyteläisemmän keltaiset. */
	--froggy-map-major: color-mix(
		in srgb,
		var(--wp--preset--color--accent) 12%,
		var(--wp--preset--color--white)
	);
	--froggy-map-major-casing: color-mix(
		in srgb,
		var(--wp--preset--color--accent) 35%,
		var(--wp--preset--color--white)
	);
	--froggy-map-highway: color-mix(
		in srgb,
		var(--wp--preset--color--accent) 40%,
		var(--wp--preset--color--white)
	);
	--froggy-map-highway-casing: color-mix(
		in srgb,
		var(--wp--preset--color--accent) 50%,
		var(--froggy-map-land)
	);
	--froggy-map-rail: color-mix(
		in srgb,
		var(--wp--preset--color--gray) 28%,
		var(--wp--preset--color--white)
	);
	--froggy-map-boundary: color-mix(
		in srgb,
		var(--wp--preset--color--gray) 22%,
		var(--froggy-map-land)
	);
	/* Nimet: Voyagerin siniharmaa, Fixuksella ensisijaisen värin kautta. */
	--froggy-map-label: color-mix(
		in srgb,
		var(--wp--preset--color--primary) 45%,
		var(--wp--preset--color--gray)
	);
	--froggy-map-label-muted: color-mix(
		in srgb,
		color-mix(
			in srgb,
			var(--wp--preset--color--gray) 80%,
			var(--wp--preset--color--primary)
		),
		var(--wp--preset--color--white) 25%
	);
	--froggy-map-halo: var(--froggy-map-land);

	z-index: 0; /* Leafletin tasot omaan pinoonsa, ylätunnisteen alle. */
}

/* Leafletin oma .leaflet-container (view.css) voi latautua tämän jälkeen,
   joten tausta ja fontti myös tarkemmalla valitsimella. */
.froggy-map,
.froggy-map.leaflet-container {
	background: var(--froggy-map-land);
	font: inherit;
}

/* MapLibren omasta tyylitiedostosta (maplibre-gl.css) tarvitaan vain nämä:
   loput koskevat sen omia säätimiä, joita Leafletin sisällä ei käytetä. */
.froggy-map .maplibregl-map {
	position: relative;
	overflow: hidden;
}

.froggy-map .maplibregl-canvas {
	position: absolute;
	top: 0;
	left: 0;
}

.froggy-map:focus-visible {
	outline: 2px solid var(--froggy-heading);
	outline-offset: 2px;
}

.froggy-map .leaflet-control-attribution a {
	color: inherit;
}

/* Rullauksen vihje ennen klikkausta (basemap.js enableOnInteraction()).
   Näkyvissä se sieppaa klikkauksen: klikkaus poistaa vihjeen ja kytkee
   zoomauksen, mutta ei osu alla olevaan merkkiin. Piilossa
   (visibility: hidden) klikkaus menee läpi karttaan. */
.froggy-map__hint {
	position: absolute;
	inset: 0;
	z-index: 1001; /* Leafletin säätimien (1000) yläpuolelle. */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--froggy-space-40);
	background: color-mix(
		in srgb,
		var(--wp--preset--color--ink) 55%,
		transparent
	);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
}

.froggy-map__hint.is-visible {
	visibility: visible;
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.froggy-map__hint {
		transition:
			opacity 0.2s ease,
			visibility 0.2s;
	}
}

/* Leafletin divIcon-kääre ilman oletustaustaa. */
.froggy-location-marker {
	background: none;
	border: 0;
}

.froggy-location-marker .froggy-location-pin {
	transform-origin: 50% 100%;
	transition: transform 0.15s ease;
	filter: drop-shadow(0 2px 3px rgb(0 0 0 / 25%));
}

.froggy-location-marker:hover .froggy-location-pin,
.froggy-location-marker:focus-visible .froggy-location-pin,
.froggy-location-marker.is-selected .froggy-location-pin {
	transform: scale(1.15);
}

.froggy-location-marker:focus-visible {
	outline: none;
}

.froggy-location-marker:focus-visible .froggy-location-pin__edge,
.froggy-location-marker.is-selected .froggy-location-pin__edge {
	stroke: var(--wp--preset--color--ink);
	stroke-width: 2;
}