/**
 * KCAU Notices — announcement marquee styles.
 * Loaded only on pages that actually use [kcau_notices_marquee].
 *
 * Designed to sit compactly below the main site navigation: single line,
 * navy/gold branding, no large vertical footprint.
 */

.kcau-marquee {
	background: #192C57;
	background: var(--kcau-navy, #192C57);
	border-bottom: 2px solid var(--kcau-gold, #CBAE2D);
	overflow: hidden;
	position: relative;
	white-space: nowrap;
	padding: 0;
}

.kcau-marquee-track {
	display: inline-flex;
	width: max-content;
	animation-name: kcau-marquee-scroll-left;
	animation-duration: var(--kcau-marquee-duration, 20s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.kcau-marquee[data-direction="right"] .kcau-marquee-track {
	animation-name: kcau-marquee-scroll-right;
}

/* Pause on hover, touch, and keyboard focus of any link inside. */
.kcau-marquee:hover .kcau-marquee-track,
.kcau-marquee-track:focus-within {
	animation-play-state: paused;
}

.kcau-marquee.is-paused .kcau-marquee-track {
	animation-play-state: paused;
}

@keyframes kcau-marquee-scroll-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes kcau-marquee-scroll-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

.kcau-marquee-list {
	display: inline-flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--kcau-marquee-gap, 50px);
	padding-right: var(--kcau-marquee-gap, 50px);
}

.kcau-marquee-item a {
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.kcau-marquee-item a:hover,
.kcau-marquee-item a:focus-visible {
	color: var(--kcau-gold, #CBAE2D);
	text-decoration: underline;
}

.kcau-marquee-item-urgent a {
	color: var(--kcau-gold, #CBAE2D);
}

.kcau-marquee-flag {
	font-size: 12px;
}

/* Respect the user's motion preference: no auto-scroll, show as a plain
   static (but still horizontally scrollable-by-hand) row instead. */
@media (prefers-reduced-motion: reduce) {
	.kcau-marquee-track {
		animation: none !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.kcau-marquee-list[aria-hidden="true"] {
		display: none; /* the duplicate copy is purely a motion trick; drop it when motion is off */
	}
}

@media (max-width: 480px) {
	.kcau-marquee-item a {
		font-size: 12px;
	}
}