/* Map controls follow the site's shared type, green accent and spacing. */
.map-section { background: var(--color-surface); }
.map-toolbar {
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  width: min(calc(100% - 40px), var(--container-max-width)); margin: 0 auto; padding: 28px 0 22px;
  text-align: left;
}
.map-heading h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; color: var(--color-brand-primary); }
.map-heading p { margin: 6px 0 0; color: var(--color-text-medium-contrast); font-size: .95rem; }
.map-actions { min-width: 0; width: min(100%, 490px); }
.map-actions label { display: block; margin-bottom: 8px; font-size: .85rem; font-weight: 600; color: var(--color-text-dark); }
.map-actions__controls { display: flex; gap: 8px; }
.map-actions select, .map-actions button {
  min-height: 44px; border: 1px solid #b8c9be; border-radius: 8px; font: inherit; font-size: .9rem;
  color: var(--color-text-dark); background: #fff;
}
.map-actions select { min-width: 0; flex: 1; padding: 9px 30px 9px 12px; width: 100%; }
.map-actions button { flex-shrink: 0; padding: 9px 12px; color: var(--color-brand-primary-strong); background: var(--color-brand-tint); cursor: pointer; }
.map-actions button:hover { background: #e0efe5; }
.map-actions button:disabled, .map-actions select:disabled { opacity: .6; cursor: wait; }
.map-actions :focus-visible, .interactive-map:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.map-shell { border-top: 1px solid var(--color-border-light); }
.interactive-map { height: clamp(360px, 48vw, 480px); }
/* Keep the original quiet basemap treatment while retaining its geographic labels. */
.bi-map-tiles { filter: none; }
.leaflet-control-zoom a, .leaflet-control-zoom a:hover, .leaflet-control-zoom a:focus {
  color: var(--color-brand-primary-strong) !important; width: 44px !important; height: 44px !important; line-height: 44px !important;
}
.leaflet-marker-icon { padding: 0; }
.leaflet-marker-icon:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; border-radius: 50%; }
.leaflet-popup-content { font: 400 .9rem/1.7 var(--font-sans); color: var(--color-text-dark); overflow-wrap: anywhere; }
.leaflet-popup-content strong { display: block; font-size: 1rem; line-height: 1.5; color: var(--color-brand-primary-strong); }
.leaflet-popup-content br { display: none; }
.leaflet-container a.leaflet-popup-close-button { width: 36px; height: 36px; font-size: 24px; line-height: 36px; }
.map-help { margin: 0; padding: 14px 20px 18px; color: var(--color-text-medium-contrast); font-size: .8rem; text-align: center; }
.map-error { inset: auto 12px 36px; padding: 12px; display: flex; gap: 12px; justify-content: center; align-items: center; border: 1px solid #c4d5ca; border-radius: 10px; background: rgba(255,255,255,.97); backdrop-filter: none; }
.map-error p { margin: 0; font-size: .85rem; }
.map-retry-button { flex-shrink: 0; }
@media (max-width: 640px) {
  .map-toolbar { flex-direction: column; align-items: stretch; gap: 18px; padding: 22px 0 18px; }
  .map-actions { width: 100%; }
  .map-actions__controls { flex-wrap: wrap; }
  .map-actions select { flex-basis: 100%; }
  .map-actions button { width: 100%; }
  .interactive-map { height: 360px; }
  .map-error { flex-direction: column; gap: 8px; }
  .map-help { text-align: left; }
}

.map-legend { display: flex; flex-wrap: wrap; gap: 14px 30px; width: min(calc(100% - 40px), var(--container-max-width)); margin: 0 auto; padding: 0 0 22px; list-style: none; text-align: left; }
.map-legend li { display: flex; align-items: center; gap: 9px; margin: 0; padding: 0; font-size: .85rem; line-height: 1.5; color: var(--color-text-dark); }
.map-legend img { flex: 0 0 24px; width: 24px; height: 24px; object-fit: contain; }
.map-legend small { display: block; font-size: .72rem; color: var(--color-text-medium-contrast); }
@media (max-width: 640px) { .map-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; } .map-legend li { align-items: start; } }

/* Preview markers and zoom buttons work without capturing page-scroll gestures. */
.map-explorer:not(.map-explorer--expanded) .map-actions,
.map-explorer:not(.map-explorer--expanded) .map-help { display: none; }
.map-explorer:not(.map-explorer--expanded) .interactive-map { height: 280px; touch-action: pan-y; }
.map-preview-action { padding: 18px 20px 24px; text-align: center; }
.map-preview-action button, .map-dialog-header button { min-height: 44px; padding: 10px 18px; border: 1px solid #b8c9be; border-radius: 8px; font: inherit; font-size: .9rem; cursor: pointer; }
.map-preview-action button { background: #237648; color: #fff; }
.map-preview-action p { margin: 10px 0 0; font-size: .8rem; color: #52635a; }
.map-dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; color: #24343d; }
.map-dialog[open] { display: flex; flex-direction: column; }
.map-dialog::backdrop { background: rgba(18, 40, 29, .5); }
.map-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left)); border-bottom: 1px solid #dce6ea; flex-shrink: 0; }
.map-dialog-header h2 { margin: 0; font-size: 1rem; line-height: 1.4; color: #237648; }
.map-dialog-header button { flex-shrink: 0; color: #237648; background: #edf9f1; }
#map-dialog-content { flex: 1; min-height: 0; display: flex; }
.map-explorer--expanded { width: 100%; min-height: 0; display: flex; flex-direction: column; }
.map-explorer--expanded .map-toolbar { flex-shrink: 0; padding: 12px 0; }
.map-explorer--expanded .map-heading { display: none; }
.map-explorer--expanded .map-actions { width: 100%; }
.map-explorer--expanded .map-legend { flex-shrink: 0; padding-bottom: 12px; }
.map-explorer--expanded .map-shell { flex: 1; min-height: 120px; }
.map-explorer--expanded .interactive-map { height: 100%; }
.map-explorer--expanded .map-help { padding: 8px 16px max(8px, env(safe-area-inset-bottom)); font-size: .7rem; }
@media (max-width: 640px) {
  .map-dialog-header h2 { font-size: .85rem; }
  .map-explorer--expanded .map-actions label { display: none; }
  .map-explorer--expanded .map-actions__controls { flex-wrap: nowrap; }
  .map-explorer--expanded .map-actions select { flex-basis: auto; }
  .map-explorer--expanded .map-actions button { width: auto; }
  .map-explorer--expanded .map-legend { gap: 6px 10px; }
  .map-explorer--expanded .map-legend small { display: none; }
  .map-explorer--expanded .map-legend li { font-size: .75rem; align-items: center; }
  .map-explorer--expanded .map-legend img { width: 18px; height: 18px; flex-basis: 18px; }
}

/* Small preview stars keep nearby locations legible; expanded markers stay touch-friendly. */
.map-explorer:not(.map-explorer--expanded) .leaflet-marker-icon {
  width: 12px !important;
  height: 12px !important;
  margin-left: -6px !important;
  margin-top: -6px !important;
}