/* Allerta Meteo Emilia-Romagna
 * I colori arrivano dalle impostazioni come variabili CSS sul contenitore .amer;
 * i valori qui sotto sono solo il ripiego. */
.amer {
	--amer-bg: #2a3036;
	--amer-text: #fff;
	--amer-table-bg: #212529;
	--amer-border: #555e66;
	--amer-chip-bg: #343a40;
	--amer-waves: #6c6c6c;
	--amer-l0: #66cc00;
	--amer-l1: #ffdd00;
	--amer-l2: #ff9900;
	--amer-l3: #ff0000;
	--amer-nd: #d9d9d9;
	--amer-max: 1140px;
	--amer-logo-h: 30px;
	--amer-bg-overlay: 0;

	position: relative;
	container-type: inline-size;
	background-color: var(--amer-bg);
	color: var(--amer-text);
	font-family: "Titillium Web", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	padding: 36px 0;
	margin: 0 0 1.5rem;
	text-align: left;
}
.amer *, .amer *::before, .amer *::after { box-sizing: border-box; }

.amer--img {
	background-image: var(--amer-bg-img);
	background-size: cover;
	background-position: center;
}
.amer--img::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--amer-bg);
	opacity: var(--amer-bg-overlay);
	pointer-events: none;
}

.amer__inner {
	position: relative;
	max-width: var(--amer-max);
	margin: 0 auto;
	padding: 0 16px;
}

.amer__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* Titolo */
.amer__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: 1.625em;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0;
	border: 0;
}
.amer__title::before, .amer__title::after { content: none; }
.amer__logo {
	height: var(--amer-logo-h);
	width: auto;
	max-width: none;
	display: block;
	margin: 0;
}

/* Griglia: una colonna su mobile, tre su desktop */
.amer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}
@container (min-width: 720px) {
	.amer__grid { grid-template-columns: minmax(220px, 1fr) max-content; }
	.amer__side { grid-column: 1 / -1; }
}
@container (min-width: 1000px) {
	.amer__grid { grid-template-columns: minmax(230px, 1fr) max-content minmax(250px, 1fr); gap: 24px 32px; }
	.amer__side { grid-column: auto; }
}

/* Campana e livello */
.amer__bell { max-width: 240px; margin: 0 0 16px; }
.amer__bell svg { display: block; width: 100%; height: auto; }
.amer__level { margin: 0; font-size: 1.375em; font-weight: 600; line-height: 1.6; }
.amer__level-label { display: block; }
.amer__level-day {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	font-weight: 400;
	opacity: .85;
}
.amer__chip {
	display: inline-block;
	padding: 0 .375rem;
	background: var(--amer-chip-bg);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6;
}
.amer__chip.amer--l0 { color: var(--amer-l0); }
.amer__chip.amer--l1 { color: var(--amer-l1); }
.amer__chip.amer--l2 { color: var(--amer-l2); }
.amer__chip.amer--l3 { color: var(--amer-l3); }
.amer__chip.amer--nd { color: var(--amer-nd); }

/* Tabella */
.amer__tablewrap { overflow-x: auto; max-width: 100%; }
.amer__table {
	border-collapse: collapse;
	margin: 0;
	width: auto;
	background: var(--amer-table-bg);
	color: var(--amer-text);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	border: 1px solid var(--amer-border);
}
.amer__table th, .amer__table td {
	border: 1px solid var(--amer-border);
	padding: 4.5px 10px;
	text-align: center;
	vertical-align: middle;
	background: transparent;
	color: inherit;
	font-weight: 400;
	white-space: nowrap;
}
.amer__table tbody th { min-width: 180px; }
.amer__table thead th:first-child, .amer__table tbody th { padding-left: 20px; padding-right: 20px; }
.amer__table td.amer__cell { font-weight: 800; color: #000; }
.amer__table td.amer--l0 { background: var(--amer-l0); }
.amer__table td.amer--l1 { background: var(--amer-l1); }
.amer__table td.amer--l2 { background: var(--amer-l2); }
.amer__table td.amer--l3 { background: var(--amer-l3); color: #fff; }
.amer__table td.amer--nd { background: var(--amer-nd); font-weight: 400; }
.amer__inforow td { padding: 8px; }

/* Pulsanti e link */
.amer__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid transparent;
	border-radius: 0;
	font: inherit;
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
}
.amer__btn--primary {
	background: #0d6efd;
	border-color: #0d6efd;
	color: #fff;
	padding: 6.75px 13.5px;
	font-size: 18px;
}
.amer__btn--primary:hover, .amer__btn--primary:focus { background: #0b5ed7; border-color: #0a58ca; color: #fff; }
.amer__btn--dark {
	background: #212529;
	border-color: var(--amer-border);
	color: #d4d8da;
	padding: 4.5px 9px;
	font-size: 15.75px;
	margin-top: 8px;
}
.amer__btn--dark:hover, .amer__btn--dark:focus { color: #fff; border-color: #778088; text-decoration: none; }
.amer__btn:focus-visible, .amer__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.amer__side { font-size: 18px; }
.amer__meta { margin: 0 0 4px; line-height: 1.45; }
.amer__link {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: none;
	border: 0;
	padding: 0;
	color: #4d9bff;
	font: inherit;
	font-size: 15.75px;
	text-decoration: underline;
	cursor: pointer;
}
.amer__link svg { color: var(--amer-text); }

/* Finestre modali (elemento <dialog> nativo) */
.amer__dialog {
	width: min(500px, calc(100vw - 32px));
	max-height: calc(100vh - 64px);
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 6px;
	background: #fff;
	color: #1c2024;
	font-family: inherit;
	font-size: 17px;
	font-weight: 400;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
}
.amer__dialog::backdrop { background: rgba(0, 0, 0, .5); }
.amer__dialog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid #dee2e6;
}
.amer__dialog-head h3 { margin: 0; font-size: 20px; font-weight: 600; color: #55585b; text-transform: none; }
.amer__close {
	background: none;
	border: 0;
	font-size: 28px;
	line-height: 1;
	padding: 0 4px;
	color: #000;
	opacity: .6;
	cursor: pointer;
}
.amer__close:hover, .amer__close:focus { opacity: 1; }
.amer__dialog-body { padding: 16px 20px; overflow: auto; }
.amer__dialog-body p { margin: 0 0 .75em; }
.amer__small { font-size: .85em; color: #5b6470; }
.amer__zones { list-style: none; margin: 0; padding: 0; }
.amer__zones li { padding: 2px 6px; }
.amer__zones li.is-current { background: #fff3b0; font-weight: 600; }

/* Schermi stretti e sidebar */
@container (max-width: 520px) {
	.amer__table { width: 100%; font-size: 16px; }
	.amer__table tbody th { min-width: 0; white-space: normal; }
	.amer__table th, .amer__table td { padding: 4px 6px; }
	.amer__table thead th:first-child, .amer__table tbody th { padding-left: 8px; padding-right: 8px; }
	.amer__btn--primary { font-size: 15px; padding: 4px 10px; }
	.amer__bell { max-width: 200px; }
}

/* Widget in sidebar */
.widget .amer { padding: 20px 0; }
.widget .amer__table tbody th { min-width: 0; }