/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Category-specific POI markers and cluster icons are rendered as
   L.divIcon. Leaflet's default .leaflet-div-icon has a white background
   and gray border that would bleed through our colored chips — kill
   both so the circles stay clean. */
.citybox-poi-icon,
.citybox-cluster-icon {
  background: transparent;
  border: none;
}

/* MarkerCluster.Default.css ships its own gradient backgrounds on the
   default cluster classes. Our cluster icons compose the entire visual
   themselves, so strip the upstream background. */
.citybox-cluster-icon .marker-cluster,
.marker-cluster.citybox-cluster-icon {
  background: none !important;
}

/* POI name labels. Bound to every marker as a permanent tooltip but
   hidden until the map crosses LABEL_ZOOM (street level). At that
   point map_controller flips .citybox-show-labels on the map
   container and every label reveals at once via CSS — no per-marker
   JS work.

   Selector uses .leaflet-tooltip.citybox-poi-label (two classes,
   specificity 0,2,0) so it beats Leaflet's own .leaflet-tooltip
   defaults (background-color:#fff, border, padding) which would
   otherwise paint a white pill behind the text. */
.leaflet-tooltip.citybox-poi-label {
  display: none;
  background: transparent;
  background-color: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  color: #1f2937;
  /* White halo for legibility against any tile background — same trick
     GMaps uses for street and POI labels. Four 1px offsets cover all
     corners, the soft 3px blur is the outer glow. */
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.95),
     1px -1px 0 rgba(255, 255, 255, 0.95),
    -1px  1px 0 rgba(255, 255, 255, 0.95),
     1px  1px 0 rgba(255, 255, 255, 0.95),
     0    1px 3px rgba(255, 255, 255, 0.95);
  font: 600 11px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.leaflet-tooltip.citybox-poi-label::before {
  display: none !important;  /* hide Leaflet's directional arrow */
}

/* Leaflet defaults add a per-direction margin (margin-left: -6px on
   .leaflet-tooltip-left, etc.) that pushes the tooltip away from the
   anchor on top of any offset we pass. Zero it so the marker's
   `offset` is the only thing controlling the gap. */
.leaflet-tooltip.citybox-poi-label.leaflet-tooltip-left,
.leaflet-tooltip.citybox-poi-label.leaflet-tooltip-right,
.leaflet-tooltip.citybox-poi-label.leaflet-tooltip-top,
.leaflet-tooltip.citybox-poi-label.leaflet-tooltip-bottom {
  margin: 0;
}
.citybox-show-labels .leaflet-tooltip.citybox-poi-label {
  display: block;
}