.asf-news-ticker {
	color: #fff;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.83;
}
.asf-news-ticker .asf-news-ticker__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.asf-news-ticker .asf-news-ticker__item {
	margin: 0;
	padding: 0;
	overflow-wrap: anywhere;
}
.asf-news-ticker .asf-news-ticker__item a {
	color: inherit;
	text-decoration: none;
}
/*
 * Grid lets a parent arrange its direct children into rows and columns.
 * Here the <ul> is the grid container and each headline <li> is a grid item.
 * Normally Grid would put these items in separate cells. Below, we explicitly
 * put every headline in the same cell so they overlap during the crossfade.
 * ticker-enabled is our own CSS class name, not a built-in CSS or Grid feature.
 * It means JavaScript has enabled the rotating version of this ticker.
 * news-ticker.js adds it to the outer .asf-news-ticker element when there are
 * multiple headlines. It stays in place when reduced motion is requested:
 * headlines still rotate one at a time, but without the fade effect.
 *
 * In .asf-news-ticker.ticker-enabled, the two class names have no space between
 * them: the same element must have BOTH classes for these rules to apply.
 * The space before .asf-news-ticker__items then selects the list inside it.
 * This makes the stacked, rotating layout conditional on JavaScript being enabled.
 * Without JavaScript, all headlines remain a readable static list. A single
 * headline also stays static and does not need the ticker-enabled class.
 * The class stays in place while rotation is paused by hover or keyboard focus;
 * pausing changes the JavaScript timer, not the layout.
 */
.asf-news-ticker.ticker-enabled .asf-news-ticker__items { display: grid; }
.asf-news-ticker.ticker-enabled .asf-news-ticker__item {
	/*
	 * grid-area starts with the row number, then the column number (both start at 1).
	 * With no end positions supplied here, each item occupies one cell: row 1,
	 * column 1. Giving every headline these same coordinates stacks them together.
	 *
	 * Unlike position: absolute, these items still contribute to the layout height.
	 * The shared row grows to fit the tallest headline, including text wrapping.
	 * This prevents the content below from jumping when a longer headline appears,
	 * and the browser recalculates that height automatically when the width changes.
	 */
	grid-area: 1 / 1;
	/* Hide inactive headlines without removing their space from the grid calculation.
	 * Using display: none here would lose the height reserved for those headlines. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 500ms ease-out, visibility 0s 500ms;
}
.asf-news-ticker.ticker-enabled .asf-news-ticker__item.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 500ms ease-out;
}
.asf-news-ticker a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* Reduced motion removes animation only; the grid still shows one headline at a time. */
@media (prefers-reduced-motion: reduce) {
	/* Include the active selector so this overrides its transition rule as well. */
	.asf-news-ticker.ticker-enabled .asf-news-ticker__item,
	.asf-news-ticker.ticker-enabled .asf-news-ticker__item.is-active {
		transition: none;
	}
}