/*
 * Fascia dei prodotti in home.
 *
 * ⚠️ 2026-08-31 — RICHIESTA DEL CLIENTE: la fascia non scorre più da sola.
 * È FERMA; ci si sposta con le due frecce ai lati o trascinando col dito, e
 * ogni voce è un link alla scheda del prodotto. Sparita l'animazione
 * `adeaMarquee`, sparito il secondo gruppo di voci che le serviva, sparita la
 * variabile `--adea-marquee-dur`.
 *
 * Markup in templates/marquee.php, controlli in includes/widgets/class-marquee.php,
 * comportamento in assets/js/marquee.js.
 *
 * DUE COSE DA NON ROMPERE
 *
 * · **L'altezza della fascia resta 56px.** Le frecce sono in
 *   `position:absolute`, quindi NON entrano nel calcolo dell'altezza: la riga
 *   la fa solo il testo, come prima. Mettendole nel flusso (un flex a tre
 *   colonne) la fascia cresce di qualche pixel e si stacca dall'hero.
 * · **`line-height:normal` va sulla FASCIA, non solo sulla pista.** La pista è
 *   di livello inline, e a decidere l'altezza della riga che la contiene è il
 *   line-height del PADRE. Con l'1.5 del Kit di Elementor la fascia veniva
 *   58px invece di 56 pur avendo pista e voci alte 21px (misurato).
 *
 * Variabili controllate dall'editor (ripiego = valore originale):
 *   --adea-marquee-bg      fondo della fascia (orig: #004F9E)
 *   --adea-marquee-pad-v   padding verticale (orig: 17px)
 *   --adea-marquee-gap     spazio fra le voci (orig: 30px)
 *   --adea-marquee-size    corpo del testo (orig: 14px)
 *   --adea-marquee-color   colore del testo (orig: #fff)
 *   --adea-marquee-dot     colore del rombo separatore (orig: #42AD59)
 *   --adea-marquee-dot-sz  lato del rombo (orig: 7px)
 *   --adea-marquee-nav     colore delle frecce
 *
 * Indice: fascia · finestra · pista · voce · rombo · frecce · reduced-motion/editor
 */

/* ---------- fascia ---------- */
.adea-marquee{
	position:relative;                 /* le frecce si ancorano qui */
	overflow:hidden;
	background:var(--adea-marquee-bg,var(--adea-blu,#004F9E));
	padding:var(--adea-marquee-pad-v,17px) 0;
	line-height:normal;                /* ⚠️ vedi nota in testa */
	display:block;
}

/* ---------- finestra ----------
   È il contenitore a scorrimento. Funziona da sé — dito, trackpad, rotella —
   anche se lo script non arriva: per questo le frecce possono restare
   nascoste senza lasciare contenuto irraggiungibile.
   La barra di scorrimento si nasconde: sarebbe una riga grigia in mezzo al blu. */
.adea-marquee-viewport{
	overflow-x:auto;overflow-y:hidden;
	scroll-behavior:smooth;
	-ms-overflow-style:none;scrollbar-width:none;
	overscroll-behavior-x:contain;
	line-height:normal;
}
.adea-marquee-viewport::-webkit-scrollbar{display:none}

/* ---------- pista ---------- */
.adea-marquee-track{
	display:inline-flex;align-items:center;
	gap:var(--adea-marquee-gap,30px);
	padding:0 var(--adea-marquee-gap,30px);
	white-space:nowrap;
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);
	font-weight:600;font-size:var(--adea-marquee-size,14px);
	color:var(--adea-marquee-color,#fff);
	text-transform:uppercase;letter-spacing:.06em;
	line-height:normal; /* il Kit impone 1.5: cambierebbe l'altezza della fascia */
}

/* ---------- voce ----------
   ⚠️ DUE CLASSI, non una. Elementor stampa `.elementor a{box-shadow:none;
   text-decoration:none}` con specificità (0,1,1) e il Kit colora i link con
   `.elementor-kit-N a` (0,2,0): una regola su una classe sola perderebbe, e la
   voce prenderebbe il colore dei link del Kit invece del bianco. */
.adea-marquee .adea-marquee-item{
	color:var(--adea-marquee-color,#fff);
	text-decoration:none;
	white-space:nowrap;
	transition:opacity .2s ease;
	opacity:1;
}
.adea-marquee .adea-marquee-item:hover,
.adea-marquee .adea-marquee-item:focus-visible{
	opacity:.62;
	text-decoration:underline;
	text-underline-offset:3px;
}
.adea-marquee .adea-marquee-item:focus-visible{
	outline:2px solid var(--adea-marquee-color,#fff);
	outline-offset:3px;
}

/* ---------- rombo separatore ----------
   Un quadrato ruotato di 45°, non un carattere: così resta nitido e si colora
   con una variabile. */
.adea-marquee-dot{
	display:block;
	width:var(--adea-marquee-dot-sz,7px);height:var(--adea-marquee-dot-sz,7px);
	background:var(--adea-marquee-dot,var(--adea-verde,#42AD59));
	transform:rotate(45deg);flex:none;
}

/* ---------- frecce ----------
   Nascoste finché lo script non mette `adea-marquee-js` sulla fascia: senza
   JavaScript non farebbero nulla, e un bottone inerte è peggio di un bottone
   assente. Fuori dal flusso, quindi l'altezza della fascia non cambia.

   ⚠️ DUE CLASSI anche qui, e non per abitudine: `hello-elementor/reset.css`
   colora di ROSA ogni `<button>` in hover e in focus
   (`button:hover,button:focus{background-color:#c36}`, specificità (0,1,1)).
   Con una classe sola la freccia diventa rosa al primo clic. */
.adea-marquee .adea-marquee-nav{
	display:none;
	position:absolute;top:50%;transform:translateY(-50%);
	z-index:2;
	width:30px;height:30px;padding:0;
	align-items:center;justify-content:center;
	border:0;border-radius:50%;
	background:rgba(255,255,255,.16);
	color:var(--adea-marquee-nav,var(--adea-marquee-color,#fff));
	cursor:pointer;
	transition:background-color .2s ease,opacity .2s ease;
	line-height:normal;
	-webkit-appearance:none;appearance:none;
}
.adea-marquee .adea-marquee-nav svg{width:18px;height:18px;display:block}
.adea-marquee-js .adea-marquee-nav{display:flex}

.adea-marquee .adea-marquee-prev{left:10px}
.adea-marquee .adea-marquee-next{right:10px}

.adea-marquee .adea-marquee-nav:hover,
.adea-marquee .adea-marquee-nav:focus-visible{
	background:rgba(255,255,255,.30);
	color:var(--adea-marquee-nav,var(--adea-marquee-color,#fff));
}
.adea-marquee .adea-marquee-nav:focus-visible{
	outline:2px solid var(--adea-marquee-color,#fff);outline-offset:2px;
}
/* a fine corsa: resta al suo posto ma smette di invitare al clic */
.adea-marquee .adea-marquee-nav[disabled]{opacity:.28;cursor:default}
.adea-marquee .adea-marquee-nav[disabled]:hover{background:rgba(255,255,255,.16)}

/* ---------- sfumature ai bordi ----------
   ⚠️ Il `padding` su un contenitore a scorrimento NON tiene il testo fuori
   dalla zona delle frecce: il padding fa parte della scatola scorrevole, e il
   contenuto ci passa DENTRO scorrendo. Senza questa sfumatura le voci si
   vedono attraverso il fondo semitrasparente dei bottoni e la freccia destra
   diventa illeggibile (visto in fotografia, non dedotto).
   La sfumatura sta SOTTO i bottoni (z-index 1 contro 2) e sopra la pista. */
.adea-marquee-js::before,
.adea-marquee-js::after{
	content:"";position:absolute;top:0;bottom:0;width:var(--adea-marquee-sfum,62px);
	z-index:1;pointer-events:none;
}
.adea-marquee-js::before{
	left:0;
	background:linear-gradient(90deg,
		var(--adea-marquee-bg,var(--adea-blu,#004F9E)) 60%, transparent);
}
.adea-marquee-js::after{
	right:0;
	background:linear-gradient(270deg,
		var(--adea-marquee-bg,var(--adea-blu,#004F9E)) 60%, transparent);
}

/* il testo parte dove finisce la sfumatura, così non ci nasce già sotto */
.adea-marquee-js .adea-marquee-viewport{padding:0 var(--adea-marquee-sfum,62px)}

/* se le voci ci stanno tutte non c'è niente da scorrere: via frecce e sfumature */
.adea-marquee-js.is-intera .adea-marquee-nav{display:none}
.adea-marquee-js.is-intera::before,
.adea-marquee-js.is-intera::after{display:none}
.adea-marquee-js.is-intera .adea-marquee-viewport{padding:0}

/* schermi stretti: frecce e sfumature più piccole, o si mangiano la fascia */
@media(max-width:620px){
	.adea-marquee-js{--adea-marquee-sfum:44px}
	.adea-marquee .adea-marquee-nav{width:26px;height:26px}
	.adea-marquee .adea-marquee-nav svg{width:15px;height:15px}
	.adea-marquee .adea-marquee-prev{left:6px}
	.adea-marquee .adea-marquee-next{right:6px}
}

/* ---------- reduced-motion ed editor ----------
   Con «riduci le animazioni» lo scorrimento è istantaneo invece che morbido:
   la fascia resta usabile, semplicemente non scivola.
   Nell'editor le frecce restano visibili per poterle vedere mentre si compone. */
@media(prefers-reduced-motion:reduce){
	.adea-marquee-viewport{scroll-behavior:auto}
	.adea-marquee .adea-marquee-item{transition:none}
	.adea-marquee .adea-marquee-nav{transition:none}
}