/**
 * Scrolling announcement banner.
 *
 * Markup comes from CDQ_Banner::render(). Read that file first.
 *
 * The rhythm is the source site's: an empty bar, the text arriving from the
 * right, crossing, leaving, an empty bar again. The source gets the entrance
 * from `left: 100%` on an absolutely positioned track. Here it comes from a
 * run-in spacer rendered at the head of every copy — inside the loop, so the
 * entrance repeats on every pass instead of only the first.
 *
 * The mechanism underneath is different, on purpose. The track holds N
 * identical copies and travels exactly -100%/N, so copy 2 lands pixel-for-pixel
 * where copy 1 started and the restart cannot be seen. The source travels a
 * distance unrelated to its own width, which cuts the tail of the sentence off
 * mid-air on desktop and leaves roughly half the mobile cycle as a blank red
 * bar. Same look, without the two artefacts.
 *
 * N lives in --cdq-banner-copies. PHP renders 2; banner.js raises it when the
 * copy is too short to fill the bar twice. Nothing else has to change, because
 * the distance travelled per cycle is always the width of ONE copy — which is
 * also why the perceived speed does not depend on N.
 *
 * Everything tweakable is a custom property, so the Elementor header can
 * restyle the banner from its own Custom CSS without touching this file.
 */

.cdq-banner {
	--cdq-banner-bg: var( --e-global-color-accent, #e60c28 );
	--cdq-banner-fg: var( --e-global-color-cdqblc1, #f8fcfd );
	--cdq-banner-height: 2.25rem;
	--cdq-banner-gap: 1rem;
	--cdq-banner-duration: 60s;

	/*
	 * Blank run-in ahead of every copy. One viewport wide means the previous
	 * copy finishes leaving on the left at the moment the next one starts
	 * entering on the right — the source's pacing. Raise it for a real pause
	 * between passes, drop it to 0 for a continuous ribbon of text.
	 *
	 * banner.js replaces this with the bar's measured width, which is more
	 * accurate whenever the header is not edge to edge. The vw value is what
	 * runs with JavaScript off.
	 */
	--cdq-banner-lead: 100vw;

	position: relative;
	z-index: 20;
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 100%;
	min-height: var( --cdq-banner-height );
	background-color: var( --cdq-banner-bg );
	color: var( --cdq-banner-fg );
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;

	/* The marquee reads as decoration to a pointer; nobody wants to select it. */
	-webkit-user-select: none;
	user-select: none;
}

.cdq-banner__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;

	width: -webkit-max-content;
	width: max-content;

	animation: cdq-banner-scroll var( --cdq-banner-duration ) linear infinite;
	will-change: transform;
}


.cdq-banner:hover .cdq-banner__track,
.cdq-banner:focus-within .cdq-banner__track {
	animation-play-state: paused;
}

.cdq-banner__group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	white-space: nowrap;
}

.cdq-banner__lead {
	flex: 0 0 auto;
	width: var( --cdq-banner-lead, 100vw );
	min-width: calc( var( --cdq-banner-gap ) * 2 );
}

.cdq-banner__separator {
	margin: 0 var( --cdq-banner-gap );
	font-weight: 700;
}

@keyframes cdq-banner-scroll {
	from {
		transform: translate3d( 0, 0, 0 );
	}

	to {
		transform: translate3d( calc( -100% / var( --cdq-banner-copies, 2 ) ), 0, 0 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cdq-banner {
		padding: 0.5rem var( --cdq-banner-gap );
	}

	.cdq-banner__track {
		width: 100%;
		animation: none;
	}

	.cdq-banner__group {
		flex-wrap: wrap;
		white-space: normal;
	}

	.cdq-banner__group[aria-hidden="true"],
	.cdq-banner__lead {
		display: none;
	}
}

.cdq-banner--placeholder {
	justify-content: center;
	padding: 0.5rem 1rem;
	background-color: #6b7280;
	font-style: italic;
	text-align: center;
	white-space: normal;
}