/**
 * Presswire News Ticker
 *
 * A live wire: red call-block on the left, headlines running past it, hard clip
 * at the right edge. Everything is scoped to .pwnt so a theme cannot reach in,
 * and .pwnt wins the small fights (list bullets, link underlines) on purpose.
 */

.pwnt {
	--pwnt-bg: #3D0A0A;
	--pwnt-text: #F6F1EF;
	--pwnt-accent: #C71620;
	--pwnt-h: 46px;
	--pwnt-fade: 56px;
	--pwnt-duration: 40s;
	--pwnt-shift: 0px;
	--pwnt-size: 15px;
	--pwnt-weight: 400;
	--pwnt-gap: 36px;
	--pwnt-display: "Oswald", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;

	position: relative;
	z-index: 9;
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--pwnt-bg);
	color: var(--pwnt-text);
	border-top: 1px solid rgba(0, 0, 0, .25);
	border-bottom: 1px solid rgba(0, 0, 0, .25);
	overflow: hidden;
	contain: layout paint;
}

.pwnt *,
.pwnt *::before,
.pwnt *::after {
	box-sizing: border-box;
}

.pwnt__rail {
	display: flex;
	align-items: stretch;
	min-height: var(--pwnt-h);
}

/* ---- The call block ---------------------------------------------------- */

.pwnt__label {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	margin: 0;
	padding: 0 16px 0 14px;
	background: var(--pwnt-accent);
	color: #fff;
	font-family: var(--pwnt-display);
	font-size: clamp(12px, calc(var(--pwnt-size) * .55), 20px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 6px 0 12px -4px rgba(0, 0, 0, .55);
	z-index: 2;
}

.pwnt__pulse {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #fff;
	animation: pwnt-pulse 1.6s ease-in-out infinite;
}

@keyframes pwnt-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .35; transform: scale(.7); }
}

/* ---- The wire ---------------------------------------------------------- */

.pwnt__viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0; /* Without this the track refuses to shrink and the bar blows out. */
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.pwnt__viewport::-webkit-scrollbar {
	display: none;
}

/* Once JS has measured the run, hide the overflow and dissolve the trailing edge. */
.pwnt.is-live .pwnt__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--pwnt-fade)), transparent 100%);
	mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--pwnt-fade)), transparent 100%);
}

.pwnt.is-live.pwnt--right .pwnt__viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pwnt-fade), #000 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--pwnt-fade), #000 100%);
}

.pwnt__track {
	display: flex;
	align-items: center;
	width: max-content;
	min-height: var(--pwnt-h);
}

.pwnt.is-live .pwnt__track {
	animation: pwnt-run var(--pwnt-duration) linear infinite;
	will-change: transform;
}

.pwnt.is-live.pwnt--right .pwnt__track {
	animation-name: pwnt-run-right;
}

@keyframes pwnt-run {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(var(--pwnt-shift), 0, 0); }
}

@keyframes pwnt-run-right {
	from { transform: translate3d(var(--pwnt-shift), 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

.pwnt.is-live.is-paused .pwnt__track,
.pwnt.is-live.is-hidden-tab .pwnt__track,
.pwnt.is-live.pwnt--hoverpause:hover .pwnt__track,
.pwnt.is-live.pwnt--hoverpause:focus-within .pwnt__track {
	animation-play-state: paused;
}

/* ---- Headlines --------------------------------------------------------- */

.pwnt .pwnt__group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pwnt .pwnt__item {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The space between stories. The pseudo-element always exists and always carries
 * the margin, so "no separator" is simply the same gap with nothing in the middle
 * of it. Half the gap sits either side, which makes the total between two items
 * exactly --pwnt-gap.
 */
.pwnt .pwnt__item::after {
	content: "";
	display: inline-block;
	margin: 0 calc(var(--pwnt-gap) / 2);
	color: var(--pwnt-accent);
	font-family: var(--pwnt-display);
	font-size: var(--pwnt-size);
	font-weight: 500;
	line-height: 1;
	opacity: .85;
}

.pwnt--sep-slash .pwnt__item::after {
	content: "/";
}

.pwnt--sep-dot .pwnt__item::after {
	content: "•";
}

.pwnt--sep-square .pwnt__item::after {
	width: 6px;
	height: 6px;
	background: var(--pwnt-accent);
	opacity: 1;
}

.pwnt .pwnt__link {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	padding: 2px 0;
	color: var(--pwnt-text);
	font-size: var(--pwnt-size);
	font-weight: var(--pwnt-weight);
	line-height: 1.15;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	transition: color .15s ease;
}

/* Set the headlines in the condensed face rather than the theme's body font. */
.pwnt--display .pwnt__link {
	font-family: var(--pwnt-display);
}

.pwnt--upper .pwnt__headline {
	text-transform: uppercase;
	letter-spacing: .015em;
}

.pwnt .pwnt__link:hover,
.pwnt .pwnt__link:focus {
	color: #fff;
	text-decoration: none;
}

.pwnt .pwnt__link:hover .pwnt__headline,
.pwnt .pwnt__link:focus .pwnt__headline {
	text-decoration: underline;
	text-decoration-color: var(--pwnt-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.pwnt .pwnt__link:focus-visible {
	outline: 2px solid var(--pwnt-text);
	outline-offset: 3px;
}

.pwnt__time {
	flex: 0 0 auto;
	font-family: var(--pwnt-display);
	font-size: clamp(12px, calc(var(--pwnt-size) * .45), 16px);
	font-weight: 500;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	text-transform: uppercase;
	color: var(--pwnt-text);
	opacity: .5;
	transition: opacity .15s ease;
}

.pwnt .pwnt__link:hover .pwnt__time,
.pwnt .pwnt__link:focus .pwnt__time {
	opacity: .85;
}

.pwnt__flag {
	flex: 0 0 auto;
	padding: 3px 5px 2px;
	background: var(--pwnt-accent);
	color: #fff;
	font-family: var(--pwnt-display);
	font-size: clamp(10px, calc(var(--pwnt-size) * .42), 14px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	transform: translateY(-1px);
}

/* ---- Pause control ----------------------------------------------------- */

.pwnt__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, .14);
	background: transparent;
	color: var(--pwnt-text);
	opacity: .6;
	cursor: pointer;
	transition: opacity .15s ease, background-color .15s ease;
}

.pwnt__toggle:hover,
.pwnt__toggle:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, .08);
}

.pwnt__toggle:focus-visible {
	outline: 2px solid var(--pwnt-text);
	outline-offset: -4px;
}

.pwnt__icon {
	position: relative;
	display: block;
	width: 10px;
	height: 12px;
}

.pwnt__icon::before,
.pwnt__icon::after {
	content: "";
	position: absolute;
	top: 0;
	width: 3px;
	height: 12px;
	background: currentColor;
}

.pwnt__icon::before { left: 0; }
.pwnt__icon::after  { right: 0; }

.pwnt.is-paused .pwnt__icon::before {
	left: 1px;
	width: 0;
	height: 0;
	background: none;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent currentColor;
}

.pwnt.is-paused .pwnt__icon::after {
	display: none;
}

.pwnt__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Dismiss ----------------------------------------------------------- */

.pwnt__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, .14);
	background: transparent;
	color: var(--pwnt-text);
	opacity: .6;
	cursor: pointer;
	transition: opacity .15s ease, background-color .15s ease;
}

.pwnt__close:hover,
.pwnt__close:focus-visible {
	opacity: 1;
	background: var(--pwnt-accent);
}

.pwnt__close:focus-visible {
	outline: 2px solid var(--pwnt-text);
	outline-offset: -4px;
}

.pwnt__cross {
	position: relative;
	display: block;
	width: 12px;
	height: 12px;
}

.pwnt__cross::before,
.pwnt__cross::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	width: 12px;
	height: 2px;
	background: currentColor;
}

.pwnt__cross::before { transform: rotate(45deg); }
.pwnt__cross::after  { transform: rotate(-45deg); }

.pwnt.is-dismissed {
	display: none;
}

/* ---- Placement --------------------------------------------------------- */

.pwnt--fixed-top,
.pwnt--fixed-bottom {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9990;
}

.pwnt--fixed-top    { top: 0; }
.pwnt--fixed-bottom { bottom: 0; }

.pwnt--adminbar.pwnt--fixed-top { top: 32px; }

/*
 * A pinned bar sits on top of the page, so the page has to make room for it —
 * otherwise it covers the last line of the footer. The script measures the bar
 * and publishes its real height, which matters once the headlines are set large.
 */
body:has(.pwnt--fixed-top:not(.is-dismissed))    { padding-top: var(--pwnt-offset-top, 46px); }
body:has(.pwnt--fixed-bottom:not(.is-dismissed)) { padding-bottom: var(--pwnt-offset-bottom, 46px); }

/* ---- Small screens ----------------------------------------------------- */

@media (max-width: 782px) {
	.pwnt--adminbar.pwnt--fixed-top { top: 46px; }
}

@media (max-width: 600px) {
	.pwnt {
		--pwnt-h: 42px;
		--pwnt-fade: 32px;
	}

	.pwnt__label {
		padding: 0 12px 0 10px;
		font-size: 11px;
		letter-spacing: .1em;
	}

	.pwnt .pwnt__link {
		font-size: min(var(--pwnt-size), 18px);
		gap: 7px;
	}

	.pwnt .pwnt__item::after {
		margin: 0 calc(min(var(--pwnt-gap), 48px) / 2);
		font-size: min(var(--pwnt-size), 18px);
	}

	.pwnt__toggle,
	.pwnt__close {
		width: 36px;
	}
}

@media (max-width: 420px) {
	.pwnt__label-text {
		display: none; /* The pulse alone carries it. */
	}

	.pwnt__label {
		padding: 0 12px;
	}

	.pwnt__time {
		display: none;
	}
}

/* ---- Motion and print -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.pwnt .pwnt__track {
		animation: none !important;
		transform: none !important;
	}

	.pwnt .pwnt__viewport {
		overflow-x: auto !important;
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}

	.pwnt__pulse {
		animation: none;
	}

	.pwnt__toggle {
		display: none;
	}
}

@media print {
	.pwnt {
		display: none;
	}
}