/* ==========================================================================
   Brico Ecommerce — Striscia annunci scorrevole
   --------------------------------------------------------------------------
   Nessuna libreria, nessun `<marquee>`. Il movimento e' una sola
   animazione CSS su un nastro stampato due volte: trasla del 50% e
   ricomincia, e dove finisce la prima copia comincia la seconda —
   cosi' lo scorrimento e' continuo senza salti.
   ========================================================================== */

.brico-marquee {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--brico-marquee-bg, var(--brico-color-dark));
	color: var(--brico-marquee-fg, #fff);
	overflow: hidden;
}

.brico-marquee__corpo {
	flex: 1 1 auto;
	overflow: hidden;
	/* Le due estremita' sfumano invece di tagliare di netto: un testo
	   mozzato sul bordo sembra un errore, una dissolvenza sembra una
	   scelta. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

.brico-marquee__link {
	color: inherit;
	text-decoration: none;
	display: block;
}

.brico-marquee__pista {
	display: flex;
	width: max-content;
	animation: brico-marquee-scorre var(--brico-marquee-durata, 28s) linear infinite;
}

@keyframes brico-marquee-scorre {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.brico-marquee__gruppo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0.6rem 0;
}

.brico-marquee__voce {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0 1.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.brico-marquee__voce svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	opacity: 0.9;
}

.brico-marquee__sep {
	opacity: 0.45;
	font-weight: 400;
}

/* --------------------------------------------------------------------
   LA PAUSA — WCAG 2.2.2, e non e' un vezzo

   Qualsiasi cosa si muova da sola per piu' di cinque secondi deve avere
   un modo di fermarla. Qui ce ne sono tre: il pulsante, il passaggio
   del mouse e il fuoco da tastiera. L'ultimo conta piu' di quanto
   sembri: se dentro la striscia c'e' un link, chi ci arriva col
   tabulatore deve poterlo leggere fermo.
   -------------------------------------------------------------------- */
.brico-marquee:hover .brico-marquee__pista,
.brico-marquee:focus-within .brico-marquee__pista,
.brico-marquee.e-in-pausa .brico-marquee__pista {
	animation-play-state: paused;
}

.brico-marquee__pausa {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: max(2.5rem, 40px);
	min-height: max(2.5rem, 40px);
	margin-right: 0.25rem;
	border: none;
	background: transparent;
	color: inherit;
	cursor: pointer;
	border-radius: var(--brico-radius-sm);
	opacity: 0.7;
	transition: opacity var(--brico-transition), background var(--brico-transition);
}

.brico-marquee__pausa:hover,
.brico-marquee__pausa:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, 0.14);
}

.brico-marquee__pausa svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

/* Il pulsante mostra l'azione che compie, non lo stato in cui si
   trova: quando scorre offre "pausa", quando e' fermo offre "riprendi".
   E' la convenzione di ogni lettore musicale, e confonderla e' uno
   degli errori piu' comuni. */
.brico-marquee__ico-play { display: none; }
.brico-marquee.e-in-pausa .brico-marquee__ico-pausa { display: none; }
.brico-marquee.e-in-pausa .brico-marquee__ico-play { display: block; }

/* Sul chiaro il velo bianco non si vedrebbe. */
.brico-marquee[style*="surface-alt"] .brico-marquee__pausa:hover,
.brico-marquee[style*="accent"] .brico-marquee__pausa:hover {
	background: rgba(23, 25, 28, 0.12);
}

/* --------------------------------------------------------------------
   CHI HA CHIESTO MENO MOVIMENTO NON VEDE SCORRERE NIENTE

   E il testo non sparisce: il nastro si ferma, si manda a capo e si
   legge tutto. Spegnere l'animazione lasciando il contenuto fuori
   schermo sarebbe peggio del movimento.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.brico-marquee__pista {
		animation: none;
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
	}

	.brico-marquee__corpo {
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* La seconda copia serviva solo allo scorrimento continuo. */
	.brico-marquee__gruppo[aria-hidden="true"] {
		display: none;
	}

	.brico-marquee__voce {
		white-space: normal;
	}

	.brico-marquee__pausa {
		display: none;   /* non c'e' piu' niente da mettere in pausa */
	}
}

/* Su schermo stretto la striscia resta, piu' compatta: e' il posto in
   cui un annuncio ("ritiro in sede", "spedizione in 24h") serve di
   piu', perche' su telefono il resto del contorno sparisce. */
@media (max-width: 600px) {
	.brico-marquee__voce {
		font-size: 0.82rem;
		padding: 0 1rem;
	}
	.brico-marquee__corpo {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
		mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
	}
}

.brico-sotto-header {
	position: relative;
	z-index: 5;
}