/**
 * Offers Bar — marquee announcement bar above the header.
 *
 * Colors and loop duration come from CSS custom properties set via
 * wp_add_inline_style() (see Frontend::build_inline_css()).
 */

.mio-animale-offers-bar {
	overflow: hidden;
	white-space: nowrap;
	background: var(--mio-offers-bar-bg, #2547ce);
	color: var(--mio-offers-bar-color, #fff);
	padding-top: var(--mio-offers-bar-padding-top, 12px);
	padding-bottom: var(--mio-offers-bar-padding-bottom, 12px);
	font-size: var(--mio-offers-bar-font-size, 15px);
	line-height: 1;
}

/*
 * Sticky mode: the bar pins to the top of the viewport on scroll and the
 * Woodmart sticky header (.whb-main-header) is pushed down by the bar
 * height once it pins. The offset comes from the --mio-offers-bar-sticky-h
 * custom property, set by offers-bar.js from the bar's live height.
 *
 * The offset is scoped to the header's stuck state (.whb-sticked is added
 * to header.whb-header by Woodmart when .whb-main-header becomes
 * position:fixed). Without this scope, `top` would also shift the header
 * in its relative/absolute pre-stuck states and open a gap equal to the bar
 * height between the bar and the header at the top of the page.
 */
.mio-animale-offers-bar.is-sticky {
	position: sticky;
	top: 0;
	z-index: 391;
}

body:has( .mio-animale-offers-bar.is-sticky ) .whb-header.whb-sticked .whb-main-header {
	top: var(--mio-offers-bar-sticky-h, 0px) !important;
}

.mio-animale-offers-bar__track {
	display: inline-flex;
	animation: mio-offers-bar-scroll var(--mio-offers-bar-duration, 25s) linear infinite;
	will-change: transform;
}

.mio-animale-offers-bar:hover .mio-animale-offers-bar__track {
	animation-play-state: paused;
}

/*
 * Each list is at least one full viewport wide so the track always covers
 * the bar: few short offers spread out evenly instead of clumping in a
 * mostly-empty bar, and the -50% loop point stays seamless.
 */
.mio-animale-offers-bar__list {
	display: inline-flex;
	align-items: center;
	justify-content: space-around;
	min-width: 100vw;
}

.mio-animale-offers-bar__item {
	display: inline-block;
	padding: 0 28px;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

a.mio-animale-offers-bar__item:hover,
a.mio-animale-offers-bar__item:focus {
	color: inherit;
	text-decoration: underline;
}

.mio-animale-offers-bar__separator {
	display: inline-block;
	color: var(--mio-offers-bar-separator-color, inherit);
}

.mio-animale-offers-bar__separator svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

@keyframes mio-offers-bar-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* In RTL the track must travel the opposite way. */
[dir="rtl"] .mio-animale-offers-bar__track {
	animation-name: mio-offers-bar-scroll-rtl;
}

@keyframes mio-offers-bar-scroll-rtl {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mio-animale-offers-bar__track {
		animation: none;
	}
}