/* ==========================================================================
   Marquee — texto rolando continuamente (Top Bar / outros locais)
   Uso:  <span class="wdc-marquee">FRASE</span>
   Opcional: data-speed="60" (pixels por segundo, default 80)
   ========================================================================== */

/* Força containers do Top Bar a NÃO clipar o marquee (alguns têm overflow:hidden) */
.whb-top-bar,
.whb-top-bar .whb-row,
.whb-top-bar .whb-row-content,
.whb-top-bar .whb-column,
.whb-top-bar .whb-column-1,
.whb-top-bar .whb-column-2,
.whb-top-bar .whb-column-3,
.whb-top-bar .container,
.whb-top-bar .container-fluid {
	overflow: visible !important;
}

/* O elemento de texto que envolve o marquee no Top Bar pode ter padding/max-width */
.whb-top-bar .text-element-wrap,
.whb-top-bar [class*="text"] {
	max-width: none;
	width: 100%;
}

.wdc-marquee {
	display: block;
	position: relative;
	width: 100%;
	max-width: 100%;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
}

.wdc-marquee .wdc-marquee-track {
	display: inline-flex;
	will-change: transform;
	animation: wdc-marquee-scroll var(--wdc-marquee-duration, 20s) linear infinite;
}

.wdc-marquee .wdc-marquee-item {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0;
}

.wdc-marquee .wdc-marquee-sep {
	display: inline-block !important;
	margin: 0 14px;
	padding: 0;
	opacity: 1;
	font-weight: 400;
	font-size: inherit;
	color: #fff !important;
	line-height: inherit;
	visibility: visible !important;
	flex-shrink: 0;
	text-indent: 0;
}

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

/* Pausa ao passar o mouse (acessibilidade + UX) */
.wdc-marquee:hover .wdc-marquee-track {
	animation-play-state: paused;
}

/* Respeita usuários que pediram menos animação */
@media (prefers-reduced-motion: reduce) {
	.wdc-marquee .wdc-marquee-track {
		animation: none;
		transform: none;
	}
}