/* Allerte 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 .alm. Nessun web font,
 * nessuna immagine. Il passaggio oggi/domani è CSS puro: due radio prima del
 * corpo, e i selettori `~` cambiano colori ed elenco.
 *
 * Colori: la scala del bollettino DPC, con il giallo e l'arancione un po' più
 * distanti fra loro di quelli ufficiali (#f8f865 / #f0bf01), che su schermo si
 * confondono.
 */

.alm {
	--alm-bg: #fff;
	--alm-ink: #1a1a1a;
	--alm-mute: #6b7280;
	--alm-line: #e5e7eb;
	--alm-edge: #ffffff;
	--alm-verde: #9fd28f;
	--alm-gialla: #ffe14d;
	--alm-arancione: #f59f00;
	--alm-rossa: #e03131;
	--alm-na: #e5e7eb;

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

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

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

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

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

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

.alm-issued { margin-left: 0.25em; }

/* ── oggi / domani ───────────────────────────────────────────────── */

/* Fuori dallo schermo ma raggiungibili da tastiera: le label fanno da tab. */
.alm-pick {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.alm-tabs {
	display: flex;
	gap: 0.4rem;
	margin: 0.8rem 0 0.2rem;
}

.alm-tab {
	flex: 1 1 0;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--alm-line);
	border-radius: 6px;
	font-size: 0.88rem;
	font-weight: 600;
	text-align: center;
	color: var(--alm-mute);
	cursor: pointer;
}

.alm-pick-a:checked ~ .alm-tabs .alm-tab-a,
.alm-pick-b:checked ~ .alm-tabs .alm-tab-b {
	border-color: var(--alm-ink);
	color: var(--alm-ink);
	background: #f8fafc;
}

.alm-pick-a:focus-visible ~ .alm-tabs .alm-tab-a,
.alm-pick-b:focus-visible ~ .alm-tabs .alm-tab-b {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.alm-day {
	margin: 0.8rem 0 0.2rem;
	font-weight: 700;
}

/* Vista b nascosta finché non si sceglie «domani». */
.alm-body .alm-b { display: none; }
.alm-pick-b:checked ~ .alm-body .alm-a { display: none; }
.alm-pick-b:checked ~ .alm-body .alm-b { display: block; }

.alm-sum { margin: 0.6rem 0 0; }

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

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

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

.alm-z {
	fill: var(--alm-verde);
	stroke: var(--alm-edge);
	stroke-width: 0.6;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.alm-z[data-a="gialla"]    { fill: var(--alm-gialla); }
.alm-z[data-a="arancione"] { fill: var(--alm-arancione); }
.alm-z[data-a="rossa"]     { fill: var(--alm-rossa); }
.alm-z[data-a="na"]        { fill: var(--alm-na); }

.alm-pick-b:checked ~ .alm-body .alm-z                     { fill: var(--alm-verde); }
.alm-pick-b:checked ~ .alm-body .alm-z[data-b="gialla"]    { fill: var(--alm-gialla); }
.alm-pick-b:checked ~ .alm-body .alm-z[data-b="arancione"] { fill: var(--alm-arancione); }
.alm-pick-b:checked ~ .alm-body .alm-z[data-b="rossa"]     { fill: var(--alm-rossa); }
.alm-pick-b:checked ~ .alm-body .alm-z[data-b="na"]        { fill: var(--alm-na); }

.alm-z:hover { stroke: var(--alm-ink); stroke-width: 1.2; }

.alm-z[data-a="na"] { stroke: #cbd5e1; }

/* Regioni vicine nella vista regionale: sagoma, non dato. */
.alm-ctx {
	fill: #f3f4f6;
	stroke: #d1d5db;
	stroke-width: 0.6;
	vector-effect: non-scaling-stroke;
}

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

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

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

.alm-sw, .alm-mark {
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	border-radius: 2px;
	background: var(--alm-verde);
}

.alm-sw--gialla,    .alm-item--gialla .alm-mark    { background: var(--alm-gialla); }
.alm-sw--arancione, .alm-item--arancione .alm-mark { background: var(--alm-arancione); }
.alm-sw--rossa,     .alm-item--rossa .alm-mark     { background: var(--alm-rossa); }

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

.alm-list {
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
}

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

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

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

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

.alm-risk {
	flex: 0 1 45%;
	font-size: 0.85rem;
	color: var(--alm-mute);
	text-align: right;
}

.alm-empty, .alm-pending {
	margin: 0.8rem 0 0;
	padding: 0.7rem 0.9rem;
	border-radius: 6px;
	font-size: 0.9rem;
}

.alm-empty   { background: #f1f8f2; color: #2b6a34; }
.alm-pending { background: #f8fafc; color: var(--alm-mute); }

/* ── bollettino scaduto ──────────────────────────────────────────── */

.alm-notice {
	margin: 0.8rem 0 0;
	padding: 0.7rem 0.9rem;
	border-left: 4px solid var(--alm-arancione);
	background: #fff8e6;
	font-size: 0.92rem;
}

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

/* Pagina servita dalla cache dopo che il bollettino è scaduto (lo decide il JS). */
.alm--expired .alm-notice--expired { display: block; }
.alm--expired .alm-z { fill: var(--alm-na) !important; }
.alm--expired .alm-tabs,
.alm--expired .alm-day,
.alm--expired .alm-sum,
.alm--expired .alm-list,
.alm--expired .alm-empty,
.alm--expired .alm-pending { display: none !important; }

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

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

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

@media (max-width: 480px) {
	.alm { padding: 0.85rem 0.85rem 0.7rem; font-size: 14px; }
	.alm-item { flex-wrap: wrap; gap: 0.15rem 0.6rem; }
	.alm-risk { flex-basis: 100%; text-align: left; padding-left: 1.45em; }
	.alm-tab { font-size: 0.8rem; }
}

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

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