/**
 * BBG News Ticker — frontend styles
 * Tema scuro con separatori verticali tra i blocchi. Tutti i colori/misure
 * principali sono variabili CSS: puoi sovrascriverle da tema/child-theme o
 * dal widget Elementor senza toccare questo file.
 */
.bbg-nt {
	--bbg-nt-accent: var(--e-global-color-primary, var(--wp--preset--color--primary, #5b62e0));
	--bbg-nt-bg: #292929;
	--bbg-nt-text: #ffffff;
	--bbg-nt-border: rgba(255, 255, 255, 0.16);
	--bbg-nt-hover: #d6cfc7;
	--bbg-nt-font-size: 13px;
	--bbg-nt-height: 32px;
	--bbg-nt-gap: 16px;
	--bbg-nt-inset: 16px;
	--bbg-nt-fixed-padding: 8px;

	display: flex;
	align-items: stretch;
	height: var(--bbg-nt-height);
	max-width: 100%;
	background: var(--bbg-nt-bg);
	border: 1px solid var(--bbg-nt-border);
	border-radius: 999px;
	overflow: hidden;
	line-height: 1.2;
	box-sizing: border-box;
}

.bbg-nt * {
	box-sizing: border-box;
}

/*
 * Forza il font principale del tema su tutti i testi del ticker (esclusa
 * l'icona, che deve mantenere il proprio font-face, es. Font Awesome).
 * Usa la variabile globale di Elementor (se presente); altrimenti eredita
 * dal tema; "sans-serif" resta come ultimissima rete di sicurezza.
 */
.bbg-nt,
.bbg-nt__fixed,
.bbg-nt__link,
.bbg-nt__label,
.bbg-nt .bbg-nt__nav {
	font-family: var(--e-global-typography-primary-font-family, inherit), sans-serif !important;
}

.bbg-nt {
	font-size: var(--bbg-nt-font-size);
}

.bbg-nt__fixed {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 var(--bbg-nt-fixed-padding);
	border-right: 1px solid var(--bbg-nt-border);
	color: var(--bbg-nt-text);
	font-weight: 700;
	white-space: nowrap;
}

.bbg-nt__fixed a {
	color: inherit;
	text-decoration: none;
}

.bbg-nt__viewport {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	min-width: 0;
	padding-left: var(--bbg-nt-inset);
	touch-action: pan-y;
	cursor: grab;
}

.bbg-nt__viewport:active {
	cursor: grabbing;
}

.bbg-nt__track {
	display: flex;
	align-items: center;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
	width: max-content;
}

.bbg-nt__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	height: 60%;
	padding: 0 var(--bbg-nt-gap);
	white-space: nowrap;
}

/*
 * Simbolo che segna il punto in cui l'elenco finisce e ricomincia
 * (aggiunto via JS solo sull'ultimo elemento originale e sul suo clone,
 * cosi' compare una volta per ogni giro dello scorrimento continuo).
 */
.bbg-nt .bbg-nt__item--loop-end {
	/* Azzera il padding destro della voce: senza questo, lo spazio dopo il
	   simbolo sarebbe doppio (padding destro di questa voce + padding
	   sinistro della voce successiva) rispetto a quello prima del simbolo. */
	padding-right: 0;
}

.bbg-nt .bbg-nt__item--loop-end::after {
	content: "|";
	margin-left: var(--bbg-nt-gap);
	color: var(--bbg-nt-text);
	opacity: 0.5;
}

/*
 * Selettore rinforzato (.bbg-nt .bbg-nt__link, doppia classe) + !important:
 * come per le frecce, alcuni temi applicano stili globali ai link (colore,
 * sottolineatura) più specifici della singola classe. Qui forziamo colore
 * e assenza di sottolineatura sempre, in ogni stato.
 */
.bbg-nt .bbg-nt__link,
.bbg-nt .bbg-nt__link:hover,
.bbg-nt .bbg-nt__link:focus,
.bbg-nt .bbg-nt__link:active,
.bbg-nt .bbg-nt__link:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none !important;
	font-size: inherit;
}

.bbg-nt .bbg-nt__link {
	color: var(--bbg-nt-text) !important;
}

.bbg-nt .bbg-nt__link:hover,
.bbg-nt .bbg-nt__link:hover .bbg-nt__icon {
	color: var(--bbg-nt-hover) !important;
}

.bbg-nt .bbg-nt__icon {
	flex: 0 0 auto;
	color: var(--bbg-nt-text) !important;
	font-size: 1.05em;
}

.bbg-nt__nav-group {
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	align-items: center;
	border-left: 1px solid var(--bbg-nt-border);
}

/*
 * Reset "nucleare": alcuni temi/page builder (es. Elementor) applicano stili
 * globali molto aggressivi a QUALSIASI elemento <button> del sito (bordo,
 * sfondo, border-radius, font), a volte anche con !important. "all: unset"
 * rimuove prima ogni stile (compreso l'aspetto nativo del browser), poi
 * riapplichiamo solo ciò che serve: così la freccia resta solo l'icona,
 * senza bordo, sfondo o ombra, in nessun contesto.
 * Area cliccabile minima 44x36px per un buon target touch.
 */
.bbg-nt .bbg-nt__nav {
	all: unset !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 44px !important;
	min-height: 32px !important;
	height: 100% !important;
	padding: 0 !important;
	color: var(--bbg-nt-text) !important;
	cursor: pointer !important;
	font-size: 22px !important;
	line-height: 1 !important;
	opacity: 0.8;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.bbg-nt__nav-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 1;
}

.bbg-nt .bbg-nt__nav:hover,
.bbg-nt .bbg-nt__nav:focus,
.bbg-nt .bbg-nt__nav:active {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--bbg-nt-hover) !important;
	opacity: 1;
}

.bbg-nt .bbg-nt__nav:focus-visible {
	outline: 2px solid var(--bbg-nt-hover) !important;
	outline-offset: -2px;
}

/* Responsive: su schermi piccoli riduce lo spazio interno (altezza fissa) */
@media (max-width: 600px) {
	.bbg-nt {
		--bbg-nt-font-size: 12px;
		--bbg-nt-gap: 12px;
		--bbg-nt-inset: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bbg-nt__track {
		transition: none !important;
	}
}