/* Top bar — infinite marquee; colors & duration via Customizer CSS variables.
 * Source: assets/src/css/top-bar.css (enqueued from PHP). */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.top-bar {
	background: var(--topbar-bg, #111);
	color: var(--topbar-fg, #fff);
	font-size: var(--topbar-font-size, 12px);
	font-weight: var(--topbar-font-weight, 600);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.35;
}

/*
 * Full-bleed: body / WP global styles often add horizontal padding so #page is narrower
 * than the viewport — the bar looked “centered” with black gaps. Break out to 100vw.
 */
.top-bar.top-bar--marquee {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

.top-bar__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: var(--topbar-padding-y, 8px) 0;
}

/* Marquee must span the full bar — inner max-width + margin:auto centered the track (empty black on the left). */
.top-bar--marquee .top-bar__inner {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-top: var(--topbar-padding-y, 8px);
	padding-bottom: var(--topbar-padding-y, 8px);
	padding-left: 0;
	padding-right: 0;
}

.top-bar__viewport {
	overflow: hidden;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	container-type: inline-size;
	/* Hard left edge so the first character isn’t faded (symmetric fade looked like a “mid” start). */
	mask-image: linear-gradient(
		90deg,
		#000 0,
		#000 calc(100% - 20px),
		transparent
	);
	-webkit-mask-image: linear-gradient(
		90deg,
		#000 0,
		#000 calc(100% - 20px),
		transparent
	);
}

.top-bar__marquee-track {
	display: flex;
	width: max-content;
	/* No animation until JS measures + adds .top-bar--marquee-ready (avoids starting mid-loop with wrong %). */
	animation: none;
	will-change: transform;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
}

.top-bar--marquee-ready.top-bar--dir-left .top-bar__marquee-track {
	animation-name: droxauto-topbar-marquee-left;
	animation-duration: var(--topbar-marquee-duration, 40s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.top-bar--marquee-ready.top-bar--dir-right .top-bar__marquee-track {
	animation-name: droxauto-topbar-marquee-right;
	animation-duration: var(--topbar-marquee-duration, 40s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.top-bar--marquee-ready.top-bar--pause-hover:hover .top-bar__marquee-track {
	animation-play-state: paused;
}

/* One loop unit: optional full-width spacer (ticker start from right) + message row */
.top-bar__marquee-segment {
	display: flex;
	flex-direction: row;
	flex-shrink: 0;
	align-items: center;
}

/* Spacer width = viewport (set via --topbar-viewport-px in JS) so text begins at the right edge */
.top-bar__marquee-spacer {
	flex: 0 0 var(--topbar-viewport-px, 100cqw);
	width: var(--topbar-viewport-px, 100cqw);
	min-width: var(--topbar-viewport-px, 100cqw);
	height: 1em;
	pointer-events: none;
}

.top-bar__marquee-content {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	/* Use gap (not margin on .top-bar__sep) so spacing respects Customizer in all flex layouts. */
	gap: var(--topbar-message-gap, 32px);
	padding-right: 4rem;
	white-space: nowrap;
}

.top-bar__chunk {
	display: inline-flex;
	align-items: center;
}

.top-bar__sep {
	display: block;
	width: 0.35em;
	height: 0.35em;
	margin: 0;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
	flex-shrink: 0;
}

.top-bar a {
	color: var(--topbar-accent, #f5700a);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.top-bar a:hover {
	opacity: 0.9;
}

.top-bar__accent {
	color: var(--topbar-accent, #f5700a);
}

@keyframes droxauto-topbar-marquee-left {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(var(--topbar-marquee-shift-left, -50%), 0, 0);
	}
}

@keyframes droxauto-topbar-marquee-right {
	from {
		transform: translate3d(var(--topbar-marquee-shift-left, -50%), 0, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

@media (max-width: 600px) {
	.top-bar {
		font-size: 10.5px;
	}

	.top-bar__marquee-content {
		padding-right: 3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.top-bar__marquee-track {
		animation: none;
		transform: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		max-width: 100%;
	}

	.top-bar__viewport {
		display: block;
		mask-image: none;
		-webkit-mask-image: none;
	}

	.top-bar__marquee-segment--clone {
		display: none;
	}

	.top-bar__marquee-spacer {
		display: none;
	}

	.top-bar__marquee-content {
		white-space: normal;
		justify-content: center;
		text-align: center;
		flex-wrap: wrap;
		row-gap: 0.35em;
		column-gap: var(--topbar-message-gap, 32px);
		padding-right: 0;
	}
}