/*
  Balasto Supply Map — Component Styles
  v2.0.0 · Prefix: .balasto-supply-map
  ------------------------------------------------------------------
  Tokens align with the Balasto design system:
    Navy-900  #14233F  (active states, popup bg, borders)
    Amber-500 #E0922F  (not used directly — reserved for accents)
    Bone-100  #F6F0E4  (background, popup tip)
    Spruce-500 #2E7D5B (active choropleth fill)
    Gray-300  #d1d5db  (inactive choropleth fill)
  Fonts: Hanken Grotesk (sans) loaded by the PHP enqueue.
  ------------------------------------------------------------------
  IMPORTANT: .balasto-supply-map-widget [hidden] { display:none !important }
  This rule prevents CSS flex/block rules from overriding the [hidden]
  HTML attribute on status and legend elements. Without it, Firefox
  shows loading-state elements permanently.
*/

/* ── Tokens ───────────────────────────────────────────────────── */
.balasto-supply-map {
  --bsm-active:   #2E7D5B;
  --bsm-inactive: #d1d5db;
  --bsm-dark:     #14233F;
  --bsm-bg:       #F6F0E4;
  --bsm-border:   #F6F0E4;
  --bsm-font:     'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bsm-radius:   8px;
}

/* ── Root ─────────────────────────────────────────────────────── */
.balasto-supply-map {
  box-sizing: border-box;
  width: 100%;
  background: var(--bsm-bg);
  border-radius: var(--bsm-radius);
  overflow: hidden;
  font-family: var(--bsm-font);
  font-size: 14px;
  color: var(--bsm-dark);
  margin: 0 0 1.5rem 0;
}

.balasto-supply-map *,
.balasto-supply-map *::before,
.balasto-supply-map *::after {
  box-sizing: inherit;
}

/* ── Stage ────────────────────────────────────────────────────── */
.balasto-supply-map__stage {
  position: relative;
  width: 100%;
  background: var(--bsm-bg);
}

/* ── Status overlay ───────────────────────────────────────────── */
.balasto-supply-map__status {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bsm-bg);
  font-family: var(--bsm-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--bsm-dark);
  opacity: 0.8;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.balasto-supply-map__status.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.balasto-supply-map__status.is-error {
  color: #b91c1c;
  font-weight: 600;
}

/* ── Canvas (Leaflet mounts here) ─────────────────────────────── */
.balasto-supply-map__canvas {
  width: 100%;
  /* height set inline by shortcode attribute */
  min-height: 320px;
}

@media (max-width: 768px) {
  .balasto-supply-map__canvas {
    min-height: 260px;
    height: 480px !important;
  }
}

@media (max-width: 480px) {
  .balasto-supply-map__canvas {
    min-height: 220px;
    height: 360px !important;
  }
}

/* ── [hidden] safety ──────────────────────────────────────────── */
/* Prevents flex/block from overriding the HTML hidden attribute */
.balasto-supply-map-widget [hidden] {
  display: none !important;
}

/* ── Legend ───────────────────────────────────────────────────── */
.balasto-supply-map__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 12px 16px;
  background: var(--bsm-bg);
  border-top: 1px solid rgba(20, 35, 63, 0.12);
}

.balasto-supply-map__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bsm-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--bsm-dark);
  opacity: 0.8;
  white-space: nowrap;
}

.balasto-supply-map__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.balasto-supply-map__swatch--active   { background: var(--bsm-active); }
.balasto-supply-map__swatch--inactive { background: var(--bsm-inactive); }

/* ── Last updated indicator ───────────────────────────────────── */
.balasto-supply-map__last-updated {
  margin-left: auto;
  font-family: var(--bsm-font);
  font-size: 11px;
  font-weight: 400;
  color: var(--bsm-dark);
  opacity: 0.5;
  white-space: nowrap;
}

/* ── Optional footer CTA (show_footer="true") ─────────────────── */
.balasto-supply-map__footer {
  padding: 20px 20px 24px;
  background: var(--bsm-dark);
  text-align: center;
}

.balasto-supply-map__footer-lead {
  margin: 0 0 4px;
  font-family: var(--bsm-font);
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.balasto-supply-map__footer-text {
  margin: 0 0 16px;
  font-family: var(--bsm-font);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
}

.balasto-supply-map__cta {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 6px;
  background: #E0922F;
  color: #ffffff !important;
  font-family: var(--bsm-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.15s ease;
}

.balasto-supply-map__cta:hover {
  background: #c97e25;
  color: #ffffff !important;
}

/* ── Leaflet popup — design system overrides ──────────────────── */
.balasto-supply-map .leaflet-popup-content-wrapper {
  background: var(--bsm-dark);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(20, 35, 63, 0.32);
  padding: 0;
  color: #ffffff;
  font-family: var(--bsm-font);
}

.balasto-supply-map .leaflet-popup-content {
  margin: 0;
}

.balasto-supply-map .leaflet-popup-tip {
  background: var(--bsm-dark);
}

.balasto-supply-map .leaflet-popup-close-button {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 18px !important;
  top: 6px !important;
  right: 8px !important;
}

.balasto-supply-map .leaflet-popup-close-button:hover {
  color: #ffffff !important;
}

/* ── Popup inner layout ───────────────────────────────────────── */
.bsm-popup {
  min-width: 180px;
  max-width: 240px;
  padding: 14px 16px 14px;
}

.bsm-popup__state {
  margin: 0 0 10px;
  font-family: var(--bsm-font);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bsm-popup__units {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bsm-popup__unit-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.bsm-popup__unit-label {
  font-family: var(--bsm-font);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

.bsm-popup__unit-count {
  font-family: var(--bsm-font);
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

.bsm-popup__empty {
  margin: 0;
  font-family: var(--bsm-font);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}