/**
 * WP Marquee - frontend styles.
 *
 * Namespacing: every selector is scoped under .wp-marquee to avoid
 * clashing with theme/page-builder styles. No bare element selectors
 * (body, p, div, span, .container, etc.) are used anywhere in this file.
 *
 * Values that come from the admin (colors, font, size, duration) are
 * injected as CSS custom properties on the root .wp-marquee element via
 * an inline style attribute (see class-wp-marquee-shortcode.php). This
 * file only ever *reads* those variables, and always supplies a safe
 * fallback in case a variable is missing for any reason.
 */

.wp-marquee {
	/* Direction is explicitly right-to-left by default (see requirement
	   #11). Exposed as a variable so a future "direction" setting only
	   needs to flip this value, not rewrite the animation. */
	--marquee-direction: rtl-to-ltr;
	--marquee-shift: 100%;
	--marquee-gap: 24px;

	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: hidden;

	/* overflow: hidden here, combined with width: 100%, is what
	   guarantees the marquee can never create a horizontal scrollbar on
	   the page, no matter how much text is configured or how many
	   copies get cloned into the track. */
	background-color: var( --marquee-bg-color, transparent );

	/* Height is intrinsic to the text line, not a fixed value, so
	   turning the background off never leaves a phantom empty box and
	   never collapses the text either. */
	line-height: 1.4;
}

.wp-marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;

	/* Same gap variable as inside .wp-marquee__set below, so the space
	   between one repeated copy and the next is visually identical to
	   the space between the word and its separator inside a copy - one
	   consistent rhythm all the way across the strip. */
	gap: var( --marquee-gap, 24px );

	/* The seamless-loop technique: the track holds 2+ IDENTICAL copies
	   of the content back to back (see PHP + marquee.js). Animating the
	   track from translateX(0) to translateX(-1 * one-copy-plus-gap) is
	   visually indistinguishable from the loop restarting, because the
	   pixels that scroll into view at the end of the animation are
	   identical to the pixels that were visible at the very start. There
	   is therefore no jump, no blank gap and no visible "reset". */
	animation-name: wp-marquee-scroll;
	animation-duration: var( --marquee-duration, 15s );
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}

.wp-marquee__set {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	white-space: nowrap;

	/* Same value as the track's gap (see above): the gap between the
	   word and its separator matches the gap between repeats exactly. */
	gap: var( --marquee-gap, 24px );

	font-family: var( --marquee-font-family, system-ui, sans-serif );
	color: var( --marquee-text-color, #ffffff );

	/* clamp() keeps the admin-configured size as the practical ceiling
	   while letting the text shrink gracefully on narrow viewports, so a
	   large desktop font size never forces horizontal scrolling or
	   awkward wrapping on mobile (wrapping is additionally hard-blocked
	   by white-space: nowrap above). */
	font-size: clamp( 14px, 4vw, var( --marquee-font-size, 32px ) );
}

.wp-marquee__word,
.wp-marquee__separator {
	white-space: nowrap;
}

.wp-marquee__separator {
	display: inline-flex;
	align-items: center;
}

/* Image separator. Height is in `em` of the surrounding (responsive,
   clamp()ed) font size, multiplied by the admin's size setting, so the
   picture scales together with the text on every screen width.
   Selectors are prefixed with .wp-marquee and reset the properties
   themes commonly set on <img> (max-width: 100%, height: auto, margins,
   borders, shadows, rounded corners) so the theme cannot distort it. */
.wp-marquee .wp-marquee__separator-img {
	display: block;
	flex: none;
	height: calc( 1em * var( --marquee-sep-img-scale, 1 ) );
	width: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	vertical-align: middle;
	-webkit-user-drag: none;
	user-select: none;
}

/**
 * Keyframes use a CSS variable for the shift distance rather than a
 * hard-coded -50%, because the number of cloned .wp-marquee__set copies
 * is dynamic (marquee.js adds more copies for very short text so the
 * strip always fills the viewport). --marquee-shift is set in pixels by
 * marquee.js to the exact width of ONE copy; translating by exactly that
 * amount is what makes the loop seamless regardless of copy count.
 */
@keyframes wp-marquee-scroll {
	from {
		transform: translateX( 0 );
	}
	to {
		transform: translateX( calc( -1 * var( --marquee-shift, 100% ) ) );
	}
}

/* Respect the OS-level "reduce motion" preference: stop the scrolling
   animation entirely rather than merely slowing it down, and make sure
   the full text is still reachable/readable (it already is - it's a
   static inline block at that point, nothing is cut off). */
@media ( prefers-reduced-motion: reduce ) {
	.wp-marquee__track {
		animation: none;
		transform: none;
		flex-wrap: wrap;
	}

	.wp-marquee__set[aria-hidden="true"] {
		/* With motion disabled there is no scrolling to make the
		   duplicated copies necessary, so hide them from *everyone*
		   (not just assistive tech) to avoid showing the same text
		   repeated back-to-back with no animation to justify it. */
		display: none;
	}
}

/* RTL sites: the marquee's own scroll direction is intentionally always
   right-to-left regardless of document direction (requirement #29), but
   we still make sure the block itself participates correctly in an RTL
   layout context (no unexpected margins/offsets introduced by the
   parent's dir="rtl"). */
[dir="rtl"] .wp-marquee {
	direction: ltr;
}

/* --- Responsive fine-tuning -------------------------------------- */

@media ( max-width: 768px ) {
	.wp-marquee__set {
		font-size: clamp( 13px, 5vw, var( --marquee-font-size, 32px ) );
	}
}

@media ( max-width: 480px ) {
	.wp-marquee__set {
		font-size: clamp( 12px, 6vw, var( --marquee-font-size, 32px ) );
	}
}