/* =============================================================================
   Moving Banner — Frontend Stylesheet
   Version:  1.0.3
   Package:  Moving_Banner
   ========================================================================== */


/* ── 1. Wrapper ────────────────────────────────────────────────────────────── */

.moving-banner {
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	width: 100%;
	line-height: 1.5;
}

.moving-banner--full-width {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}


/* ── 2. Inner clipping container ───────────────────────────────────────────── */

.moving-banner__inner {
	overflow: hidden;
	width: 100%;
}


/* ── 3. Scrolling track ────────────────────────────────────────────────────── */

/*
 * The full animation shorthand (name + duration + easing + iteration) is
 * written as an inline style by PHP — both unprefixed and -webkit- prefixed.
 * This is the most compatible approach across all browsers and iOS versions.
 * No class-based animation rules are needed here.
 */
.moving-banner__track {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	white-space: nowrap;
	will-change: transform;
	/*
	 * Force LTR item layout on RTL sites (Arabic, Hebrew, etc.).
	 * Without this, flex items flow right-to-left so the entire track
	 * sits off-screen left and the animation produces a blank screen.
	 * Text inside each item still renders in the correct RTL direction
	 * because Unicode bidi handles character-level directionality.
	 */
	direction: ltr;
}


/* ── 4. Individual text items ──────────────────────────────────────────────── */

.moving-banner__item {
	display: inline-block;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	padding-left: 3em;
	padding-right: 3em;
}


/* ── 5. Keyframe animations ────────────────────────────────────────────────── */

/*
 * Both -webkit- prefixed and standard versions are defined.
 * The track uses -50% translate. frontend.js ensures there are always
 * enough copies so the first half fills the screen — seamless on any
 * device or text length.
 */
@-webkit-keyframes mb-scroll-left {
	from { -webkit-transform: translateX(0);    transform: translateX(0); }
	to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes mb-scroll-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@-webkit-keyframes mb-scroll-right {
	from { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
	to   { -webkit-transform: translateX(0);    transform: translateX(0); }
}
@keyframes mb-scroll-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}


/* ── 6. Pause on hover / focus (pointer devices only) ──────────────────────── */

/*
 * Wrapped in (hover: hover) so this never fires on touch screens.
 * On iPhone, :hover can persist after a tap, which was causing the banner
 * to freeze. The JS animation handles its own pause via matchMedia too.
 */
@media (hover: hover) {
	.moving-banner:hover .moving-banner__track,
	.moving-banner:focus-within .moving-banner__track {
		-webkit-animation-play-state: paused !important;
		animation-play-state: paused !important;
	}
}


/* ── 7. Responsive adjustments ─────────────────────────────────────────────── */

@media screen and (max-width: 768px) {
	.moving-banner__item {
		padding-left: 2em;
		padding-right: 2em;
	}
}

@media screen and (max-width: 480px) {
	.moving-banner__item {
		padding-left: 1.5em;
		padding-right: 1.5em;
	}
}


/* ── 8. Reduced-motion accessibility ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.moving-banner__track {
		-webkit-animation: none !important;
		animation: none !important;
		-webkit-transform: none !important;
		transform: none !important;
	}

	.moving-banner__item:not(:first-child) {
		display: none;
	}
}