/* ═══════════════════════════════════════════════════════════════════════════
   stops-map-style.css — shared styles for all City/city-stops-map.html pages
   Linked from every guide stops-map page (depth 2: ../../assets/stops-map-style.css).
   Generated by Brain/scripts/build/build_guide_map.py; edit here, not inline in pages.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Full-viewport layout — stops-map pages fill the screen */
html, body { height: 100vh; height: 100dvh; }
body { display: flex; flex-direction: column; padding-bottom: 0; }

/* Day-filter pill row at top of page */
#filter-row {
  display: flex; gap: 6px; padding: 8px 14px; flex-wrap: wrap;
  background: var(--surface, #fff); border-bottom: 0.5px solid var(--border, #e0ddd6);
  flex-shrink: 0;
}

/* Day filter buttons — color driven by per-button --dc custom property */
.day-btn {
  padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
  border: 1.5px solid var(--dc, #c8a44a); background: #fff; color: var(--dc, #8a6c1a);
  cursor: pointer; transition: background 0.12s, color 0.12s;
}
.day-btn.active { background: var(--dc, #b85c2a); color: #fff; border-color: var(--dc, #b85c2a); }

/* "All days" is the neutral view-all mode — never a day color */
.day-btn[data-day="all"] {
  border-color: #9a9590 !important;
  color: #6a6660 !important;
}
.day-btn[data-day="all"].active {
  background: #f0ede8 !important;
  border-color: #3d3a32 !important;
  color: #3d3a32 !important;
}

/* Map container */
#map-wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
#map { position: absolute; inset: 0; background: #cfe0e4; }

/* Leaflet overrides */
.leaflet-container { background: #cfe0e4; font-family: Arial, Helvetica, sans-serif; outline: none; }
.leaflet-control-zoom a { color: #6b4422; border-color: #d8d4cc; }
.leaflet-bar a:hover { background: var(--surface, #fff); border-color: #b85c2a; }

/* Stop popup */
.stop-popup { font-size: 13px; line-height: 1.5; min-width: 160px; max-width: 220px; }
.stop-popup strong { display: block; font-size: 14px; margin-bottom: 4px; color: #3d3a32; }
.stop-popup .day-tag {
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px;
  color: #fff; display: inline-block; margin-bottom: 6px;
}
.stop-popup a { color: #b85c2a; text-decoration: none; font-size: 12px; }
.stop-popup a:hover { text-decoration: underline; }

/* Mobile: pinch/tap-to-zoom already works — the +/- widget just eats screen
   space on a small map, so it's hidden below the desktop breakpoint. */
@media (max-width: 600px) and (pointer: coarse) {
  .leaflet-control-zoom { display: none; }
}