/* Aria Live Map — stile del blocco mappa.
 *
 * Gira dentro temi diversi (aptica-notizie su www, GeneratePress child dei
 * locali, notizie-it-v3 di milano): tutto è scoped su .aqm. Nessun web font,
 * nessuna immagine.
 *
 * Colori delle fasce: quelli ufficiali del viewer dell'indice europeo EEA
 * (airindex.eea.europa.eu), così chi confronta ritrova la stessa scala.
 */

.aqm {
	--aqm-bg: #fff;
	--aqm-ink: #1a1a1a;
	--aqm-mute: #6b7280;
	--aqm-line: #e5e7eb;
	--aqm-b1: #50f0e6;
	--aqm-b2: #50ccaa;
	--aqm-b3: #f0e641;
	--aqm-b4: #ff5050;
	--aqm-b5: #960032;
	--aqm-b6: #7d2181;
	--aqm-b0: #c4c8ce;

	box-sizing: border-box;
	max-width: 100%;
	margin: 1.75rem 0;
	padding: 1rem 1.1rem 0.85rem;
	background: var(--aqm-bg);
	border: 1px solid var(--aqm-line);
	border-radius: 10px;
	color: var(--aqm-ink);
	font-size: 15px;
	line-height: 1.45;
}

.aqm *, .aqm *::before, .aqm *::after { box-sizing: inherit; }

/* ── testata ─────────────────────────────────────────────────────── */

.aqm-head {
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--aqm-line);
}

.aqm-title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.2;
	font-weight: 700;
}

.aqm-sub {
	margin: 0.3rem 0 0;
	font-size: 0.82rem;
	color: var(--aqm-mute);
}

.aqm-when { white-space: nowrap; }

.aqm-sum { margin: 0.7rem 0 0; }

/* ── mappa ───────────────────────────────────────────────────────── */

.aqm-mapwrap {
	margin: 0.8rem auto 0.4rem;
	max-width: 460px;
}

.aqm-map {
	display: block;
	width: 100%;
	height: auto;
}

.aqm-reg {
	fill: #f3f4f6;
	stroke: #c9ced6;
	stroke-width: 0.7;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

/* Vista regionale: la regione del sito in chiaro, le vicine un passo indietro. */
.aqm-reg--on  { fill: #eef1f5; stroke: #8a93a0; stroke-width: 1.1; }
.aqm-reg--ctx { fill: #f7f7f8; stroke: #dde1e6; }

.aqm-pt {
	stroke: #ffffff;
	stroke-width: 0.9;
	vector-effect: non-scaling-stroke;
}

.aqm-b0 { fill: var(--aqm-b0); stroke: #ffffff; stroke-width: 0.6; }
.aqm-b1 { fill: var(--aqm-b1); }
.aqm-b2 { fill: var(--aqm-b2); }
.aqm-b3 { fill: var(--aqm-b3); }
.aqm-b4 { fill: var(--aqm-b4); }
.aqm-b5 { fill: var(--aqm-b5); }
.aqm-b6 { fill: var(--aqm-b6); }

/* Indice parziale: stesso colore, più tenue (come fa il viewer EEA). */
.aqm-pt.aqm-part { fill-opacity: 0.45; stroke: #8a93a0; }

/* Centraline delle regioni vicine nella vista regionale: contesto, non dato. */
.aqm-pt.aqm-out { opacity: 0.4; }

.aqm-pt:hover { stroke: var(--aqm-ink); stroke-width: 1.6; }

/* ── legenda ─────────────────────────────────────────────────────── */

.aqm-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.3rem 0.9rem;
	margin: 0.2rem 0 0.6rem;
	padding: 0;
	list-style: none;
	font-size: 0.8rem;
	color: var(--aqm-mute);
}

.aqm-legend li { display: inline-flex; align-items: center; gap: 0.35em; margin: 0; }

.aqm-sw, .aqm-mark {
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	border-radius: 50%;
	background: var(--aqm-b0);
}

.aqm-sw--1 { background: var(--aqm-b1); }
.aqm-sw--2 { background: var(--aqm-b2); }
.aqm-sw--3 { background: var(--aqm-b3); }
.aqm-sw--4 { background: var(--aqm-b4); }
.aqm-sw--5 { background: var(--aqm-b5); }
.aqm-sw--6 { background: var(--aqm-b6); }
.aqm-sw--part { background: var(--aqm-b2); opacity: 0.45; box-shadow: inset 0 0 0 1px #8a93a0; }

/* ── lacune ──────────────────────────────────────────────────────── */

.aqm-gaps {
	margin: 0.6rem 0 0;
	padding: 0.6rem 0.9rem;
	border-left: 4px solid #9ca3af;
	background: #f8fafc;
	font-size: 0.86rem;
}

.aqm-gaps-title { margin: 0 0 0.3rem; font-weight: 700; }
.aqm-gaps ul { margin: 0; padding-left: 1.1em; }
.aqm-gaps li { margin: 0 0 0.25rem; }
.aqm-gaps li:last-child { margin-bottom: 0; }

/* ── elenco ──────────────────────────────────────────────────────── */

.aqm-list-title { margin: 0.9rem 0 0.1rem; font-weight: 700; }

.aqm-list {
	margin: 0.2rem 0 0;
	padding: 0;
	list-style: none;
}

.aqm-item {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--aqm-line);
}

.aqm-item:last-child { border-bottom: 0; }

.aqm-mark { flex: 0 0 auto; }

.aqm-where { flex: 1 1 auto; min-width: 0; }
.aqm-place { margin-left: 0.4em; color: var(--aqm-mute); font-size: 0.88em; }

.aqm-val {
	flex: 0 1 48%;
	font-size: 0.85rem;
	color: var(--aqm-mute);
	text-align: right;
}

.aqm-val strong { color: var(--aqm-ink); margin-right: 0.3em; }

/* ── avvisi ──────────────────────────────────────────────────────── */

.aqm-notice {
	margin: 0.8rem 0 0;
	padding: 0.7rem 0.9rem;
	border-left: 4px solid #f59f00;
	background: #fff8e6;
	font-size: 0.92rem;
}

.aqm-notice[hidden] { display: none; }

/* Pagina servita dalla cache con misure ormai vecchie (lo decide il JS). */
.aqm--expired .aqm-notice--expired { display: block; }
.aqm--expired .aqm-pt { fill: var(--aqm-b0) !important; fill-opacity: 1 !important; }
.aqm--expired .aqm-sum,
.aqm--expired .aqm-list-title,
.aqm--expired .aqm-list { display: none !important; }

/* ── piede ───────────────────────────────────────────────────────── */

.aqm-foot {
	margin-top: 0.8rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--aqm-line);
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--aqm-mute);
}

.aqm-foot p { margin: 0 0 0.4rem; }
.aqm-foot p:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
	.aqm { padding: 0.85rem 0.85rem 0.7rem; font-size: 14px; }
	.aqm-item { flex-wrap: wrap; gap: 0.15rem 0.6rem; }
	.aqm-val { flex-basis: 100%; text-align: left; padding-left: 1.45em; }
	.aqm-when { white-space: normal; }
}

/* ── FAQ ─────────────────────────────────────────────────────────── */

.aqm-faq { margin: 2rem 0; }
.aqm-faq-title { font-size: 1.2rem; margin: 0 0 0.6rem; }
.aqm-faq-item { border-bottom: 1px solid #e5e7eb; padding: 0.55rem 0; }
.aqm-faq-item summary { cursor: pointer; font-weight: 600; }
.aqm-faq-item p { margin: 0.5rem 0 0.2rem; }