/**
 * Live results: the site-wide bottom banner and the live story's refresh cues.
 * The election cards themselves are the theme's (overrides.css → Election results).
 */

/* ---------------------------------------------------------------- Banner */

.xtra-live-banner {
	position: fixed;
	inset-inline: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998; /* the membership bar's place: it stands aside while this is up */
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	background: var(--wp--preset--color--navy, #1E3A5F);
	color: #fff;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	font-family: var(--wp--preset--font-family--system-sans, system-ui, sans-serif);
}

/* One line, everything centered on the same middle: the pill, the words and the arrow. */
.xtra-live-banner .xtra-live-banner__link {
	flex: 1 1 auto;
	min-width: 0;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center;
	gap: 10px;
	height: 46px;
	margin: 0;
	padding: 0 4px 0 16px;
	color: #fff !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.xtra-live-banner .xtra-live-banner__pill,
.xtra-live-banner .xtra-live-banner__text,
.xtra-live-banner .xtra-live-banner__arrow {
	display: block !important;
	flex: none;
	margin: 0 !important;
	float: none !important;
	width: auto;
}

.xtra-live-banner .xtra-live-banner__pill {
	padding: 4px 9px;
	border-radius: 4px;
	background: #B70B12;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	animation: xtra-live-pulse 2s ease-in-out infinite;
}

.xtra-live-banner .xtra-live-banner__text {
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex-shrink: 1;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.xtra-live-banner .xtra-live-banner__arrow {
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--accent, #E87722);
}

.xtra-live-banner .xtra-live-banner__dismiss {
	flex: none;
	align-self: stretch;
	width: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.xtra-live-banner .xtra-live-banner__dismiss:hover,
.xtra-live-banner .xtra-live-banner__dismiss:focus-visible {
	color: #fff;
}

/* The smallest phones: the words in capitals still fit on the line. */
@media (max-width: 374px) {
	.xtra-live-banner .xtra-live-banner__link { gap: 7px; padding-left: 10px; }
	.xtra-live-banner .xtra-live-banner__text { font-size: 0.9rem; letter-spacing: 0.02em; }
	.xtra-live-banner .xtra-live-banner__pill { padding: 4px 7px; }
	.xtra-live-banner .xtra-live-banner__dismiss { width: 40px; }
}

@media (max-width: 339px) {
	.xtra-live-banner .xtra-live-banner__link { gap: 6px; padding-left: 8px; }
	.xtra-live-banner .xtra-live-banner__text { font-size: 0.8rem; letter-spacing: 0; }
	.xtra-live-banner .xtra-live-banner__pill { font-size: 0.7rem; padding: 4px 6px; }
	.xtra-live-banner .xtra-live-banner__dismiss { width: 36px; }
}

/* Room at the bottom of the page so the banner never covers the footer's last line. */
html.has-live-banner body {
	padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
}

@keyframes xtra-live-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.65; }
}

/* ---------------------------------------------------------------- The live story */

.xr-status__auto {
	margin-top: 8px;
	font-size: 0.8rem;
	color: var(--wp--preset--color--text-on-dark, #E2E8F0);
}

.xr-status__auto::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 50%;
	background: #22C55E;
	vertical-align: 1px;
	animation: xtra-live-pulse 2s ease-in-out infinite;
}

/* A section whose numbers just changed glows for a moment. */
.xr-fresh .xr-race,
.xr-status.xr-fresh {
	animation: xtra-live-fresh 2.5s ease-out;
}

@keyframes xtra-live-fresh {
	0% { box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.55); }
	100% { box-shadow: 0 0 0 3px rgba(232, 119, 34, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.xtra-live-banner__pill,
	.xr-status__auto::before,
	.xr-fresh .xr-race,
	.xr-status.xr-fresh {
		animation: none;
	}
}