/**
 * @file
 * Browse-by-map block styles.
 *
 * Deliberately restrained — this sits directly under the "Browse by category"
 * band, so it borrows that band's spacing rather than introducing a new look.
 * Colours use currentColor and a single accent variable so the block inherits
 * the bsvsearch_spring theme instead of fighting it.
 */

.bsv-map {
  --bsv-map-accent: #1a7f6b;
  --bsv-map-accent-soft: rgba(26, 127, 107, 0.75);
  margin: 0 0 1.5rem;
}

/* Toggle button ---------------------------------------------------------- */

.bsv-map__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bsv-map__toggle:hover,
.bsv-map__toggle:focus-visible {
  color: #fff;
  background: var(--bsv-map-accent);
  border-color: var(--bsv-map-accent);
}

.bsv-map__toggle:focus-visible {
  outline: 2px solid var(--bsv-map-accent);
  outline-offset: 2px;
}

/* A small pin glyph drawn in CSS, so the block ships no image requests. */
.bsv-map__toggle-icon {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid currentColor;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* Panel and canvas ------------------------------------------------------- */

.bsv-map__panel {
  margin-top: 0.75rem;
}

.bsv-map__panel[hidden] {
  display: none;
}

.bsv-map__canvas {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  background: #eef1f3;
}

/* Leaflet sets its own z-index stack high enough to sit over sticky headers;
   keep it below the site's admin toolbar and main navigation. */
.bsv-map__canvas .leaflet-pane,
.bsv-map__canvas .leaflet-top,
.bsv-map__canvas .leaflet-bottom {
  z-index: 1;
}

.bsv-map__status {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  opacity: 0.8;
}

/* Count bubbles ---------------------------------------------------------- */

.bsv-map__bubble {
  stroke: #fff;
  fill: var(--bsv-map-accent-soft);
  transition: fill-opacity 0.15s ease;
}

.bsv-map__bubble:hover {
  fill-opacity: 1;
}

/* Places are a distinct hue from countries, so it is obvious the map has
   switched from "how many per country" to "how many in this town". */
.bsv-map__bubble--place {
  fill: rgba(176, 96, 42, 0.78);
}

.bsv-map__level {
  opacity: 0.65;
  font-size: 0.85em;
}

.bsv-map__tooltip {
  font-weight: 600;
}

.bsv-map__popup a {
  display: inline-block;
  margin-top: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .bsv-map__toggle,
  .bsv-map__bubble {
    transition: none;
  }
}