/* News ticker above the footer, styled like the gold announcement bar below the header. It only
   moves once chrome.js adds .is-animated, so without JavaScript, or with reduced motion turned
   on, the posts show as a static list. Navy on gold is about 7:1; the hover fills links navy
   with white text (about 12.6:1), since no lighter blue is readable on gold. */
.tpm-ticker,
.tpm-ticker * {
	box-sizing: border-box;
}

.tpm-ticker {
	background: #f0ae0d;
	color: #032d7f;
	font-family: "Inter", Arial, sans-serif;
}

.tpm-ticker__inner {
	display: flex;
	align-items: center;
	gap: 0.5rem 1.25rem;
	max-width: 76rem;
	margin: 0 auto;
	padding: 0.5rem 2rem;
}

.tpm-ticker .tpm-ticker__label {
	flex-shrink: 0;
	margin: 0;
	padding: 0.25rem 0.625rem;
	font-family: "Inter", Arial, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #ffffff;
	background: #032d7f;
	border-radius: 3px;
}

.tpm-ticker__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.tpm-ticker__track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tpm-ticker__item {
	position: relative;
	flex-shrink: 0;
	margin: 0;
}

.tpm-ticker__item + .tpm-ticker__item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -1rem;
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	border-radius: 50%;
	background: #032d7f;
}

.tpm-ticker .tpm-ticker__link {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: #032d7f;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	border-radius: 3px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tpm-ticker .tpm-ticker__link:hover,
.tpm-ticker .tpm-ticker__link:focus-visible {
	color: #ffffff;
	background: #032d7f;
	text-decoration-color: transparent;
}

.tpm-ticker__date {
	margin-right: 0.5rem;
	font-weight: 500;
}

.tpm-ticker .tpm-ticker__toggle {
	display: none;
	flex-shrink: 0;
	align-items: center;
	margin-left: auto;
	padding: 0.25rem 0.625rem;
	font-family: "Inter", Arial, sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	color: #032d7f;
	background: transparent;
	border: 1px solid #032d7f;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tpm-ticker .tpm-ticker__toggle:hover,
.tpm-ticker .tpm-ticker__toggle:focus {
	color: #ffffff;
	background: #032d7f;
	border-color: #032d7f;
}

.tpm-ticker .tpm-ticker__all {
	flex-shrink: 0;
	padding: 0.25rem 0.625rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #032d7f;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	border-radius: 3px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tpm-ticker .tpm-ticker__all:hover,
.tpm-ticker .tpm-ticker__all:focus-visible {
	color: #ffffff;
	background: #032d7f;
	text-decoration-color: transparent;
}

.tpm-ticker .tpm-ticker__link:focus-visible,
.tpm-ticker .tpm-ticker__all:focus-visible,
.tpm-ticker .tpm-ticker__toggle:focus-visible {
	outline: 3px solid #032d7f;
	outline-offset: 2px;
}

/* Moving version. Each post carries its own trailing gap and dot, so the second copy of the
   list starts exactly half way along the track and the loop has no visible jump. */
.tpm-ticker.is-animated .tpm-ticker__viewport {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
	mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
}

.tpm-ticker.is-animated .tpm-ticker__track {
	flex-wrap: nowrap;
	gap: 0;
	width: max-content;
	animation: tpm-ticker-scroll var(--tpm-ticker-duration, 40s) linear infinite;
}

.tpm-ticker.is-animated .tpm-ticker__item {
	padding-right: 2rem;
}

.tpm-ticker.is-animated .tpm-ticker__item::before {
	content: none;
}

.tpm-ticker.is-animated .tpm-ticker__item::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1rem;
	width: 5px;
	height: 5px;
	margin: -2.5px -2.5px 0 0;
	border-radius: 50%;
	background: #032d7f;
}

.tpm-ticker.is-animated .tpm-ticker__link {
	white-space: nowrap;
}

.tpm-ticker.is-animated .tpm-ticker__toggle {
	display: inline-flex;
}

.tpm-ticker.is-paused .tpm-ticker__track,
.tpm-ticker.is-animated .tpm-ticker__viewport:hover .tpm-ticker__track,
.tpm-ticker.is-animated .tpm-ticker__viewport:focus-within .tpm-ticker__track {
	animation-play-state: paused;
}

@keyframes tpm-ticker-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tpm-ticker.is-animated .tpm-ticker__track {
		animation: none;
	}
}

@media (max-width: 767px) {
	.tpm-ticker__inner {
		flex-wrap: wrap;
		padding: 0.5rem 1rem;
	}

	.tpm-ticker__viewport {
		order: 3;
		flex-basis: 100%;
	}

	.tpm-ticker .tpm-ticker__link {
		font-size: 0.875rem;
	}
}