/* Mappa sede 0.5 — disegnata e scura di partenza; data-tema="chiaro" o "auto".
 * Per adattarla al sito, in Aspetto → Personalizza → CSS aggiuntivo (o nelle opzioni del tema):
 *   .mappa-sede { --ms-raggio: 4px; --ms-raggio-scheda: 0; --ms-accento: #DFFF00; --ms-accento-testo: #000; }
 * Il nome usa il carattere dei titoli del sito (è un h3), il resto il carattere del testo. */

.mappa-sede {
  --ms-fondo: #0e0f11;
  --ms-scheda: rgba(20, 21, 24, .78);
  --ms-bordo: rgba(255, 255, 255, .12);
  --ms-testo: #f4f4f5;
  --ms-tenue: #a1a1aa;
  --ms-accento: #f4f4f5;
  --ms-accento-testo: #0e0f11;
  --ms-segno: #f4f4f5;
  --ms-raggio: 16px;
  --ms-raggio-scheda: 12px;
  position: relative;
  margin: 0;
  height: var(--mappa-sede-altezza, 420px);
  border-radius: var(--ms-raggio);
  overflow: hidden;
  background: var(--ms-fondo);
  border: 1px solid var(--ms-bordo);
  font-family: inherit;
  color: var(--ms-testo);
  isolation: isolate;
}

.mappa-sede[data-tema="chiaro"] {
  --ms-fondo: #f2f2f0;
  --ms-scheda: rgba(255, 255, 255, .82);
  --ms-bordo: rgba(0, 0, 0, .1);
  --ms-testo: #18181b;
  --ms-tenue: #52525b;
  --ms-accento: #18181b;
  --ms-accento-testo: #ffffff;
  --ms-segno: #18181b;
}

@media (prefers-color-scheme: light) {
  .mappa-sede[data-tema="auto"] {
    --ms-fondo: #f2f2f0;
    --ms-scheda: rgba(255, 255, 255, .82);
    --ms-bordo: rgba(0, 0, 0, .1);
    --ms-testo: #18181b;
    --ms-tenue: #52525b;
    --ms-accento: #18181b;
    --ms-accento-testo: #ffffff;
    --ms-segno: #18181b;
  }
}

/* Bordi netti: la mappa a piena larghezza, senza angoli e senza filo */
.mappa-sede[data-bordi="netti"] {
  border-radius: 0;
  border: 0;
}

/* L'area che si trascina. In verticale il dito scorre la pagina, non la mappa */
.mappa-sede__mappa {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.mappa-sede__mappa.presa { cursor: grabbing; }
.mappa-sede__mappa:focus-visible { outline: 2px solid var(--ms-accento); outline-offset: -4px; }

.mappa-sede__tessere img {
  position: absolute;
  left: 0;
  top: 0;
  width: 256px;
  height: 256px;
  max-width: none;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.mappa-sede__tessere img.pronta { opacity: 1; }

/* Senza chiave CARTO le tessere sono quelle chiare di OpenStreetMap: scure si fanno invertendo i colori */
.mappa-sede--scura[data-chiave=""] .mappa-sede__tessere {
  filter: invert(1) hue-rotate(180deg) grayscale(.75) brightness(.85) contrast(.9);
}
.mappa-sede:not(.mappa-sede--scura)[data-chiave=""] .mappa-sede__tessere {
  filter: grayscale(.6) contrast(.95);
}

/* Il segnaposto: un punto con un alone che pulsa */
.mappa-sede__segnaposto {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  display: none;
  pointer-events: none;
}
.mappa-sede--attiva .mappa-sede__segnaposto { display: block; }
.mappa-sede__segnaposto::before,
.mappa-sede__segnaposto span {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.mappa-sede__segnaposto span {
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  background: var(--ms-segno);
  border: 3px solid var(--ms-fondo);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.mappa-sede__segnaposto::before {
  left: -22px;
  top: -22px;
  width: 44px;
  height: 44px;
  background: var(--ms-segno);
  opacity: .18;
  animation: mappa-sede-alone 2.4s ease-out infinite;
}
@keyframes mappa-sede-alone {
  from { transform: scale(.4); opacity: .35; }
  to   { transform: scale(1.4); opacity: 0; }
}

/* La scheda con nome, indirizzo e indicazioni */
.mappa-sede__scheda {
  position: absolute;
  left: 16px;
  bottom: 16px;
  max-width: calc(100% - 32px);
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border-radius: var(--ms-raggio-scheda);
  background: var(--ms-scheda);
  border: 1px solid var(--ms-bordo);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  transition: transform .3s ease, box-shadow .3s ease;
  z-index: 2;
}
.mappa-sede__scheda:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0, 0, 0, .3); }
.mappa-sede .mappa-sede__nome {
  margin: 0;
  padding: 0;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ms-testo);
}
.mappa-sede__indirizzo { font-size: 14px; line-height: 1.4; }
.mappa-sede__coordinate { font-size: 12px; color: var(--ms-tenue); font-variant-numeric: tabular-nums; }
.mappa-sede .mappa-sede__indicazioni:not(.mappa-sede__indicazioni--sito) {
  align-self: flex-start;
  margin-top: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--ms-accento);
  color: var(--ms-accento-testo);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: opacity .2s ease;
}
.mappa-sede .mappa-sede__indicazioni:not(.mappa-sede__indicazioni--sito):hover { opacity: .85; color: var(--ms-accento-testo); }
.mappa-sede .mappa-sede__indicazioni:focus-visible { outline: 2px solid var(--ms-accento); outline-offset: 3px; }

/* Con la classe del pulsante del sito (Divi: et_pb_button) il plugin non lo disegna: lo fa il tema */
.mappa-sede .mappa-sede__indicazioni--sito { align-self: flex-start; margin-top: 10px; }

/* + e − */
.mappa-sede__zoom {
  position: absolute;
  top: 16px;
  right: 16px;
  display: none;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ms-scheda);
  border: 1px solid var(--ms-bordo);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  z-index: 2;
}
.mappa-sede--attiva .mappa-sede__zoom { display: flex; }
.mappa-sede__zoom button {
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ms-testo);
  font: 400 20px/1 system-ui, sans-serif;
  cursor: pointer;
}
.mappa-sede__zoom button + button { border-top: 1px solid var(--ms-bordo); }
.mappa-sede__zoom button:hover { background: var(--ms-bordo); }

/* Prima del consenso */
.mappa-sede__attesa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px;
  text-align: right;
  font-size: 13px;
  color: var(--ms-tenue);
  cursor: default;
}
.mappa-sede__attesa[hidden] { display: none; }
.mappa-sede__attesa p { margin: 0; max-width: 300px; }
.mappa-sede__mostra {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--ms-bordo);
  background: var(--ms-scheda);
  color: var(--ms-testo);
  font: inherit;
  cursor: pointer;
}

.mappa-sede__crediti {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--ms-tenue);
  z-index: 2;
}
.mappa-sede__crediti a { color: inherit; text-decoration: none; }
.mappa-sede__crediti a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .mappa-sede__scheda { left: 10px; right: 10px; bottom: 22px; width: auto; max-width: none; }
  .mappa-sede__attesa { align-items: center; justify-content: center; text-align: center; padding-bottom: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .mappa-sede__segnaposto::before { animation: none; opacity: .2; }
  .mappa-sede__scheda, .mappa-sede__tessere img { transition: none; }
}

/* ------------------------------------------------------------------ il disegno
 * LA MAPPA DISEGNATA (0.4, 0.5): i due SVG di dev/disegna_zona.py, computer e telefono.
 * Nel disegno non ci sono colori: li danno queste variabili, scure di partenza.
 * Il giallo è solo del segnaposto (il colore di Limbo); per un altro sito:
 *   .mappa-sede { --ms-d-segno: #fff; --ms-d-segno-testo: #000; }
 * I nomi usano --ms-d-carattere (di partenza quello del testo del sito). */
.mappa-sede {
  --ms-d-carattere: inherit;
  --ms-d-fondo: #0d0d0d;
  --ms-d-parco: #131710;
  --ms-d-acqua: #1d262c;
  --ms-d-minore: #232323;
  --ms-d-media: #333;
  --ms-d-grande: #444;
  --ms-d-principale: #d9d9d9;
  --ms-d-ferrovia: #4d4d4d;
  --ms-d-nome: #a3a3a3;
  --ms-d-zona: #6f6f6f;
  --ms-d-punto: #ffffff;
  --ms-d-segno: #dfff00;
  --ms-d-segno-testo: #000;
}
.mappa-sede[data-tema="chiaro"] {
  --ms-d-fondo: #efeee8;
  --ms-d-parco: #e1e3d6;
  --ms-d-acqua: #cdd6d9;
  --ms-d-minore: #fff;
  --ms-d-media: #fff;
  --ms-d-grande: #fff;
  --ms-d-principale: #000;
  --ms-d-ferrovia: #8a8a8a;
  --ms-d-nome: #4a4a4a;
  --ms-d-zona: #9a9a92;
  --ms-d-punto: #000;
  --ms-d-segno: #000;
  --ms-d-segno-testo: #dfff00;
}
@media (prefers-color-scheme: light) {
  .mappa-sede[data-tema="auto"] {
    --ms-d-fondo: #efeee8;
    --ms-d-parco: #e1e3d6;
    --ms-d-acqua: #cdd6d9;
    --ms-d-minore: #fff;
    --ms-d-media: #fff;
    --ms-d-grande: #fff;
    --ms-d-principale: #000;
    --ms-d-ferrovia: #8a8a8a;
    --ms-d-nome: #4a4a4a;
    --ms-d-zona: #9a9a92;
    --ms-d-punto: #000;
    --ms-d-segno: #000;
    --ms-d-segno-testo: #dfff00;
  }
}
.mappa-sede[data-mappa="disegno"] { background: var(--ms-d-fondo); }
.mappa-sede[data-mappa="disegno"] .mappa-sede__mappa { cursor: default; touch-action: auto; }
.mappa-sede__disegno { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.mappa-sede__disegno--stretto { display: none; }
.mappa-sede__disegno text { font-family: var(--ms-d-carattere); }
.ms-d-fondo { fill: var(--ms-d-fondo); }
.ms-d-parco { fill: var(--ms-d-parco); }
.ms-d-acqua { fill: none; stroke: var(--ms-d-acqua); stroke-linecap: round; }
.ms-d-via, .ms-d-principale, .ms-d-ferrovia { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ms-d-via--minore { stroke: var(--ms-d-minore); }
.ms-d-via--media { stroke: var(--ms-d-media); }
.ms-d-via--grande { stroke: var(--ms-d-grande); }
.ms-d-principale { stroke: var(--ms-d-principale); }
.ms-d-ferrovia { stroke: var(--ms-d-ferrovia); stroke-linecap: butt; }
/* i nomi con un contorno del colore del fondo: si leggono anche sopra le vie (lo spessore lo scrive il disegno, in metri) */
.ms-d-nomi, .ms-d-punti, .ms-d-zone { paint-order: stroke; stroke: var(--ms-d-fondo); stroke-linejoin: round; }
.ms-d-nomi { fill: var(--ms-d-nome); font-weight: 600; }
.ms-d-zone { fill: var(--ms-d-zona); font-weight: 700; }
.ms-d-punti { fill: var(--ms-d-punto); font-weight: 700; }
.ms-d-segno-fondo, .ms-d-segno-asta { fill: var(--ms-d-segno); }
.ms-d-segno-punto { fill: var(--ms-d-segno); stroke: var(--ms-d-fondo); stroke-width: 3; }
.ms-d-segno-testo { fill: var(--ms-d-segno-testo); font-weight: 700; }
@media (max-width: 600px) {
  .mappa-sede__disegno--largo { display: none; }
  .mappa-sede__disegno--stretto { display: block; }
}