/**
 * شريط العناوين الدوّار — جوال أولاً.
 *
 * @package Janoob
 */

.janoob-headline-rotator-wrap {
	margin-block: 0;
	padding-block: 0;
}

.janoob-headline-rotator {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.45rem 0.65rem;
	border-radius: 0;
	background: rgb(227 0 15 / 0.09);
	border-block: 1px solid rgb(227 0 15 / 0.12);
}

@media (min-width: 640px) {
	.janoob-headline-rotator {
		min-height: 3rem;
		padding: 0.5rem 0.85rem;
		border-radius: 0.5rem;
	}
}

.janoob-headline-rotator__stage {
	opacity: 0;
	transition: opacity 0.45s ease;
	will-change: opacity;
}

.janoob-headline-rotator__stage.is-visible {
	opacity: 1;
}

.janoob-headline-rotator__stage.is-fade-out {
	opacity: 0;
}

.janoob-headline-rotator__clip {
	width: 100%;
	overflow: hidden;
}

.janoob-headline-rotator__link {
	display: block;
	width: 100%;
	color: rgb(51 65 85);
	text-decoration: none;
	font-family: Cairo, sans-serif;
	font-size: clamp(1rem, 4.1vw, 1.375rem);
	font-weight: 900;
	line-height: 1.35;
	letter-spacing: -0.01em;
	transition: color 0.2s ease;
}

.janoob-headline-rotator__link:hover,
.janoob-headline-rotator__link:focus-visible {
	color: rgb(227 0 15);
	outline: none;
}

.janoob-headline-rotator__title {
	display: inline-block;
	max-width: none;
	white-space: nowrap;
	vertical-align: top;
	will-change: transform;
	transform: translateX(0);
}

html.dark .janoob-headline-rotator {
	background: rgb(227 0 15 / 0.14);
	border-color: rgb(227 0 15 / 0.22);
}

html.dark .janoob-headline-rotator__link {
	color: rgb(226 232 240);
}

html.dark .janoob-headline-rotator__link:hover,
html.dark .janoob-headline-rotator__link:focus-visible {
	color: rgb(252 165 165);
}

@media (prefers-reduced-motion: reduce) {
	.janoob-headline-rotator__stage {
		transition: none;
	}

	.janoob-headline-rotator__title {
		transition: none !important;
		transform: none !important;
		white-space: normal;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
