/* ============================================
   Map Styles
   Desaturated, ink-wash aesthetic
   ============================================ */

.map-page {
  max-width: var(--max-width);
  margin: 0 auto;
}

.map-container {
  height: 70vh;
  min-height: 400px;
  max-height: 800px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--ink-ghost),
    0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Desaturate map tiles for ink-wash aesthetic */
.map-container .leaflet-tile-pane {
  filter: grayscale(100%) contrast(0.9) brightness(1.05);
}

/* Custom marker style */
.sumi-marker {
  background: var(--ink-dark);
  border: 2px solid var(--paper);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform var(--transition-medium);
  cursor: pointer;
}

.sumi-marker:hover {
  transform: scale(1.3);
}

/* Filtered marker state (retained for legacy usage; year filter now toggles layer presence) */
.sumi-marker.filtered {
  opacity: 0.2;
  pointer-events: none;
}

/* Polyline (simplified trip route) */
.map-container .sumi-trail {
  cursor: pointer;
  transition: stroke-width 150ms ease, stroke-opacity 150ms ease;
}
.map-container .sumi-trail:hover {
  stroke-width: 5;
  stroke-opacity: 1;
}

/* Popup styling */
.leaflet-popup-content-wrapper {
  background: var(--paper);
  border-radius: 2px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  font-family: var(--font-body);
  padding: 0;
}

.leaflet-popup-content {
  margin: var(--space-md);
  font-size: var(--text-sm);
}

.leaflet-popup-tip {
  background: var(--paper);
}

.map-popup__title {
  font-size: var(--text-base);
  font-weight: 400;
  margin: 0 0 var(--space-xs);
}

.map-popup__title a {
  color: var(--ink-black);
  text-decoration: none;
}

.map-popup__title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent-red);
}

.map-popup__meta {
  font-size: var(--text-xs);
  color: var(--ink-light);
  margin: 0;
}

.map-popup__region {
  color: var(--accent-warm);
}

/* Leaflet control styling */
.map-container .leaflet-control-attribution {
  font-size: var(--text-xs);
  color: var(--ink-light);
  background: rgba(250, 249, 247, 0.85) !important;
}

.map-container .leaflet-control-attribution a {
  color: var(--ink-medium);
}

.map-container .leaflet-control-zoom a {
  background: var(--paper) !important;
  color: var(--ink-dark) !important;
  border: 1px solid var(--ink-ghost) !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 28px !important;
  font-size: var(--text-base) !important;
}

.map-container .leaflet-control-zoom a:hover {
  background: var(--paper-aged) !important;
}

/* Hide default zoom control separator */
.map-container .leaflet-control-zoom-in {
  border-bottom: 1px solid var(--ink-ghost) !important;
}

/* Responsive */
@media (max-width: 768px) {
  .map-container {
    height: 60vh;
    min-height: 300px;
  }
}