/* ==================================================================
   Stournaras — dual-location map
   ------------------------------------------------------------------
   Replaces the single light Google iframe on Location + Contact with
   one dark Leaflet map carrying a pin for each Aspropyrgos site.
   Leaflet itself is fetched on demand by stournaras-map.js.
   Tokens come from stournaras-base.css; the fallbacks keep the map
   readable if that sheet ever fails to load.
   ================================================================== */

.map-wrap { position: relative; }

.stn-map {
  position: absolute;
  inset: 0;
  min-height: 440px;
  border-radius: inherit;
  background: var(--bg-2, #131a17);
  z-index: 0;
}

.stn-map.leaflet-container {
  font-family: var(--font-body, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  background: var(--bg-2, #131a17);
  outline: none;
}

/* Raw OSM tiles are light, and there is no keyless dark raster basemap left
   (CARTO watermarks unkeyed tiles, Esri has no data here). So invert them and
   spin the hue back, which keeps land and water in their real relationship.
   Contrast is pulled DOWN, not up: inversion already turns the brightest
   features (roads, labels) into the darkest ones, and crushing it further
   flattens the whole map to black. Scoped to the tile pane, so markers,
   popups and controls keep their real colours. */
.stn-map .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(1.02) contrast(.78) saturate(.18);
}

/* ---------- Pins ---------- */

.stn-pin { display: block; background: none; border: 0; }
.stn-pin svg { display: block; width: 34px; height: 46px; overflow: visible; }
.stn-pin__halo { fill: #000; opacity: .35; }
.stn-pin__body {
  fill: var(--green, #21a84a);
  stroke: var(--on-green, #06110a);
  stroke-width: 1.5;
  transition: fill var(--dur, .25s) var(--ease, cubic-bezier(.2,.7,.2,1));
}
.stn-pin__dot { fill: var(--on-green, #06110a); }

.leaflet-marker-icon:hover .stn-pin__body,
.leaflet-marker-icon:focus-visible .stn-pin__body,
.leaflet-marker-icon.is-active .stn-pin__body { fill: var(--green-bright, #3ad06a); }

.leaflet-marker-icon:focus-visible {
  outline: 2px solid var(--green-bright, #3ad06a);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Popups ---------- */

.stn-map .leaflet-popup-content-wrapper {
  padding: 0;
  background: #101614;
  color: var(--text, #eef2ef);
  border: 1px solid var(--line-strong, rgba(255,255,255,.18));
  border-radius: var(--r-card, 14px);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.stn-map .leaflet-popup-content {
  margin: 0;
  padding: 16px 18px 16px;
  width: auto !important;
  min-width: 196px;
}
.stn-map .leaflet-popup-tip { background: #101614; box-shadow: none; }
.stn-map .leaflet-popup-close-button {
  width: 26px; height: 26px;
  padding: 5px 0 0;
  color: var(--faint, #6f7c75);
  font-size: 18px;
}
.stn-map .leaflet-popup-close-button:hover { color: var(--text, #eef2ef); background: transparent; }

.stn-pop__eyebrow {
  margin: 0 0 7px;
  font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-bright, #3ad06a);
}
.stn-pop__title {
  margin: 0 0 7px;
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--text-heading, #fff);
}
.stn-pop__addr {
  margin: 0 0 13px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted, #9aa5a0);
}
/* Scoped under .stn-map on purpose. Leaflet ships `.leaflet-container a`
   (specificity 0,0,1,1) and its stylesheet is injected after this one, so a
   bare `.stn-pop__link` (0,0,1,0) lost and the label rendered in Leaflet's
   link blue on green — unreadable at rest, and only legible on hover because
   `:hover` happened to out-specify it. Two classes settle it for good. */
.stn-map .stn-pop__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: var(--r-btn, 8px);
  background: var(--green, #21a84a);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--dur, .25s) var(--ease, cubic-bezier(.2,.7,.2,1));
}
/* White label, so hover goes DARKER rather than brighter — on green-bright the
   white would wash out instead of gaining contrast. */
.stn-map .stn-pop__link:hover,
.stn-map .stn-pop__link:focus-visible { background: var(--green-deep, #0e5c2c); color: #fff; }
.stn-map .stn-pop__link svg { width: 13px; height: 13px; flex: none; }

/* ---------- Controls & attribution ---------- */

.stn-map .leaflet-bar {
  border: 1px solid var(--line-strong, rgba(255,255,255,.18));
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.stn-map .leaflet-bar a {
  width: 32px; height: 32px; line-height: 32px;
  background: #101614;
  color: var(--text, #eef2ef);
  border-bottom-color: var(--line, rgba(255,255,255,.09));
}
.stn-map .leaflet-bar a:hover,
.stn-map .leaflet-bar a:focus-visible { background: #18211d; color: var(--green-bright, #3ad06a); }
.stn-map .leaflet-bar a.leaflet-disabled { background: #0c1210; color: var(--faint, #6f7c75); }

.stn-map .leaflet-control-attribution {
  background: rgba(10,15,13,.82);
  color: var(--faint, #6f7c75);
  font-size: 10px;
  padding: 2px 7px;
}
.stn-map .leaflet-control-attribution a { color: var(--muted, #9aa5a0); }
.stn-map .leaflet-control-attribution a:hover { color: var(--green-bright, #3ad06a); }

/* ---------- Site switcher ---------- */

.stn-map__legend {
  position: absolute;
  left: 14px;
  bottom: 30px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}
.stn-map__legend button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px 8px 11px;
  border: 1px solid var(--line-strong, rgba(255,255,255,.18));
  border-radius: var(--r-pill, 100px);
  background: rgba(10,15,13,.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text, #eef2ef);
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur, .25s) var(--ease, cubic-bezier(.2,.7,.2,1)),
              color var(--dur, .25s) var(--ease, cubic-bezier(.2,.7,.2,1));
}
.stn-map__legend button::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green, #21a84a);
  flex: none;
}
.stn-map__legend button:hover,
.stn-map__legend button:focus-visible,
.stn-map__legend button[aria-pressed="true"] {
  border-color: var(--green, #21a84a);
  color: var(--green-bright, #3ad06a);
}
.stn-map__legend button[aria-pressed="true"]::before { background: var(--green-bright, #3ad06a); }

/* ---------- Scroll-zoom hint ---------- */

.stn-map__hint {
  position: absolute;
  inset: 0;
  z-index: 600;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10,15,13,.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: var(--text, #eef2ef);
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur, .25s) var(--ease, cubic-bezier(.2,.7,.2,1));
}
.map-wrap.is-hinting .stn-map__hint { opacity: 1; }

/* ---------- No-JS / offline fallback ---------- */

.stn-map__fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 30px;
  background: var(--bg-2, #131a17);
}
.stn-map__fallback p {
  margin: 0;
  color: var(--muted, #9aa5a0);
  font-size: 14px;
  line-height: 1.55;
}
.map-wrap .stn-map__fallback a {
  color: var(--green-bright, #3ad06a);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* ---------- Full-bleed map section ---------- */

/* .map-full pulls the map edge to edge (see stournaras-fixes.css), so the
   inherited .section--tight bottom padding reads as a black band between the
   map and the footer rather than as breathing room. Two classes to out-specify
   .section--tight; the top padding stays, since that gap does separate the map
   from the content above it. */
.section.map-full { padding-bottom: 0; }

/* ---------- Motion & small screens ---------- */

@media (prefers-reduced-motion: reduce) {
  .stn-pin__body,
  .stn-pop__link,
  .stn-map__legend button,
  .stn-map__hint { transition: none; }
}

@media (max-width: 640px) {
  .stn-map__legend { left: 10px; bottom: 26px; gap: 6px; }
  .stn-map__legend button { padding: 7px 11px 7px 9px; font-size: 10px; letter-spacing: .08em; }
  .stn-map .leaflet-popup-content { padding: 14px 15px; min-width: 168px; }
}