/*
 * Mappa interattiva (nz-map.js). Foglio a parte come strumenti.css, token con prefisso
 * --nzm-: un override del tema (--nz-mode-*) continua a valere. I colori dei marker e della
 * linea arrivano da assets/map-style.json (carta-osm/theme.json), non da qui.
 */

.nzm {
  --nzm-fg: var(--nz-mode-fg, #1a3152);
  --nzm-muted: var(--nz-mode-muted, #3f5a85);
  --nzm-surface: var(--nz-mode-surface, #ffffff);
  --nzm-line: var(--nz-mode-line, rgb(26 49 82 / 0.15));
  --nzm-accent: var(--nz-mode-accent, #99114c);

  position: relative;
  margin: 0 0 1.5rem;
  color: var(--nzm-fg);
}

.nzm *,
.nzm *::before,
.nzm *::after {
  box-sizing: border-box;
}

/* Riquadro: l'immagine statica lo dimensiona (width/height dal PHP, niente CLS), il canvas gli si sovrappone e
 * la copre solo quando i tile sono pronti (nzm--ready): fino ad allora l'immagine fa da segnaposto. */
.nzm-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--nzm-line);
  border-radius: 0.75rem;
  background: var(--nzm-surface);
}

.nzm-fb {
  display: block;
  width: 100%;
  height: auto;
}

/* `.nzm .nzm-map`: piu' specifico di `.maplibregl-map { position: relative }`, che arriva dopo. */
.nzm .nzm-map {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.nzm--ready .nzm-map {
  visibility: visible;
}

.nzm--ready .nzm-fb,
.nzm--ready .nzm-dots {
  visibility: hidden;
}

/* Punti dei marker sopra l'immagine statica (Map::dots_svg(), stesso viewBox dell'immagine): alto quanto
 * l'immagine per il suo rapporto. */
.nzm-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* Stessi colori dei pin di nz-map.js (map-style.json, nz:tokens): accent pieno per `default`, anello
 * secondaryText per `indicative`, primaryText per `secondary`. La carta resta chiara in terra e in mare. */
.nzm-dot {
  fill: #821a34;
  stroke: #ffffff;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.nzm-dot--indicative {
  fill: #ffffff;
  stroke: #607887;
}

.nzm-dot--secondary {
  fill: #092748;
}

.nzm-pin:focus-visible {
  outline: 3px solid var(--nzm-fg);
  outline-offset: 2px;
}

/* Nota di stato (solo l'errore «Mappa interattiva non disponibile»): sopra l'immagine, dentro il riquadro, cosi'
 * comparendo non sposta la pagina. Senza JavaScript la nota di <noscript> sta sotto, nel flusso. */
.nzm-frame .nzm-note {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  left: 0.75rem;
  max-width: calc(100% - 1.5rem);
  margin: 0;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--nzm-line);
  border-radius: 0.375rem;
  background: var(--nzm-surface);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.nzm-note {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
}

.nzm-note:empty {
  display: none;
}

/* A mappa pronta la nota resta solo per i lettori di schermo. */
.nzm--ready .nzm-note {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nzm-cap {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--nzm-muted);
}

.nzm-cap a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Marker: pulsante circolare, il colore (--c) lo imposta il JS dai token del tema. */
.nzm-pin {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: var(--c, currentColor);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
  cursor: pointer;
}

/* Posizione indicativa: anello vuoto, piu' piccolo del pin pieno (stesso codice dei punti statici). */
.nzm-pin--indicative {
  width: 18px;
  height: 18px;
  background: #ffffff;
  border-color: var(--c, currentColor);
}

.nzm-pop {
  display: grid;
  gap: 0.2rem;
  color: var(--nzm-fg);
  font-size: 0.875rem;
}

.nzm-pop small {
  color: var(--nzm-muted);
}

.nzm-pop a {
  color: var(--nzm-accent);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .nzm *,
  .nzm *::before,
  .nzm *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Stampa: il canvas WebGL non stampa in modo affidabile, resta l'immagine statica con i punti. */
@media print {
  .nzm-map {
    display: none;
  }

  .nzm--ready .nzm-fb,
  .nzm--ready .nzm-dots {
    visibility: visible;
  }
}

/*
 * Popup (designer round 2, N2): il font del DS anche nel popup del portolano, che prendeva
 * «Helvetica Neue» da MapLibre, e la chiusura «×» con un bersaglio da 44 px sul touch
 * (prima 7x20 px). Vale per tutte le mappe che usano questo componente.
 */
.nzm .maplibregl-popup-content {
  font-family: var(--nz-font-body, "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif);
}

.nzm .maplibregl-popup-close-button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--nzm-fg);
}