/*
 * Stile della mappa «Dove andare a…», preso dal mockup della home V4 (home-dovevado.html,
 * p19, modulo 1): palette dal logo (blu notte, ruggine, lime), Bricolage Grotesque per i
 * titoli, Figtree per il resto. I colori sono variabili su .dv-ms: se il kit di Elementor
 * li espone con altri nomi, basta cambiare le righe qui sotto. La geometria (scena, tela,
 * pallini, etichette) è la meccanica e conviene lasciarla com'è.
 */
.dv-ms {
	--dv-ms-ink: #002336;        /* blu notte del logo: pannello, tab attivo, pulsante */
	--dv-ms-ink-soft: #44596a;   /* testo secondario */
	--dv-ms-testo: #1f2f3a;
	--dv-ms-rust: #a04d1c;       /* ruggine: occhiello, mese nel titolo, pallini accesi */
	--dv-ms-lime: #b6bf0e;       /* lime del mosaico: evidenza sul pannello scuro, sagome accese */
	--dv-ms-lime-tenue: #6f8540; /* sagoma in stagione solo per il clima «buono» */
	--dv-ms-paper: #ffffff;
	--dv-ms-cream: #f6f5ee;
	--dv-ms-line: #e4e2d6;
	--dv-ms-on-soft: #a9b6bd;    /* testo tenue sul pannello scuro */
	--dv-ms-terra: #2b4b5f;      /* i continenti sul pannello */
	--dv-ms-punto-spento: #7d939d;
	--dv-ms-radius: 12px;
	--dv-ms-tap: 44px;
	--dv-ms-font: "Figtree", system-ui, sans-serif;
	--dv-ms-display: "Bricolage Grotesque", "Figtree", sans-serif;
	--dv-ms-goccia: polygon(50% 100%, 0 38%, 8% 14%, 28% 0, 72% 0, 92% 14%, 100% 38%);
	color: var(--dv-ms-testo);
	font-family: var(--dv-ms-font);
	font-size: 17px;
	line-height: 1.55;
	max-width: 1200px;
	margin: 0 auto;
	container-type: inline-size; /* le regole @container qui sotto guardano la larghezza della sezione, non dello schermo */
}
.dv-ms *, .dv-ms *::before, .dv-ms *::after { box-sizing: border-box; }
.dv-ms :focus-visible { outline: 2px solid var(--dv-ms-ink); outline-offset: 3px; border-radius: 4px; }

/* testa: occhiello con la goccia, titolo con il mese in ruggine */
.dv-ms__testa { margin: 0 0 24px; }
.dv-ms__occhiello { display: flex; align-items: center; gap: 9px; font: 650 14px/1.2 var(--dv-ms-font); color: var(--dv-ms-rust); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 8px; }
.dv-ms__occhiello::before { content: ""; width: 9px; height: 12px; background: var(--dv-ms-rust); clip-path: var(--dv-ms-goccia); }
.dv-ms__titolo { font: 700 32px/1.12 var(--dv-ms-display); letter-spacing: -.01em; margin: 0; color: var(--dv-ms-ink); }
.dv-ms__titolo em { font-style: normal; color: var(--dv-ms-rust); }

/* tab: quattro stagioni sopra, dodici mesi sotto, allineati per colonna */
.dv-ms__tasti { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin: 0 0 24px; }
.dv-ms__tasto { min-height: var(--dv-ms-tap); border: 1.5px solid var(--dv-ms-line); background: var(--dv-ms-paper); border-radius: 10px; font: 650 15px var(--dv-ms-font); color: var(--dv-ms-ink); cursor: pointer; padding: 0 4px; transition: background .12s, color .12s, border-color .12s; }
.dv-ms__tasto:hover { border-color: var(--dv-ms-ink); }
.dv-ms__tasto--stagione { grid-column: span 3; }
.dv-ms__tasto.attivo { background: var(--dv-ms-ink); color: #fff; border-color: var(--dv-ms-ink); }
.dv-ms__tasto.mezzo { border-color: var(--dv-ms-rust); color: var(--dv-ms-rust); }

/* corpo: pannello a sinistra, elenco a destra */
.dv-ms__corpo { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 28px; align-items: start; }

/* il pannello blu notte con il planisfero e la legenda */
.dv-ms__pannello { background: var(--dv-ms-ink); border-radius: var(--dv-ms-radius); padding: 18px 18px 12px; color: #fff; min-width: 0; }
.dv-ms__scena { position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 1.85; min-width: 0; background: var(--dv-ms-ink); }
.dv-ms__tela { position: absolute; left: var(--tela-l, 0%); top: var(--tela-t, 0%); width: var(--tela-w, 100%); aspect-ratio: 1312 / 686; transform-origin: 0 0; transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.dv-ms__tela > svg { display: block; width: 100%; height: auto; }
/* le sagome (solo con [dv_mappa_stagioni_paesi]): piena se il mese è forte, tenue se è solo clima buono */
.dv-ms__terra { fill: var(--dv-ms-terra); stroke: var(--dv-ms-ink); stroke-width: .7; vector-effect: non-scaling-stroke; transition: fill .18s; }
.dv-ms__regione { stroke-width: .5; }
.dv-ms__terra.acceso { fill: var(--dv-ms-lime); }
.dv-ms__terra.acceso.tenue { fill: var(--dv-ms-lime-tenue); }
.dv-ms__terra.selezionata { fill: #fff; }
.dv-ms__inquadra { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; background: rgba(0, 35, 54, .85); border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; padding: 2px; }
.dv-ms__inquadra button { appearance: none; border: 0; background: transparent; color: var(--dv-ms-on-soft); font: 600 12px/1 var(--dv-ms-font); padding: 6px 9px; border-radius: 6px; cursor: pointer; }
.dv-ms__inquadra button.attivo { background: var(--dv-ms-paper); color: var(--dv-ms-ink); }
.dv-ms__legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 12px 0 0; font-size: 14px; color: var(--dv-ms-on-soft); }
.dv-ms__legenda span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.dv-ms__chiave { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.dv-ms__chiave--acceso { background: var(--dv-ms-rust); box-shadow: 0 0 0 2px #fff inset; }
.dv-ms__chiave--spento { background: var(--dv-ms-punto-spento); }
.dv-ms__chiave--sagoma { border-radius: 3px; background: var(--dv-ms-lime); }
.dv-ms__chiave--sagoma-tenue { border-radius: 3px; background: var(--dv-ms-lime-tenue); }

/* pallini: --d è il diametro; --punto-scala compensa lo zoom della tela */
.dv-ms__punto { --d: 7px; position: absolute; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; background: var(--dv-ms-punto-spento); transform: scale(var(--punto-scala, 1)); z-index: 1; text-decoration: none; transition: background .18s, box-shadow .18s, transform .45s cubic-bezier(.22, .61, .36, 1); }
.dv-ms__punto::before { content: ""; position: absolute; inset: -11px; }
.dv-ms__punto.in-stagione { --d: 12px; background: var(--dv-ms-rust); box-shadow: 0 0 0 1.5px #fff, 0 0 0 7px rgba(160, 77, 28, .3); z-index: 2; }
.dv-ms__punto.scelto { --d: 15px; z-index: 3; }
.dv-ms__punto:hover, .dv-ms__punto:focus { --d: 15px; box-shadow: 0 0 0 1.5px #fff; z-index: 5; outline: 0; }
.dv-ms__punto.in-stagione:hover, .dv-ms__punto.in-stagione:focus { box-shadow: 0 0 0 1.5px #fff, 0 0 0 7px rgba(160, 77, 28, .3); }
.dv-ms__punto.selezionato { --d: 17px; background: #fff; box-shadow: 0 0 0 2px var(--dv-ms-rust), 0 0 0 9px rgba(160, 77, 28, .3); z-index: 6; }

/* etichette: visibili sui tre scelti e al passaggio; lime sul selezionato */
.dv-ms__etichetta { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); display: none; white-space: nowrap; pointer-events: none; background: var(--dv-ms-paper); color: var(--dv-ms-ink); border-radius: 999px; padding: 4px 10px; font: 700 12.5px/1.2 var(--dv-ms-display); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.dv-ms__etichetta.sotto { bottom: auto; top: calc(100% + 8px); }
.dv-ms--js .dv-ms__punto.scelto:not(.selezionato) .dv-ms__etichetta,
.dv-ms--js .dv-ms__punto:hover:not(.selezionato) .dv-ms__etichetta,
.dv-ms--js .dv-ms__punto:focus:not(.selezionato) .dv-ms__etichetta { display: block; }
/* mentre un posto è selezionato le tre etichette fisse si nascondono: resta solo la sua */
.dv-ms--js.dv-ms--sel .dv-ms__punto.scelto:not(.selezionato):not(:hover) .dv-ms__etichetta { display: none; }
.dv-ms__punto.selezionato .dv-ms__etichetta { display: inline-flex; background: var(--dv-ms-lime); color: var(--dv-ms-ink); padding: 6px 12px; bottom: calc(100% + 12px); }
.dv-ms__punto.selezionato .dv-ms__etichetta::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--dv-ms-lime); }
.dv-ms__punto.selezionato .dv-ms__etichetta.sotto { bottom: auto; top: calc(100% + 12px); }
.dv-ms__punto.selezionato .dv-ms__etichetta.sotto::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--dv-ms-lime); }

/* elenco a destra: conteggio, voci con temperatura e motivi, pulsante alla guida */
.dv-ms__lato { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dv-ms__conteggio { margin: 0; font-size: 15px; color: var(--dv-ms-ink-soft); }
.dv-ms__conteggio b { color: var(--dv-ms-ink); font: 700 22px/1 var(--dv-ms-display); }
.dv-ms__elenco { max-height: 430px; overflow: auto; scrollbar-width: thin; border-top: 1px solid #d9d6c6; }
.dv-ms__voce { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; padding: 10px 0 9px; border-bottom: 1px solid #d9d6c6; }
.dv-ms__voce.corrente, .dv-ms__voce:hover { background: var(--dv-ms-paper); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; }
.dv-ms__voce-nome { font: 700 17px/1.3 var(--dv-ms-display); color: var(--dv-ms-ink); text-decoration: none; }
.dv-ms__voce-nome:hover { text-decoration: underline; text-decoration-color: var(--dv-ms-rust); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dv-ms__voce-temp { font: 650 14px/1 var(--dv-ms-font); color: var(--dv-ms-rust); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-ms__motivi { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.dv-ms__motivi li { font-weight: 600; line-height: 1.4; font-size: 15px; min-width: 0; max-width: 100%; }
.dv-ms__motivi a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--dv-ms-ink); text-decoration: underline; text-decoration-color: var(--dv-ms-rust); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.dv-ms__motivi a:hover { color: var(--dv-ms-rust); }
.dv-ms__altri { font-size: 12px; color: var(--dv-ms-ink-soft); padding: 1px 7px; border: 1px solid var(--dv-ms-line); border-radius: 999px; white-space: nowrap; }
.dv-ms__vuoto { margin: 0; padding: 14px 0; color: var(--dv-ms-ink-soft); font-size: 16px; }
.dv-ms__guida { align-self: flex-start; display: inline-flex; align-items: center; min-height: 48px; padding: 12px 22px; border-radius: 999px; background: var(--dv-ms-ink); color: #fff; text-decoration: none; font: 650 16px/1.2 var(--dv-ms-font); }
.dv-ms__guida:hover { background: #0b3a52; color: #fff; }
.dv-ms__guida[hidden] { display: none; }

/*
 * Difese contro il tema. Il template V4 di Elementor colora in ruggine e sottolinea ogni
 * <a> del contenuto, mette 2em sopra ogni h2 e un margine sotto ogni p, con selettori più
 * specifici di qualsiasi classe singola (body.elementor-page-N .elementor-element-X a).
 * Qui si ribadisce il necessario con !important: la mappa è un widget chiuso e i suoi
 * link, titolo e paragrafi non sono testo corrente.
 */
.dv-ms h2.dv-ms__titolo { margin: 0 !important; color: var(--dv-ms-ink) !important; font: 700 32px/1.12 var(--dv-ms-display) !important; letter-spacing: -.01em !important; } /* il kit (.elementor-kit-N h2) lo vuole grigio, 48px e col suo peso */
.dv-ms h2.dv-ms__titolo em { color: var(--dv-ms-rust) !important; font-style: normal !important; }
/* il reset del tema colora di magenta ogni button:hover e button:focus (#c36 con testo bianco) */
.dv-ms button.dv-ms__tasto:hover, .dv-ms button.dv-ms__tasto:focus { background: var(--dv-ms-paper) !important; color: var(--dv-ms-ink) !important; border-color: var(--dv-ms-ink) !important; }
.dv-ms button.dv-ms__tasto.mezzo:hover, .dv-ms button.dv-ms__tasto.mezzo:focus { color: var(--dv-ms-rust) !important; border-color: var(--dv-ms-rust) !important; }
.dv-ms button.dv-ms__tasto.attivo, .dv-ms button.dv-ms__tasto.attivo:hover, .dv-ms button.dv-ms__tasto.attivo:focus { background: var(--dv-ms-ink) !important; color: #fff !important; border-color: var(--dv-ms-ink) !important; }
.dv-ms .dv-ms__inquadra button:hover, .dv-ms .dv-ms__inquadra button:focus { background: transparent !important; color: #fff !important; }
.dv-ms .dv-ms__inquadra button.attivo, .dv-ms .dv-ms__inquadra button.attivo:hover, .dv-ms .dv-ms__inquadra button.attivo:focus { background: var(--dv-ms-paper) !important; color: var(--dv-ms-ink) !important; }
.dv-ms p.dv-ms__occhiello { margin: 0 0 8px !important; }
.dv-ms p.dv-ms__conteggio { margin: 0 !important; }
.dv-ms p.dv-ms__legenda { margin: 12px 0 0 !important; }
.dv-ms p.dv-ms__vuoto { margin: 0 !important; padding: 14px 0; }
.dv-ms ul.dv-ms__motivi { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.dv-ms a.dv-ms__punto, .dv-ms a.dv-ms__voce-nome, .dv-ms a.dv-ms__guida { text-decoration: none !important; }
.dv-ms a.dv-ms__voce-nome { color: var(--dv-ms-ink) !important; }
.dv-ms a.dv-ms__voce-nome:hover { text-decoration: underline !important; text-decoration-color: var(--dv-ms-rust) !important; }
.dv-ms a.dv-ms__guida, .dv-ms a.dv-ms__guida:hover { color: #fff !important; }
.dv-ms .dv-ms__motivi a { color: var(--dv-ms-ink) !important; text-decoration: underline !important; text-decoration-color: var(--dv-ms-rust) !important; }
.dv-ms .dv-ms__motivi a:hover { color: var(--dv-ms-rust) !important; }

/* sezione stretta (sotto gli 820 px di contenitore, non di schermo): tab scorrevoli, pannello a
   tutta larghezza, elenco in colonna. Vale sul telefono e dentro una colonna di testo. */
@container (max-width: 820px) {
	.dv-ms__corpo { grid-template-columns: 1fr; gap: 18px; }
	.dv-ms__pannello { padding: 12px 10px 10px; }
	.dv-ms__scena { aspect-ratio: 1.35; }
	.dv-ms__elenco { max-height: min(60vh, 520px); border-bottom: 1px solid #d9d6c6; } /* 48 voci in colonna farebbero 2.400 px di pagina */
	.dv-ms__voce.corrente { background: var(--dv-ms-cream); }
}
/* sezione molto stretta: i sedici tab non ci stanno in griglia, diventano una striscia che scorre */
@container (max-width: 600px) {
	.dv-ms__tasti { display: flex; overflow-x: auto; gap: 6px; margin-bottom: 18px; padding-bottom: 6px; scrollbar-width: none; }
	.dv-ms__tasti::-webkit-scrollbar { display: none; }
	.dv-ms__tasto { flex: none; padding: 0 14px; }
	.dv-ms__tasto--stagione { order: -1; }
}
/* telefono vero: testo un filo più piccolo e il pannello che esce dai margini dello schermo */
@media (max-width: 820px) {
	.dv-ms { font-size: 16px; }
	.dv-ms__tasti { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
	.dv-ms__pannello { margin: 0 -16px; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.dv-ms * { transition: none !important; }
}