:root {
	/* Core theme variables */
	--ticker-height: min(30px, 4vh); /* Height of the ticker container */
	--caption-height: 50%; /* Height of the ticker caption */
	--caption-bg-color: #EC0B43; /* Background color for ticker caption */
	--text-color: white; /* Text color */
	--font-size: clamp(0.875rem, 2vw, 1.1rem); /* Base font size */
	--caption-font-size: clamp(0.7rem, 1.5vw, 0.8rem); /* Font size for caption text */
	--padding: clamp(3px, 1vw, 5px); /* Padding for list items */
}

/* Global styles */
* {
	margin: 0; /* Remove default margin */
	padding: 0; /* Remove default padding */
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Set font family */
}

.ticker-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--ticker-height);
	width: 100%;
	text-align: center;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 1);
	color: var(--text-color);
	font-size: var(--font-size);
	border-bottom: 1px solid var(--text-color);
	z-index: 10;
}

/* Caption overlay that remains fixed while content scrolls */
.ticker-caption {
	height: var(--caption-height); /* Set height from variable */
	width: 150px; /* Full width */
	background-color: var(--caption-bg-color); /* Background color for caption */
	display: table; /* Use table display for vertical centering */
	position: absolute; /* Position absolutely within the container */
	color: var(--text-color); /* Set text color */
	font-size: var(--caption-font-size); /* Set font size for caption */
	z-index: 2; /* Ensure it appears above other elements */
}

.ticker-caption p {
	display: table-cell;
	vertical-align: middle;
	font-weight: bold;
	text-transform: uppercase;
}

/* Container for scrolling content */
.ticker-container ul {
	list-style: none;
	height: auto;
	margin-left: 150px;
	position: relative;
	z-index: 1; /* Place list items below caption */
}

/* Animation states for ticker items */
.ticker-container ul div {
	overflow: hidden;
	position: absolute;
	z-index: 0;
	display: inline;
	min-width: 100%;
	left: 0;
	transition: 0.25s ease-in-out;
}

.ticker-container ul div.ticker-active {
	top: 0;
}

.ticker-container ul div.not-active {
	top: 30px;
}

.ticker-container ul div.remove {
	top: -30px;
}

.ticker-container ul div li {
	padding: var(--padding);
}

.ticker-container ul div li a {
	color: var(--caption-bg-color);
}

/* Mobile-friendly adjustments */
.ticker-container {
	height: 30px; /* Reduced height for smaller ticker */
	text-align: left; /* Align text to the left */
}

.ticker-container .ticker-caption {
	height: 100%; /* Full height for caption */
	width: 150px; /* Fixed width for caption */
	background: url('../images/ticker-caption-bg.png'); /* Background image for caption */
}

.ticker-container .ticker-caption p {
	text-align: left; /* Align text to the left */
	padding-left: 7px; /* Padding for left alignment */
}

.ticker-container ul {
	margin-left: 150px; /* Align with caption width */
	height: 100%; /* Full height */
}

.ticker-container ul div {
	height: 100%; /* Full height for ticker items */
	left: 0; /* Position relative to margin */
}