/**
 * WP Category Grid — Infinite Scrolling Content Marquee Ticker
 * GPU-Accelerated 60fps Continuous Motion Stylesheet
 *
 * @package wp-category-grid
 * @version 1.2.0
 */

@charset "UTF-8";

.wpc-marquee-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	z-index: var(--wcg-z-marquee, 10);
	background: var(--wcg-marquee-bg, var(--wpc-marquee-bg, #8b1a1a));
	background-image: var(--wcg-marquee-bg-gradient, var(--wpc-marquee-bg-gradient, none));
	color: var(--wcg-marquee-text-color, var(--wpc-marquee-text-color, #ffffff));
	padding-top: var(--wcg-marquee-pad-top, var(--wpc-marquee-pad-top, 10px));
	padding-bottom: var(--wcg-marquee-pad-bottom, var(--wpc-marquee-pad-bottom, 10px));
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
	contain: content;
}

.wpc-marquee {
	display: flex;
	width: 100%;
	overflow: hidden;
	position: relative;
	white-space: nowrap;
	mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
}

.wpc-marquee__track {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	min-width: 100%;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* ── Animation Directions ── */
.wpc-marquee__track--rtl {
	animation: wpcMarqueeScrollRtl var(--wcg-marquee-duration, var(--wpc-marquee-duration, 25s)) linear infinite;
}

.wpc-marquee__track--ltr {
	animation: wpcMarqueeScrollLtr var(--wcg-marquee-duration, var(--wpc-marquee-duration, 25s)) linear infinite;
}

@keyframes wpcMarqueeScrollRtl {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-100%, 0, 0);
	}
}

@keyframes wpcMarqueeScrollLtr {
	0% {
		transform: translate3d(-100%, 0, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

/* ── Pause on Hover / Touch ── */
.wpc-marquee:hover .wpc-marquee__track--pause-hover,
.wpc-marquee:focus-within .wpc-marquee__track--pause-hover,
.wpc-marquee:active .wpc-marquee__track--pause-touch {
	animation-play-state: paused !important;
}

/* ── Marquee Items ── */
.wpc-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 18px;
	font-family: var(--wcg-marquee-font-family, var(--wpc-marquee-font-family, inherit));
	font-size: var(--wcg-marquee-font-size, var(--wpc-marquee-font-size, 13px));
	font-weight: var(--wcg-marquee-font-weight, var(--wpc-marquee-font-weight, 600));
	letter-spacing: var(--wcg-marquee-letter-spacing, var(--wpc-marquee-letter-spacing, 1px));
	text-transform: var(--wcg-marquee-text-transform, var(--wpc-marquee-text-transform, uppercase));
	color: var(--wcg-marquee-text-color, var(--wpc-marquee-text-color, #ffffff));
	text-decoration: none;
	line-height: 1.4;
	transition: opacity var(--wcg-transition-fast, 150ms) ease, transform var(--wcg-transition-fast, 150ms) ease;
}

a.wpc-marquee__item {
	cursor: pointer;
}

a.wpc-marquee__item:hover,
a.wpc-marquee__item:focus-visible {
	opacity: 0.88;
	outline: var(--wcg-focus-ring-width, 2px) solid var(--wcg-focus-ring-color, var(--brand-color-primary, #8b1a1a));
	outline-offset: var(--wcg-focus-ring-offset, 2px);
}

.wpc-marquee__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: var(--wcg-marquee-icon-color, var(--wpc-marquee-icon-color, currentColor));
}

.wpc-marquee__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wpc-marquee__text {
	display: inline-block;
	white-space: nowrap;
}

/* ── Separators ── */
.wpc-marquee__separator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wcg-marquee-sep-color, var(--wpc-marquee-sep-color, #f59e0b));
	padding: 0 6px;
	font-size: 11px;
	opacity: 0.9;
	flex-shrink: 0;
}

.wpc-marquee__separator svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/* ── Responsive Viewport Scaling ── */
@media (max-width: 1024px) {
	.wpc-marquee-wrapper {
		padding-top: var(--wcg-marquee-pad-top-tab, var(--wpc-marquee-pad-top-tab, 8px));
		padding-bottom: var(--wcg-marquee-pad-bottom-tab, var(--wpc-marquee-pad-bottom-tab, 8px));
	}
	.wpc-marquee__item {
		font-size: var(--wcg-marquee-font-size-tab, var(--wpc-marquee-font-size-tab, 12px));
		letter-spacing: var(--wcg-marquee-letter-spacing-tab, var(--wpc-marquee-letter-spacing-tab, 0.8px));
		padding: 0 14px;
		gap: 6px;
	}
	.wpc-marquee__icon {
		width: 16px;
		height: 16px;
	}
}

@media (max-width: 767px) {
	.wpc-marquee-wrapper {
		padding-top: var(--wcg-marquee-pad-top-mob, var(--wpc-marquee-pad-top-mob, 6px));
		padding-bottom: var(--wcg-marquee-pad-bottom-mob, var(--wpc-marquee-pad-bottom-mob, 6px));
	}
	.wpc-marquee__item {
		font-size: var(--wcg-marquee-font-size-mob, var(--wpc-marquee-font-size-mob, 11px));
		letter-spacing: var(--wcg-marquee-letter-spacing-mob, var(--wpc-marquee-letter-spacing-mob, 0.5px));
		padding: 0 10px;
		gap: 5px;
	}
	.wpc-marquee__icon {
		width: 14px;
		height: 14px;
	}
}

/* ── Accessibility: Prefers Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
	.wpc-marquee {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		mask-image: none;
		-webkit-mask-image: none;
	}
	.wpc-marquee__track {
		animation: none !important;
		animation-play-state: paused !important;
		transform: none !important;
	}
	.wpc-marquee__track[aria-hidden="true"] {
		display: none;
	}
}