/*
 * Interactive-map container styles (self-hosted, progressive enhancement).
 * Loaded ONLY on pages that embed a Leaflet map (location + contact). The live
 * Leaflet DOM (.osm-map__canvas, .osm-pin, .leaflet-*) is injected at runtime by
 * /vendor/leaflet/osm-map-init.js, so these rules are global — Astro's
 * page-scoped CSS cannot reach runtime-created nodes. Per-page layout (column
 * width, mobile full-bleed) lives in each page's own scoped <style>.
 */

/* Container: fixed height (Leaflet needs an explicit height) with a calm
   placeholder colour behind the tiles while they load. */
.osm-map {
  position: relative;
  width: 100%;
  height: 340px;
  border: 1px solid #e6e6e2;
  background: #e8ece3;
  overflow: hidden;
}

/* Live map canvas — fills the container. */
.osm-map__canvas {
  position: absolute;
  inset: 0;
}
.osm-map .leaflet-container {
  width: 100%;
  height: 100%;
  background: #e8ece3;
  font: inherit;
}

/* No-JS baseline: static OSM PNG + „In OpenStreetMap öffnen" link. Hidden once
   the interactive map is ready (the container gains .osm-map--live). */
.osm-map-fallback {
  position: absolute;
  inset: 0;
  display: block;
  line-height: 0;
  text-decoration: none;
}
.osm-map-fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.osm-map--live .osm-map-fallback {
  display: none;
}

/* „In OpenStreetMap öffnen" overlay on the static fallback (bottom-right). */
.osm-map-label {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 500;
  background: rgba(255, 255, 255, 0.82);
  color: #4b5320;
  font-size: 11px;
  line-height: 1;
  padding: 5px 8px;
  letter-spacing: 0.2px;
}

/* Brand-maroon SVG pin — strip Leaflet's default white divIcon chrome. */
.leaflet-div-icon.osm-pin {
  background: transparent;
  border: 0;
}
.osm-pin svg {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Permanent town label on the prominent (saturated-blue) city circle-marker.
   Legible white chip with a blue outline that ties it to the marker and keeps
   it clearly distinct from the maroon practice pin's popup. */
.leaflet-tooltip.osm-city-label {
  background: #ffffff;
  color: #14446e;
  border: 1px solid #1d6fb8;
  border-radius: 3px;
  font-weight: 600;
  font-size: 12px;
  padding: 2px 7px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* direction:'top' → the callout arrow sits at the bottom; tint it to match. */
.leaflet-tooltip.osm-city-label.leaflet-tooltip-top::before {
  border-top-color: #1d6fb8;
}