/**
 * Nome File: assets/front.css
 * Versione: 1.1.0.0
 * Log Modifiche:
 * - 1.1.0.0: Interruttore acceso/spento per ogni avviso, acceso di serie: da spento
 *            l'avviso resta in archivio ma non viene stampato. Gli avvisi si stampano
 *            ora sotto il menu Meteo/Giochi/Almanacco, attaccati ai bannerini gia'
 *            presenti nella colonna, invece che sopra a tutto.
 * - 1.0.0.0: Prima versione.
 * Descrizione: Aspetto dei bannerini degli avvisi in testa alle colonne. La forma della
 *              scheda arriva dal foglio del tema (sn-mini-link): qui ci sono solo la
 *              variante avviso, i colori scelti nella scheda, il lampeggio e la
 *              finestrella del testo lungo.
 * Dipendenze Esterne: Font Awesome 6 per le icone (caricato dal tema).
 */

/*
 * Lo stesso passo del gruppo dei bannerini (sn-mini-stack / sn-mini-affianca):
 * cosi' gli avvisi si attaccano a quelli gia' presenti invece di restare staccati.
 */
.sn-avvisi-stack {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 8px;
}

@media (min-width: 768px) {
	.sn-avvisi-stack {
		gap: 12px;
		margin-bottom: 12px;
	}
}

.sn-avviso-riquadro {
	min-width: 0;
}

/* Variante avviso: stessa forma delle altre schede, colori decisi in redazione. */
.sn-mini-link.sn-avviso {
	border-left-color: var(--sn-av-linee, #F97316);
}

.sn-mini-link.sn-avviso .sn-mini-link__cal--avviso {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	border-color: var(--sn-av-linee, #F97316);
	background: #fff;
}

.sn-mini-link.sn-avviso .sn-mini-link__cal--avviso i {
	color: var(--sn-av-linee, #F97316);
	font-size: 16px;
	line-height: 1;
}

.sn-mini-link.sn-avviso .sn-mini-link__tit {
	color: var(--sn-av-testo, #0a5278);
}

.sn-mini-link.sn-avviso .sn-avviso__et {
	color: var(--sn-av-linee, #F97316);
}

.sn-mini-link.sn-avviso .sn-mini-ticker__testo,
.sn-mini-link.sn-avviso .sn-avviso__sub {
	color: var(--sn-av-testo, #0a5278);
	opacity: .85;
}

.sn-mini-link.sn-avviso .sn-mini-link__go {
	color: var(--sn-av-linee, #F97316);
}

/* Lampeggio: tre battiti e basta, una volta sola per visita. */
@keyframes sn-avviso-lampeggia {
	0%, 100% { box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
	50%      { box-shadow: 0 0 0 3px var(--sn-av-linee, #F97316); }
}

.sn-mini-link.sn-avviso.is-lampeggia {
	animation: sn-avviso-lampeggia .55s ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
	.sn-mini-link.sn-avviso.is-lampeggia {
		animation: none;
	}
}

/* Finestrella del testo lungo. */
.sn-avviso-modale {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.sn-avviso-modale[hidden] {
	display: none;
}

.sn-avviso-modale__sfondo {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .55);
}

.sn-avviso-modale__scatola {
	position: relative;
	width: min(560px, 100%);
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 12px;
	border-top: 5px solid var(--sn-av-linee, #F97316);
	box-shadow: 0 18px 50px rgba(15, 23, 42, .35);
	overflow: hidden;
}

.sn-avviso-modale__testa {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px 8px;
}

.sn-avviso-modale__tit,
.sn-avviso-testo__tit {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--sn-av-testo, #0a5278);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sn-avviso-modale__x {
	flex: none;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: #94a3b8;
	cursor: pointer;
	padding: 0 2px;
}

.sn-avviso-modale__corpo {
	padding: 0 16px 18px;
	overflow-y: auto;
	font-size: 14.5px;
	line-height: 1.55;
	color: #334155;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sn-avviso-modale__corpo p {
	margin: 0 0 10px;
}

.sn-avviso-modale__corpo p:last-child {
	margin-bottom: 0;
}

.sn-avviso-modale__corpo a {
	color: #0a5278;
	font-weight: 700;
}

body.sn-avviso-aperto {
	overflow: hidden;
}