/* /css/page-map.css — Leaflet + swisstopo map module styles
   Loaded on contact.html only, AFTER page-contact.css, BEFORE cookieconsent.css.
   Phase 10: replaces decorative .mapcard SVG with a real WMTS map.
   All tokens sourced from base.css :root — no new colors, no new fonts. */

/* ------------------------------------------------------------
   1. Map container — fills the existing .mapcard wrapper
   ------------------------------------------------------------ */
.map {
  position: absolute;
  inset: 0;
  background: var(--bg);
}

/* ------------------------------------------------------------
   2. Skip-map link — visually-hidden-focusable
      Mirrors .skip-link in base.css. UI-SPEC § Component Inventory.
      B-3 fix: focus position is top: 4rem (NOT 1rem) so it does NOT
      collide with the global .skip-link in base.css:147 which uses
      top: 1rem; left: 1rem on focus. The 4rem offset stacks the two
      bypass links vertically when a keyboard user has tabbed past
      .skip-link and onto .skip-map.
   ------------------------------------------------------------ */
.skip-map {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-map:focus,
.skip-map:focus-visible {
  position: absolute;
  left: 1rem;
  top: 4rem;             /* B-3 fix: clears base.css .skip-link:focus (top: 1rem) */
  width: auto;
  height: auto;
  background: var(--accent);
  color: var(--bg);
  padding: .5rem 1rem;
  border-radius: .4rem;
  font-weight: 600;
  font-size: .875rem;
  z-index: 100;
}

/* ------------------------------------------------------------
   3. Branded divIcon marker — pulsing dot + caption pill
      Migrated + adapted from page-contact.css .pin .dot / .pin .tag
   ------------------------------------------------------------ */
.map-marker {
  position: relative;
  width: .85rem;
  height: .85rem;
}
.map-marker-dot {
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: 50%;
  box-shadow:
    0 0 0 6px  color-mix(in oklab, var(--accent) 25%, transparent),
    0 0 0 14px color-mix(in oklab, var(--accent) 10%, transparent);
  animation: pulse-pin 2.4s ease-out infinite;
}
.map-marker-caption {
  position: absolute;
  left: 50%;
  top: calc(100% + .75rem);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--bg-2);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line));
  padding: .25rem .75rem;
  border-radius: .35rem;
  white-space: nowrap;
}

@keyframes pulse-pin {
  0%, 100% { box-shadow: 0 0 0 6px  color-mix(in oklab, var(--accent) 25%, transparent), 0 0 0 14px color-mix(in oklab, var(--accent) 10%, transparent); }
  50%      { box-shadow: 0 0 0 10px color-mix(in oklab, var(--accent) 15%, transparent), 0 0 0 22px color-mix(in oklab, var(--accent) 0%,  transparent); }
}

/* ------------------------------------------------------------
   4. .mapact "Open in Maps" button — MIGRATED from page-contact.css
      Note: WCAG 2.5.5 minimum touch target raised to 44px (2.75rem) per
      RESEARCH § Open Questions item 7 + UI-SPEC line 161.
   ------------------------------------------------------------ */
.mapact {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .5rem .75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: .35rem;
  background: var(--bg-2);
  color: var(--fg);
  transition: all .15s;
}
.mapact:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ------------------------------------------------------------
   5. Failover notice — hidden until tile-error threshold reached.
      JS removes the [hidden] attribute and sets #map { display:none }.
      .mapact inside this block REUSES the rule above (no duplication).
   ------------------------------------------------------------ */
.map-fallback {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  position: relative;
  min-height: 22rem;
}
.map-fallback[hidden] {
  display: none;
}
.map-fallback-msg {
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--fg-dim);
}

/* ------------------------------------------------------------
   6. Leaflet UI overrides — zoom controls + attribution
      WCAG 2.5.5 floor on zoom buttons: 44px (2.75rem).
   ------------------------------------------------------------ */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--fg);
  border-radius: .35rem;
  width: 2.75rem;
  height: 2.75rem;
  line-height: 2.75rem;
  font-size: 1.125rem;
}
.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.leaflet-control-attribution {
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .04em;
  padding: .25rem .5rem;
}
.leaflet-control-attribution a { color: var(--fg-dim); }
.leaflet-control-attribution a:hover { color: var(--accent); }

/* ------------------------------------------------------------
   7. prefers-reduced-motion — D-10-19 belt-and-suspenders.
      JS also disables Leaflet zoom/fade/marker animations.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .map-marker-dot { animation: none; }
}