/* ========== Life Map (REAL-WORLD map — Leaflet) ==========
   Replaces the old pixel-bitmap map styles.
   In css/style.css, swap the old "Life Map (pixel travel map)" block
   (everything from that comment to the end of the file) for this one,
   OR keep it as a separate file and <link> it after style.css.        */

.life-page {
  --map-sea:  #cfe3ec;   /* shown while tiles load (light) */
}
.life-page[data-theme="dark"] {
  --map-sea:  #18243a;   /* shown while tiles load (dark) */
}

/* colour legend above the map */
.life-map-legend {
  display: flex;
  gap: 1.1rem;
  margin: 0.2rem 0 0.6rem;
  font-family: 'VT323', monospace;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}
.life-map-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
/* same pixel teardrop SVG as the map markers (injected by lifemap.js) */
.life-map-legend-dot {
  display: inline-block;
  width: 11px;
  line-height: 0;
  color: currentColor;
}
.life-map-legend-dot .life-map-pin-svg { width: 100%; height: auto; }
.life-map-legend-item--lived  { color: var(--pin-lived); }
.life-map-legend-item--travel { color: var(--pin-travel); }

/* inline pins (red + blue) used in the "click 📍 to open the journal" hint */
.life-map-pin-inline {
  display: inline-block;
  width: 10px;
  line-height: 0;
  transform: translateY(2px);   /* sit on the text baseline */
}
.life-map-pin-inline + .life-map-pin-inline { margin-left: 2px; }
.life-map-pin-inline--lived  { color: var(--pin-lived); }
.life-map-pin-inline--travel { color: var(--pin-travel); }
.life-map-pin-inline .life-map-pin-svg { width: 100%; height: auto; }

/* frame holds the Leaflet map; keep the pixel border + drop shadow */
.life-map-frame {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0.5rem auto 0;
  aspect-ratio: 2 / 1;
  background: var(--map-sea);
  border: 3px solid var(--color-border);
  box-shadow: 6px 6px 0 var(--color-border);
  overflow: hidden;
  z-index: 0;            /* keep below fixed nav / theme toggle */
}
.life-map-frame.edit-mode { cursor: crosshair; }

/* "Use Ctrl + scroll to zoom" overlay — flashed on a plain (no-modifier) wheel */
.life-map-zoom-hint {
  position: absolute;
  inset: 0;
  z-index: 500;            /* above tiles, below popups + controls */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;    /* never block map interaction */
  background: rgba(20, 24, 34, 0.45);
  color: #fff;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  text-align: center;
  padding: 0 1rem;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.life-map-zoom-hint.visible { opacity: 1; }

/* the Leaflet root must fill the frame */
.life-map-frame .leaflet-container {
  width: 100%;
  height: 100%;
  background: var(--map-sea);
  font-family: 'VT323', monospace;
}

/* ---- pixel teardrop markers (Leaflet divIcon) ---- */
/* container is a zero-size point at the exact lat/lng; the drop's TIP sits on it */
.life-map-divicon { width: 0 !important; height: 0 !important; overflow: visible; }

/* marker colours by type: lived = warm rose-red, travel = blue */
.life-page {
  --pin-lived:  #c27a7a;   /* places I've lived  (red)  */
  --pin-travel: #5a8fc2;   /* places I've travelled to (blue) */
}

.life-map-pin-drop {
  position: absolute;
  left: 0; top: 0;
  width: 15px;            /* small pixel pin — bump to 18px if you want it bigger */
  color: var(--pin-travel);
  filter: drop-shadow(1px 1px 0 var(--color-surface));
  cursor: pointer;
  animation: life-pin-bob 1.8s ease-in-out infinite;
}
.life-map-divicon--lived  .life-map-pin-drop { color: var(--pin-lived); }
.life-map-divicon--travel .life-map-pin-drop { color: var(--pin-travel); }
.life-map-pin-svg { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.life-map-pin-svg .hole { fill: var(--color-surface); }
.life-map-divicon:hover .life-map-pin-drop { color: var(--color-primary); }

.life-map-pin-label {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, calc(-100% - 22px));
  font-size: 0.8rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  padding: 0 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.life-map-divicon:hover .life-map-pin-label { opacity: 1; }

/* tip of the teardrop is at the bottom-center, so anchor there */
@keyframes life-pin-bob {
  0%, 100% { transform: translate(-50%, -100%); }
  50%      { transform: translate(-50%, calc(-100% - 2px)); }
}

/* ---- pixel popups (override Leaflet's rounded card) ---- */
.life-map-leaflet-popup .leaflet-popup-content-wrapper {
  background: var(--color-surface);
  color: var(--color-text);
  border: 3px solid var(--color-primary);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--color-border);
  font-family: 'VT323', monospace;
}
.life-map-leaflet-popup .leaflet-popup-content {
  margin: 0.6rem 0.7rem 0.7rem;
  line-height: 1.25;
}
.life-map-leaflet-popup .leaflet-popup-tip {
  background: var(--color-surface);
  border: 3px solid var(--color-primary);
  box-shadow: none;
  border-radius: 0;
}
.life-map-leaflet-popup a.leaflet-popup-close-button {
  color: var(--color-text-muted);
  font-size: 1.2rem;
  padding: 4px 6px 0 0;
}
.life-map-leaflet-popup a.leaflet-popup-close-button:hover { color: var(--color-accent); }

.life-map-popup-title {
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: 0.2rem;
}
.life-map-popup-text {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.3;
}
.life-map-popup-img { margin-bottom: 0.4rem; }
.life-map-popup-img img {
  display: block;
  width: 100%;
  border: 2px solid var(--color-border);
}

/* ---- pixel zoom control + attribution ---- */
.life-map-frame .leaflet-control-zoom a {
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-border);
  border-radius: 0;
  font-family: 'VT323', monospace;
}
.life-map-frame .leaflet-control-zoom a:hover {
  background: var(--color-bg-alt, var(--color-surface));
  color: var(--color-accent);
}
.life-map-frame .leaflet-control-attribution {
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: 'VT323', monospace;
  font-size: 0.7rem;
}
.life-map-frame .leaflet-control-attribution a { color: var(--color-primary); }

@media (max-width: 600px) {
  .life-map-pin-drop { width: 13px; }
}