/**
 * Highlight ticker styles
 * No fixed widths anywhere — the wrapper flexes to whatever container
 * (e.g. an Elementor section) it's placed in, so that section's own
 * background shows through.
 */

.nmars-highlight-ticker {
	--nmars-badge-bg: #f5a623;
	--nmars-badge-color: #ffffff;
	--nmars-text-color: #ffffff;
	--nmars-item-gap: 48px;

	display: flex;
	align-items: center;
	width: 100%;
	max-width: 100%;
	background: transparent; /* let Elementor's section background show */
	overflow: hidden;
	box-sizing: border-box;
	gap: 20px;
}

.nmars-highlight-ticker * {
	box-sizing: border-box;
}

/* Left badge, e.g. "Highlighted" */
.nmars-highlight-badge {
	flex: 0 0 auto;
	background: var(--nmars-badge-bg);
	color: var(--nmars-badge-color);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	padding: 12px 22px;
	border-radius: 6px;
	white-space: nowrap;
}

/* Clips the scrolling track — this is what makes width "fluid":
   it just fills whatever space is left next to the badge. */
.nmars-highlight-viewport {
	flex: 1 1 auto;
	min-width: 0; /* required so a flex child can actually be clipped */
	overflow: hidden;
	position: relative;
}

/* The list that actually moves. JS duplicates its <li> items once so the
   loop is seamless, then sets --nmars-start-x (= viewport width) and
   --nmars-shift (= width of one item-set) so the animation always begins
   fully off-screen to the right, no matter how much text there is or how
   wide the viewport is — including the case of a single highlight. */
.nmars-highlight-track {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	will-change: transform;
	transform: translateX(var(--nmars-start-x, 0px));
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	/* animation-name and animation-duration are set by JS once the real
	   widths are known — see highlight-ticker.js. */
}

.nmars-highlight-item {
	flex: 0 0 auto;
	padding-right: var(--nmars-item-gap);
	color: var(--nmars-text-color);
	font-size: 1rem;
}

.nmars-highlight-item a {
	color: inherit;
	text-decoration: none;
}

.nmars-highlight-item a:hover,
.nmars-highlight-item a:focus-visible {
	text-decoration: underline;
}

/* Pause on hover so people can actually read/click */
.nmars-highlight-ticker.is-paused .nmars-highlight-track {
	animation-play-state: paused;
}

@keyframes nmars-highlight-scroll {
	from {
		/* starts fully off-screen to the right of the viewport */
		transform: translateX(var(--nmars-start-x, 0px));
	}
	to {
		/* shifts left by exactly one item-set's width — since the set is
		   duplicated, this lands on a visually identical frame, so the
		   loop restart is seamless regardless of the starting offset */
		transform: translateX(calc(var(--nmars-start-x, 0px) - var(--nmars-shift, 0px)));
	}
}

/* Respect users who've asked for less motion */
@media (prefers-reduced-motion: reduce) {
	.nmars-highlight-track {
		animation: none;
	}
	.nmars-highlight-viewport {
		overflow-x: auto;
	}
}

@media (max-width: 600px) {
	.nmars-highlight-ticker {
		gap: 12px;
	}
	.nmars-highlight-badge {
		padding: 8px 14px;
		font-size: 0.85rem;
	}
	.nmars-highlight-item {
		font-size: 0.9rem;
		padding-right: 28px;
	}
}