/**
 * SFAG News Ticker — frontend styles
 *
 * Layout matches the SFAG ticker design:
 *   [ dark title block ] [ white content viewport ] [ arrow nav ]
 *
 * All visual properties use CSS variables so client themes can re-skin
 * without overriding rules. Set on .sfag-ticker:
 *   --sfag-ticker-bg, --sfag-ticker-color
 *   --sfag-ticker-title-bg, --sfag-ticker-title-color
 *   --sfag-ticker-border, --sfag-ticker-height
 */

.sfag-ticker {
	--sfag-ticker-bg: #ffffff;
	--sfag-ticker-color: #1a1a1a;
	--sfag-ticker-title-bg: #1a1a1a;
	--sfag-ticker-title-color: #ffffff;
	--sfag-ticker-border: #1a1a1a;
	--sfag-ticker-height: 44px;
	--sfag-ticker-speed: 30s;

	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: var(--sfag-ticker-height);
	background: var(--sfag-ticker-bg);
	color: var(--sfag-ticker-color);
	border-top: 1px solid var(--sfag-ticker-border);
	border-bottom: 1px solid var(--sfag-ticker-border);
	box-sizing: border-box;
	overflow: hidden;
	font-family: inherit;
	line-height: 1.3;
}

/* ===== Title block (dark left segment) ===== */
.sfag-ticker__title {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	background: var(--sfag-ticker-title-bg);
	color: var(--sfag-ticker-title-color);
	font-weight: 700;
	white-space: nowrap;
	/* Diagonal cut on the right edge for the visual style. */
	clip-path: polygon(0 0, 100% 0, calc(100% - 1.25em) 100%, 0 100%);
	padding: 0 2.5em 0 1.5em;
}

/* ===== Viewport (white center area showing current item) ===== */
.sfag-ticker__viewport {
	flex: 1 1 auto;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 0 1em;
	min-width: 0;
}

.sfag-ticker__track {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	width: 100%;
}

.sfag-ticker__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.sfag-ticker__link,
.sfag-ticker__text {
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sfag-ticker__link:hover,
.sfag-ticker__link:focus {
	text-decoration: underline;
}

.sfag-ticker__separator {
	display: inline-block;
	margin: 0 0.5em;
	opacity: 0.6;
}

/* ===== Navigation arrows (right side) ===== */
.sfag-ticker__nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.25em;
	padding: 0 0.75em;
	border-left: 1px solid var(--sfag-ticker-border);
}

.sfag-ticker__arrow {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0.5em;
	cursor: pointer;
	color: var(--sfag-ticker-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	transition: opacity 0.15s ease, background 0.15s ease;
	opacity: 0.6;
}

.sfag-ticker__arrow:hover,
.sfag-ticker__arrow:focus {
	opacity: 1;
	outline: none;
}

.sfag-ticker__arrow:focus-visible {
	box-shadow: 0 0 0 2px currentColor;
}

/* ===== Fade / rotate (default — matches screenshot) ===== */
.sfag-ticker--fade .sfag-ticker__viewport {
	min-height: var(--sfag-ticker-height);
}

.sfag-ticker--fade .sfag-ticker__track {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 1.5em;
}

.sfag-ticker--fade .sfag-ticker__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
	pointer-events: none;
}

.sfag-ticker--fade .sfag-ticker__item.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* ===== Horizontal scroll (marquee-style) ===== */
.sfag-ticker--scroll .sfag-ticker__viewport {
	padding: 0;
}

.sfag-ticker--scroll .sfag-ticker__track {
	flex-wrap: nowrap;
	will-change: transform;
	animation: sfag-ticker-scroll var(--sfag-ticker-speed) linear infinite;
	padding-left: 1em;
}

.sfag-ticker--scroll .sfag-ticker__item {
	padding: 0 0.25em;
}

.sfag-ticker--scroll.is-paused .sfag-ticker__track {
	animation-play-state: paused;
}

@keyframes sfag-ticker-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ===== Vertical scroll (stacked headlines) ===== */
.sfag-ticker--vertical .sfag-ticker__viewport {
	height: var(--sfag-ticker-height);
}

.sfag-ticker--vertical .sfag-ticker__track {
	flex-direction: column;
	align-items: flex-start;
	will-change: transform;
}

.sfag-ticker--vertical .sfag-ticker__item {
	height: var(--sfag-ticker-height);
	display: flex;
	align-items: center;
	width: 100%;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
	.sfag-ticker--scroll .sfag-ticker__track,
	.sfag-ticker--vertical .sfag-ticker__track {
		animation: none;
		transform: none;
	}
	.sfag-ticker--fade .sfag-ticker__item {
		transition: none;
	}
	.sfag-ticker__arrow {
		transition: none;
	}
}

/* ===== Mobile ===== */
@media (max-width: 600px) {
	.sfag-ticker__title {
		padding: 0 2em 0 1em;
		font-size: 0.9em;
	}
	.sfag-ticker__nav {
		padding: 0 0.5em;
	}
}