/**
 * JN News Ticker — base defaults. Colors/typography/spacing come from
 * Elementor Style tab controls (see the widget class) — this file only
 * handles layout/structure/animation.
 */

.jnw-ticker-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
}

/* ---- Text / link (shared by both modes) ---- */

.jnw-ticker-item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	flex-shrink: 0;
}

.jnw-ticker-text {
	line-height: 1.3;
}

.jnw-ticker-link {
	text-decoration: underline;
	transition: color .2s ease;
}

/* ---- Horizontal (Marquee) mode ---- */

.jnw-ticker-horizontal .jnw-ticker-track {
	display: flex;
	width: max-content;
	animation: jnw-ticker-marquee var(--jnw-ticker-duration, 20s) linear infinite;
}

.jnw-ticker-dir-right .jnw-ticker-track {
	animation-direction: reverse;
}

.jnw-ticker-wrap[data-pause-hover="yes"]:hover .jnw-ticker-track {
	animation-play-state: paused;
}

@keyframes jnw-ticker-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-100% / var(--jnw-ticker-repeat, 4))); }
}

.jnw-ticker-track-group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.jnw-ticker-divider {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}

.jnw-ticker-divider svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ---- Vertical (discrete slider) mode ---- */

.jnw-ticker-vertical {
	display: flex;
	align-items: center;
	gap: 10px;
	/* FIX: default alignment for the whole arrow+text+arrow group within
	   the wrap's full width — overridden by the new Alignment Style
	   control when set to center/right. */
	justify-content: flex-start;
}

.jnw-ticker-vertical-viewport {
	position: relative;
	overflow: hidden;
	/* FIX (arrows spread to the far edges of the container instead of
	   sitting next to the text): this used to be flex:1, which forces
	   the viewport to expand and consume ALL remaining space in the
	   flex row — pushing the two fixed-size arrow buttons apart to the
	   two far edges of whatever container the widget sits in, however
	   wide that happens to be. Confirmed against the reference design
	   the client provided: the arrows sit immediately next to the text,
	   not spread to the container's edges. Fixed by giving the viewport
	   an explicit, admin-configurable Width instead of an elastic
	   flex:1 — same reasoning as the Height control just below it. */
	flex-shrink: 0;
	/* Static fallback if the dynamic Elementor Width control's CSS
	   somehow fails to apply — same defensive reasoning as the Height
	   fallback already in place. */
	width: 320px;
	max-width: 100%;
	/* FIX (widget showing nothing at all — confirmed via DevTools: this
	   element measured 0px tall live): height is meant to come from the
	   Style tab's Fixed Height control, present before any JS runs so
	   the box never visibly resizes on load — but if that dynamic CSS
	   ever fails to apply (e.g. a stale cached CSS file after this
	   widget's controls changed), every child here is position:absolute
	   (out of normal flow), so the viewport has nothing left to size
	   itself by and collapses to 0 height, and everything inside
	   disappears completely under overflow:hidden. This fallback keeps
	   the widget usably visible even if that happens. */
	min-height: 44px;
}

.jnw-ticker-vertical-track {
	position: relative;
	height: 100%;
	/* Perspective belongs on the direct parent of whatever gets the 3D
	   rotateX transform (.jnw-ticker-slide) — putting it any higher up
	   the tree wouldn't apply, since perspective only affects direct
	   children's own 3D transforms. */
	perspective: 400px;
}

.jnw-ticker-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	/* FIX: text was left-aligned by default — the reference design has
	   it centered between the two edge-anchored arrows. */
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .4s ease, transform .4s ease;
}

.jnw-ticker-slide-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Slide Animation — Fade (default) uses only the opacity transition
   already set on .jnw-ticker-slide above, nothing further needed. */

/* Slide Animation — Slide Up: entering rises up while fading in; the
   outgoing slide (losing .jnw-ticker-slide-active) sinks back to the
   same offset while fading out — both directions share this one
   simple active/inactive toggle, no separate "leaving" state needed. */
.jnw-ticker-anim-slide-up .jnw-ticker-slide {
	transform: translateY(14px);
}
.jnw-ticker-anim-slide-up .jnw-ticker-slide-active {
	transform: translateY(0);
}

/* Slide Animation — 3D Flip: a departure-board-style rotation. Requires
   perspective on the parent track (see .jnw-ticker-vertical-track
   above) to actually render as 3D rather than a flat squash. */
.jnw-ticker-anim-flip-3d .jnw-ticker-slide {
	transform: rotateX(-90deg);
	transform-origin: center top;
	backface-visibility: hidden;
}
.jnw-ticker-anim-flip-3d .jnw-ticker-slide-active {
	transform: rotateX(0deg);
}

.jnw-ticker-arrow {
	flex-shrink: 0;
	border: 0;
	border-radius: 50%;
	width: 2.2em;
	height: 2.2em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	line-height: 1;
	transition: color .2s ease, background-color .2s ease;
}

/* ---- Accessibility: respect the user's motion preference ---- */

@media (prefers-reduced-motion: reduce) {
	.jnw-ticker-horizontal .jnw-ticker-track {
		animation: none;
	}
	.jnw-ticker-slide {
		transition: none;
	}
}