/* Announcement banner */

#sp_banner {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2rem;
	z-index: 200;
	background-color: black;
	overflow: hidden;
	white-space: nowrap;
}

body.sp_banner-active #sp_banner {
	display: block;
}

.sp_banner_track {
	display: flex;
	width: max-content;
	height: 100%;
	animation-name: sp_banner_scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.sp_banner_group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.sp_banner_item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 1.5rem;
	color: white;
	font-size: 9pt;
	white-space: nowrap;
}

.sp_banner_dot {
	width: 0.6rem;
	height: 0.6rem;
	flex-shrink: 0;
	background-color: white;
}

@keyframes sp_banner_scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.sp_dark #sp_banner {
	background-color: white;
}

.sp_dark .sp_banner_item {
	color: black;
}

.sp_dark .sp_banner_dot {
	background-color: black;
}

/* Shift the existing nav down to make room for the banner */

body.sp_banner-active #sp_title {
	top: 2rem;
}

body.sp_banner-active #sp_lang_switch {
	top: 3.25rem;
}

body.sp_banner-active #sp_filter_panel {
	top: 5.5rem;
}

@media only screen and (max-width: 600px) {
	body.sp_banner-active #sp_title {
		top: 2.4rem;
	}
}