/**
 * File:	/meteo-bollettino.css
 * @package css
 * @author  Rino Andriano
 * -----
 * Widget bollettino meteo Alto Adige (SIAG) - tema Hoferhof.
 * Stampato da [hoferhof_meteo] / hoferhof_meteo_widget(); JS: js/meteo-bollettino.js.
 * Caricato solo dove il widget compare (enqueue on-demand dallo shortcode).
 * -----
 */

.mta-widget,
.mta-source {
	--mta-primary: #395337;
	--mta-accent: #7f223d;
	--mta-secondary: #3a7423;
	--mta-bg: #ffffff;
	--mta-border: #dde4d8;
	--mta-text: #282828;
}

.mta-widget {
	max-width: 1100px;
	margin: 24px auto;
	background: var(--mta-bg);
	color: var(--mta-text);
	border: 1px solid var(--mta-border);
	border-radius: 8px;
	padding: 24px;
	font-family: inherit;
	line-height: 1.5;
}

.mta-head {
	border-bottom: 3px solid var(--mta-accent);
	padding-bottom: 12px;
	margin-bottom: 20px;
}

.mta-head .mta-title {
	font-family: inherit;
	color: var(--mta-primary);
	font-size: clamp(1.375rem, 1.15rem + 0.75vw, 1.625rem); /* 22px → 26px, fluido come gli heading del tema */
	margin: 0;
}

/* Flex (non grid): il blocco .mta-next a tutta riga impedirebbe ad auto-fit di
   collassare le tracce vuote, lasciando le card aggregate a sinistra. Con flex
   la coppia di card resta centrata nello spazio del widget. */
.mta-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}

.mta-caption {
	font-size: 1rem;
	font-weight: 700;
	color: var(--mta-primary);
	margin: 0 0 10px;
}

.mta-caption .mta-headline {
	color: var(--mta-accent);
}

.mta-next .mta-caption {
	text-align: center;
}

.mta-map {
	display: block;
	width: 100%;
	max-width: 480px;
	height: auto;
	margin: 0 auto 12px;
	border: 1px solid var(--mta-border);
	border-radius: 4px;
}

/* Immagine remota mai riuscita dopo i retry (installImgRetry): niente segnaposto rotto. */
.mta-img-failed {
	display: none;
}

.mta-sub {
	font-size: 1rem;
	font-weight: 700;
	color: var(--mta-primary);
	margin: 14px 0 4px;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.mta-day {
	flex: 1 1 320px;
	max-width: 480px; /* agganciato alla larghezza della mappa */
}

.mta-day p {
	margin: 0 0 8px;
	font-size: 1rem;
}

.mta-municipal {
	/* Sezione comune incorporata: separazione dal bollettino, allineato al gap della griglia */
	margin-top: 24px;
}

/* Stessa logica di .mta-grid: riga unica su PC, wrap su overflow, sempre centrata. */
.mta-municipal-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.mta-municipal-card {
	flex: 0 1 160px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 1px solid var(--mta-border);
	border-radius: 8px;
	background: var(--mta-bg);
	padding: 12px;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.mta-municipal-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
}

.mta-municipal-icon {
	width: 40px;
	height: 40px;
}

.mta-municipal-head .mta-caption {
	margin: 0;
}

.mta-municipal-head .mta-when {
	display: block;
	font-weight: 700;
	color: var(--mta-primary);
}

.mta-municipal-head .mta-date {
	display: block;
	font-weight: 400;
	font-size: 1rem;
	color: var(--mta-text);
}

.mta-municipal-details {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 1rem;
}

.mta-municipal-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	position: relative;
}

/* Icone FA delle info: stesso set di glifi del sito pubblico
   (thermometer-half, tint, sun outline = "special-sun-o"). */
.mta-municipal-row .mta-ico {
	color: var(--mta-primary);
	font-size: 1rem;
	line-height: 1;
	flex: 0 0 auto;
	align-self: center;
}

.mta-municipal-iconwrap {
	display: inline-block;
	line-height: 0;
	position: relative;
}

/* Tooltip CSS-only (data-tip): variante a tema dei title nativi usati dal sito
   pubblico. Touch: nessun hover, i valori con unità restano auto-esplicativi.
   Usato da righe info e icona giorno (wrapper span: i pseudo-elementi non
   funzionano su <img>). */
.mta-municipal-row::after,
.mta-municipal-row::before,
.mta-municipal-iconwrap::after,
.mta-municipal-iconwrap::before {
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(3px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
	z-index: 20;
}

.mta-municipal-row::after,
.mta-municipal-iconwrap::after {
	content: attr(data-tip);
	bottom: calc(100% + 8px);
	background: var(--mta-text);
	color: #ffffff;
	font-size: 0.75rem;
	line-height: 1.3;
	padding: 5px 9px;
	border-radius: 4px;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.mta-municipal-row::before,
.mta-municipal-iconwrap::before {
	content: "";
	bottom: calc(100% + 3px);
	border: 5px solid transparent;
	border-top-color: var(--mta-text);
}

.mta-municipal-row:hover::after,
.mta-municipal-row:hover::before,
.mta-municipal-row:focus-visible::after,
.mta-municipal-row:focus-visible::before,
.mta-municipal-iconwrap:hover::after,
.mta-municipal-iconwrap:hover::before {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.mta-municipal-row .mta-municipal-min {
	color: var(--mta-secondary);
	font-weight: 700;
}

.mta-municipal-row .mta-municipal-max {
	color: var(--mta-accent);
	font-weight: 700;
}

.mta-sep {
	color: #6f7a6d;
}

.mta-next {
	flex: 0 0 100%;
}

.mta-table {
	width: 100%;
	max-width: 640px;
	border-collapse: collapse;
	margin: 12px auto 4px;
	text-align: center;
}

.mta-table th,
.mta-table td {
	border: 1px solid var(--mta-border);
	padding: 6px 8px;
	font-size: 1rem;
}

.mta-table thead th {
	background: var(--mta-primary);
	color: #ffffff;
	font-weight: 700;
	white-space: nowrap;
}

.mta-table .mta-icons img {
	width: 44px;
	height: 44px;
	display: inline-block;
}

.mta-table .mta-temps span {
	display: block;
	white-space: nowrap;
}

.mta-table .mta-temps .mta-max {
	color: var(--mta-accent);
	font-weight: 700;
}

.mta-table .mta-temps .mta-min {
	color: var(--mta-secondary);
}

.mta-table tfoot td {
	font-size: 0.8125rem;
	color: #6f7a6d;
	background: #f1f4ee;
}

.mta-hint {
	font-size: 0.75rem;
	color: #6f7a6d;
	margin: 2px 0 10px;
	text-align: center;
}

.mta-evolution {
	white-space: pre-line;
	max-width: 70ch;
	margin: 8px 0 0;
	/* Testo previsioni: unificato a 1rem (prima ereditava il corpo pagina, ~20.4px). */
	font-size: 1rem;
}

.mta-source {
	max-width: 1100px;
	margin: 12px auto 0;
	font-size: 0.75rem;
	color: #6f7a6d;
}

.mta-source a {
	color: var(--mta-accent);
}

.mta-loading,
.mta-error {
	padding: 24px 0;
	text-align: center;
	font-size: 1rem;
}

.mta-error {
	color: var(--mta-accent);
}

@media (max-width: 600px) {
	.mta-widget {
		padding: 16px;
	}

	.mta-table .mta-icons img {
		width: 32px;
		height: 32px;
	}
}