/* ============================================================================
 * Interactive Leaflet map (loco-map.js) — enqueued ONLY on map pages (home + the
 * three category directories + trail pages) alongside the vendored leaflet.css. Kept
 * OUT of the always-inlined style.css so it never taxes other pages' HTML budget.
 *
 * Progressive enhancement: the static SVG dot map / fallback shows until loco-map.js
 * adds .loco-map--live, at which point CSS swaps in the live tile map below.
 * ========================================================================== */

/* --- live/fallback swap --------------------------------------------------- */
.loco-map__leaflet { display: none; }
.loco-map--live .loco-map__leaflet {
  display: block;
  width: 100%;
  height: clamp(280px, 48vw, 520px);
  background: #eef2e9; /* parchment while tiles load, not stark white */
  border-top: 1px solid var(--loco-border);
}
/* When the live map is up, hide the SVG dot-map fallback (directory/trail pages). */
.loco-map--live .loco-map__svg { display: none; }

/* Home block: no SVG — a lean fallback line + the toggle toolbar that doubles as the
   legend. Controls stay hidden until the live map exists (dead checkboxes help no one). */
.loco-map--home .loco-map__leaflet { height: clamp(320px, 55vw, 560px); }
.loco-map__controls { display: none; }
.loco-map--live .loco-map__controls {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.15rem; align-items: center;
  margin: 0; padding: 0.85rem 1.1rem;
}
.loco-map__fallback {
  margin: 0; padding: 1.1rem 1.2rem; font-size: 0.95rem; line-height: 1.5; color: var(--loco-muted);
}
.loco-map__fallback a { color: var(--loco-wine); font-weight: 700; }
.loco-map__fallback-note { display: block; margin-top: 0.25rem; font-size: 0.82rem; }
.loco-map--live .loco-map__fallback { display: none; }

/* Home section frame: match the site's other full-bleed sections (rounded card on paper). */
.loco-map-section .loco-map--home {
  border: 1px solid var(--loco-border); border-radius: var(--loco-radius, 14px); overflow: hidden;
  background: var(--wp--preset--color--base, #fff);
}

/* --- category toggle toolbar (checkbox + colour swatch + count) ------------ */
.loco-map__toggle-item {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.9rem; font-weight: 700; color: var(--loco-ink); cursor: pointer; user-select: none;
}
.loco-map__toggle-item input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--loco-wine); cursor: pointer; }
.loco-map__toggle-item:has(input:not(:checked)) { color: var(--loco-muted); }
.loco-map__toggle-item:has(input:not(:checked)) .loco-map__swatch { opacity: 0.35; }
.loco-map__swatch {
  width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: 0 0 auto;
  background: var(--loco-wine); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--loco-border);
}
.loco-map__swatch[data-type="brewery"] { background: #b9702a; }
.loco-map__swatch[data-type="cidery"] { background: var(--loco-vine); }
.loco-map__swatch[data-type="distillery"] { background: #3f6f8f; }
.loco-map__swatch + .loco-map__swatch { margin-left: -0.15rem; }
.loco-map__count { font-size: 0.78rem; color: var(--loco-muted); font-weight: 600; }

/* --- markers (L.divIcon; colour via currentColor so it matches the swatches) --- */
.loco-marker { background: transparent; border: 0; }
.loco-marker svg { display: block; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35)); }
.loco-marker--winery { color: var(--loco-wine); }
.loco-marker--brewery { color: #b9702a; }
.loco-marker--cidery { color: var(--loco-vine); }
.loco-marker--distillery { color: #3f6f8f; }
.loco-marker { transition: transform 0.12s ease; }
.loco-marker:hover, .loco-marker:focus { transform: scale(1.12); z-index: 1000 !important; }

/* --- Leaflet chrome, tuned to the site palette ---------------------------- */
.leaflet-container {
  font: inherit;
  border-radius: 0;
}
.leaflet-bar a, .leaflet-bar a:hover {
  color: var(--loco-ink); background: #fff;
}
.leaflet-bar a:hover { background: var(--loco-paper, #f4efe4); }
.leaflet-control-attribution {
  font-size: 0.68rem; background: rgba(255, 255, 255, 0.82);
}
.leaflet-control-attribution a { color: var(--loco-wine); }

/* --- popup --------------------------------------------------------------- */
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); }
.leaflet-popup-content { margin: 0.85rem 1rem; line-height: 1.4; }
.loco-map-popup { display: grid; gap: 0.15rem; min-width: 190px; }
.loco-map-popup__kind {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--loco-vine);
}
.loco-map-popup__name {
  font-family: var(--wp--preset--font-family--display, Georgia, serif);
  font-size: 1.05rem; font-weight: 600; color: var(--loco-wine); text-decoration: none; line-height: 1.2;
}
.loco-map-popup__name:hover { text-decoration: underline; }
.loco-map-popup__meta { margin: 0.1rem 0 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--loco-vine); }
.loco-map-popup__addr { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--loco-muted); }
.loco-map-popup__web { margin-top: 0.2rem; font-size: 0.85rem; color: var(--loco-ink); word-break: break-word; }
.loco-map-popup__more { margin-top: 0.35rem; font-size: 0.85rem; font-weight: 700; color: var(--loco-wine); text-decoration: none; }
.loco-map-popup__more:hover { text-decoration: underline; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 640px) {
  .loco-map--live .loco-map__leaflet { height: clamp(260px, 62vw, 380px); }
  .loco-map--home .loco-map__leaflet { height: clamp(300px, 70vw, 420px); }
  .loco-map--live .loco-map__controls { gap: 0.4rem 0.85rem; padding: 0.7rem 0.9rem; }
}

/* Respect reduced-motion: Leaflet pan/zoom easing + marker hover scale. */
@media (prefers-reduced-motion: reduce) {
  .loco-marker { transition: none; }
}