/**
 * HI Header Top Ticker.
 *
 * Il ticker sta in un elemento HTML dell'Header Builder (.w-html), non in un
 * elemento Testo: gli stili che il tema dava a text:8 / .hi-topbar-msg non lo
 * raggiungono, quindi pallino, peso, colore e spaziatura li dichiara qui il plugin.
 * Dal tema arrivano solo famiglia e dimensione del font (Onest 12.5px) e il fondo
 * della barra.
 *
 * Il pallino e' un figlio del root, non un ::before del wrapper Impreza: la
 * dissolvenza tocca solo __msg, cosi' il pallino resta fermo mentre il testo cambia.
 *
 * Misure in px: il rem di Impreza cambia sotto i 1280px.
 */

.hi-header-top-ticker {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	max-width: 100%;
	color: var(--color-hig-hover-bianco);
	font-weight: 600;
	letter-spacing: -.005em;
	line-height: 1.2;
}

/* Pallino 6x6: decorativo, fuori dall'area che sfuma. */
.hi-header-top-ticker__dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-hig-accento-chiaro);
}

.hi-header-top-ticker__msg {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: opacity .5s ease;
}

.hi-header-top-ticker.is-fading .hi-header-top-ticker__msg {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hi-header-top-ticker__msg {
		transition: none;
	}
}

/* Il wrapper Impreza deve poter restringersi, altrimenti il messaggio non si tronca. */
.l-subheader.at_top .w-html:has(.hi-header-top-ticker) {
	min-width: 0;
	max-width: 100%;
}

/* Spazio tra messaggio (sinistra) e contatti (destra). */
.l-subheader.at_top .l-subheader-h {
	gap: 24px;
}