/**
 * Tickerly front-end styles.
 *
 * Structure only. Every colour and type value resolves to `inherit` or
 * `currentColor`, so a fresh install adopts the host theme's own font and
 * colour. Values set on the Styling screen arrive as `--tly-*` custom
 * properties; an unset value emits no property, leaving the theme in charge.
 */

.tly-ticker {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	min-height: var( --tly-height, auto );
	padding-right: var( --tly-padding-x, 0 );
	padding-left: var( --tly-padding-x, 0 );
	background: var( --tly-bg, transparent );
	/* !important: a theme or page-builder global style (e.g. Elementor's
	   Kit CSS setting `color` on every `a`) commonly beats a single-class
	   selector like this one on specificity alone, silently overriding the
	   ticker's own text colour — including its inherited default — with
	   whatever the rest of the page uses for links. Scoped to `color` and
	   `text-decoration` only (see `.tly-link` below), the two properties
	   that are actually contested in practice; layout, spacing and
	   background are left alone so the Elementor widget's own Background
	   group control keeps working unmodified. */
	color: var( --tly-text-color, inherit ) !important;
	font-family: var( --tly-font-family, inherit );
	font-size: var( --tly-font-size, inherit );
	font-weight: var( --tly-font-weight, inherit );
	letter-spacing: var( --tly-letter-spacing, inherit );
}

.tly-viewport {
	width: 100%;
	overflow: hidden;
}

.tly-track {
	display: flex;
	align-items: center;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
	animation: tly-scroll var( --tly-duration, 30s ) linear infinite;
	will-change: transform;
}

.tly-ticker[data-tly-direction="right"] .tly-track {
	animation-direction: reverse;
}

/* No CSS `gap` on the track: spacing lives on the items so the duplicated
   half measures exactly 50% and the loop stays seamless. */
.tly-item,
.tly-sep {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.tly-sep {
	margin-right: var( --tly-separator-gap, var( --tly-item-gap, 1.5rem ) );
	margin-left: var( --tly-separator-gap, var( --tly-item-gap, 1.5rem ) );
	color: var( --tly-separator-color, currentColor );
	font-size: var( --tly-separator-size, inherit );
	opacity: 0.5;
	user-select: none;
}

/* Fallback spacing when the separator character is empty. */
.tly-item + .tly-item {
	margin-left: var( --tly-item-gap, 1.5rem );
}

.tly-link {
	display: inline-flex;
	align-items: baseline;
	gap: var( --tly-prefix-gap, 0.4em );
	/* !important: see the note on `.tly-ticker` above — this is the
	   property that was actually observed losing to Elementor's Kit CSS
	   (`.elementor-kit-7 a { color: ...; }` outranks a bare `.tly-link` on
	   specificity), which otherwise makes every headline render in the
	   theme's global link colour with an underline instead of the ticker's
	   own configured — or inherited-transparent — style. */
	color: var( --tly-link-color, currentColor ) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.tly-link:hover,
.tly-link:focus {
	color: var( --tly-hover-color, currentColor ) !important;
}

.tly-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.tly-prefix {
	color: var( --tly-prefix-color, currentColor );
	font-weight: var( --tly-prefix-weight, 700 );
}

/* Pause: hover only when the instance opted in; focus always, so a keyboard
   user is never chasing a moving link. */
.tly-ticker[data-tly-pause="1"]:hover .tly-track,
.tly-ticker:focus-within .tly-track,
.tly-ticker.tly-is-paused .tly-track {
	animation-play-state: paused;
}

@keyframes tly-scroll {
	from {
		transform: translateX( 0 );
	}

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

/*
 * Reduced motion: the animation stops, the duplicated copies are removed by
 * the script, and the strip becomes horizontally scrollable — so every
 * headline stays reachable rather than being clipped out of view.
 */
@media ( prefers-reduced-motion: reduce ) {

	.tly-track {
		animation: none;
	}

	.tly-viewport {
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.tly-item {
		scroll-snap-align: start;
	}
}

/* Same treatment when the script has detected reduced motion, for browsers
   applying the preference after first paint. */
.tly-ticker.tly-is-static .tly-track {
	animation: none;
}

.tly-ticker.tly-is-static .tly-viewport {
	overflow-x: auto;
	scroll-snap-type: x proximity;
}

.tly-ticker.tly-is-static .tly-item {
	scroll-snap-align: start;
}

@media ( max-width: 767px ) {

	.tly-ticker.tly-hide-mobile {
		display: none;
	}
}