/**
 * @file district-map.css
 *
 * Styles for the district map SDC component.
 * Height is driven by the --map-height custom property set inline,
 * falling back to 450px if not provided.
 */

.district-map-wrapper {
  position: relative;
  width: 100%;
}

.district-map {
  width: 100%;
  height: var(--map-height, 450px);
  /* Ensure Leaflet tiles render above backgrounds but below modals */
  z-index: 1;
}

/**
 * Leaflet popup overrides.
 * Scoped to .district-map to avoid conflicts with other Leaflet instances.
 */
.district-map-wrapper .leaflet-popup-content-wrapper {
  border-radius: 4px;
  font-size: 0.875rem;
  line-height: 1.5;
}

.district-map-wrapper .leaflet-popup-content {
  margin: 0.75rem 1rem;
}

/**
 * Ensure map renders correctly inside flex/grid containers,
 * which is common in footer regions.
 */
.district-map-wrapper .leaflet-container {
  font-family: inherit;
}