/**
 * WiseCoach Notices — scrolling banner styles
 */

.wc-notices-bar {
	--wc-bar-bg: #0b3d5c;
	--wc-bar-accent: #e8a317;
	--wc-bar-text: #ffffff;
	--wc-bar-muted: rgba(255, 255, 255, 0.85);
	--wc-bar-height: 44px;

	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	min-height: var(--wc-bar-height);
	background: linear-gradient(90deg, #083049 0%, #0b3d5c 45%, #0e4a6e 100%);
	color: var(--wc-bar-text);
	overflow: hidden;
	box-sizing: border-box;
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	position: relative;
	z-index: 100;
}

.wc-notices-bar *,
.wc-notices-bar *::before,
.wc-notices-bar *::after {
	box-sizing: border-box;
}

.wc-notices-label {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 16px;
	background: var(--wc-bar-accent);
	color: #1a1200;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	position: relative;
	z-index: 2;
	white-space: nowrap;
}

.wc-notices-label::after {
	content: "";
	position: absolute;
	right: -10px;
	top: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 22px 0 22px 10px;
	border-color: transparent transparent transparent var(--wc-bar-accent);
}

.wc-notices-viewport {
	flex: 1 1 auto;
	overflow: hidden;
	display: flex;
	align-items: center;
	mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.wc-notices-track {
	display: flex;
	width: max-content;
	animation: wc-notices-scroll 35s linear infinite;
	will-change: transform;
}

.wc-notices-bar:hover .wc-notices-track {
	animation-play-state: paused;
}

.wc-notices-group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	padding-right: 3rem;
}

.wc-notice-item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	padding: 0 0.25rem;
	color: var(--wc-bar-muted);
}

.wc-notice-title {
	color: var(--wc-bar-text);
	font-weight: 650;
}

.wc-notice-separator {
	display: inline-block;
	margin: 0 1.5rem;
	color: var(--wc-bar-accent);
	opacity: 0.9;
	font-size: 1.1em;
	line-height: 1;
}

@keyframes wc-notices-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wc-notices-track {
		animation: none;
		transform: none;
		flex-wrap: wrap;
		width: 100%;
		justify-content: flex-start;
		padding: 8px 12px;
	}

	.wc-notices-group[aria-hidden="true"] {
		display: none;
	}

	.wc-notices-group {
		flex-wrap: wrap;
		white-space: normal;
		padding-right: 0;
		gap: 0.5rem 0;
	}

	.wc-notice-item {
		white-space: normal;
	}

	.wc-notice-separator {
		display: none;
	}
}

@media (max-width: 640px) {
	.wc-notices-bar {
		--wc-bar-height: 40px;
		font-size: 13px;
	}

	.wc-notices-label {
		padding: 0 12px;
		font-size: 11px;
	}

	.wc-notices-label::after {
		border-width: 20px 0 20px 8px;
		right: -8px;
	}

	.wc-notices-track {
		animation-duration: 28s;
	}

	.wc-notice-separator {
		margin: 0 1rem;
	}
}
