/* =========================================================
   deals-map.css - Florida deals map surface + brass markers.
   Uses the Field Office tokens from styles.css (--graphite, --brass...).
   ========================================================= */

.archive-map-section {
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.archive-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.archive-map-head .filter-label {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}

.map-style-switch {
  display: inline-flex;
  border: 1px solid var(--line);
  background: var(--charcoal);
}
.map-style-switch button {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  padding: 7px 13px;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.map-style-switch button:last-child { border-right: 0; }
.map-style-switch button[aria-pressed="true"] { background: var(--brass); color: var(--graphite); }
.map-style-switch button:hover:not([aria-pressed="true"]) { color: var(--ivory); }

#deals-map {
  height: clamp(360px, 52vh, 560px);
  width: 100%;
  border: 1px solid var(--line);
  background: var(--graphite);
  position: relative;
  z-index: 0;
}
#deals-map[hidden] { display: none; }

/* Leaflet dark surround so tile seams read as intentional */
#deals-map .leaflet-container { background: var(--graphite); font-family: var(--font-body); }
#deals-map .leaflet-control-zoom a {
  background: rgba(11,13,12,0.9);
  color: var(--ivory);
  border-color: var(--line);
}
#deals-map .leaflet-control-zoom a:hover { background: var(--charcoal); color: var(--brass-bright); }
#deals-map .leaflet-control-attribution {
  background: rgba(11,13,12,0.7);
  color: var(--stone-mid);
  font-size: 10px;
}
#deals-map .leaflet-control-attribution a { color: var(--stone); }

/* Numbered brass markers (divIcon), value-tier weighted */
.deal-marker-shell { background: transparent; border: 0; }
.deal-marker {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,14,13,0.9);
  border: 1px solid var(--brass);
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  transition: transform .16s ease, box-shadow .16s ease;
}
.deal-marker span {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--ivory);
}
.deal-marker-hi { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(215,158,66,0.16), 0 2px 8px rgba(0,0,0,0.5); }
.deal-marker-hi span { color: var(--signal); }
.deal-marker-mid { border-color: var(--brass-bright); }
.deal-marker-lo { border-color: var(--stone-mid); }
.deal-marker-lo span { color: var(--stone); }
.deal-marker-shell:hover .deal-marker { transform: scale(1.18); box-shadow: 0 0 0 4px rgba(193,154,107,0.22), 0 4px 12px rgba(0,0,0,0.55); }

.deal-map-tooltip {
  background: var(--charcoal);
  color: var(--ivory);
  border: 1px solid var(--brass);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  padding: 6px 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.deal-map-tooltip::before { border-top-color: var(--brass) !important; }

/* Row flash when a pin is clicked */
.deal-row-flash {
  animation: dealRowFlash 1.6s ease;
}
@keyframes dealRowFlash {
  0%, 100% { background: transparent; }
  20% { background: rgba(167,124,80,0.22); }
}

@media (prefers-reduced-motion: reduce) {
  .deal-marker, .deal-marker-shell:hover .deal-marker { transition: none; }
  .deal-row-flash { animation-duration: 0.001ms; }
}