/* ============================================================
   Fly GACA — Aerodrome map (map.html)
   Load order: tokens.css -> base.css -> map.css  (+ Leaflet CSS)
   ============================================================ */

.map-head {
  padding-block: var(--space-8) var(--space-6);
  border-block-end: 1px solid var(--border);
}
.map-head h1 { font-size: var(--fs-h1); margin-block: var(--space-3) var(--space-3); }
.map-head .lead { max-width: 56ch; }

.map-section { padding-block: var(--space-6) var(--space-10); }

.map-frame {
  position: relative;
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
#ad-map {
  height: 72vh; min-height: 460px; width: 100%;
  background: var(--falcon-deep);
}

/* Legend */
.map-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  margin-block-start: var(--space-4);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.map-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.map-legend .key { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.key-intl { background: #4A9CB8; }
.key-dom  { background: #8FC9A8; }
.key-mil  { background: #C8A04A; }

.map-error {
  padding: var(--space-6); text-align: center; color: var(--text-muted);
}

/* Leaflet — dark theme to match the UI */
.leaflet-container { font-family: var(--font-sans); background: var(--falcon-deep); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--falcon-deep);
  color: var(--text);
  border: 1px solid var(--border-bright);
  box-shadow: var(--shadow-pop);
}
.leaflet-popup-content { margin: var(--space-4); font-size: var(--fs-sm); }
.leaflet-popup-content .pop-name { font-weight: var(--fw-bold); color: var(--text); }
.leaflet-popup-content .pop-meta {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-dim); margin-block: 0.25rem 0.5rem;
}
.leaflet-popup-content a { color: var(--link); font-weight: var(--fw-semibold); }
.leaflet-popup-close-button { color: var(--text-dim) !important; }
.leaflet-bar a {
  background: var(--falcon-deep); color: var(--text);
  border-color: var(--border-bright);
}
.leaflet-bar a:hover { background: var(--surface-raised); }
.leaflet-control-attribution {
  background: rgba(10,14,18,0.8) !important; color: var(--text-dim) !important;
}
.leaflet-control-attribution a { color: var(--text-muted) !important; }

@media (max-width: 600px) {
  #ad-map { height: 64vh; }
}