/**
 * Hilaal Breaking News.
 *
 * One static stylesheet. Everything a bar can differ in is a custom property
 * set on the bar's own element, so two bars on a page can look nothing alike
 * without a line of generated CSS.
 */

.hlmq {
	--hlmq-height: 46px;
	--hlmq-padding: 16px;
	--hlmq-radius: 0px;
	--hlmq-border: 0px;
	--hlmq-border-color: transparent;
	--hlmq-bg: #0b1524;
	--hlmq-text: #fff;
	--hlmq-hover: currentColor;
	--hlmq-label-bg: #c8102e;
	--hlmq-label-text: #fff;
	--hlmq-icon: currentColor;
	--hlmq-size: 15px;
	--hlmq-size-tablet: 14px;
	--hlmq-size-mobile: 13px;
	--hlmq-weight: 600;
	--hlmq-leading: 1.4;
	--hlmq-letter: 0px;
	--hlmq-transform: none;
	--hlmq-container: 1240px;
	--hlmq-tablet: 1024px;
	--hlmq-mobile: 640px;
	--hlmq-shadow: none;
	--hlmq-sep-size: 8px;
	--hlmq-gap: 40px;

	position: relative;
	z-index: 50;
	box-sizing: border-box;
	width: 100%;
	border-radius: var(--hlmq-radius);
	border: var(--hlmq-border) solid var(--hlmq-border-color);
	background-color: var(--hlmq-bg);
	background-image: var(--hlmq-bg-image, none);
	box-shadow: var(--hlmq-shadow);
	color: var(--hlmq-text);
	font-size: var(--hlmq-size);
	line-height: var(--hlmq-leading);
	/* Contained so the moving track cannot lengthen the page. */
	contain: layout paint;
}

.hlmq *,
.hlmq *::before,
.hlmq *::after {
	box-sizing: inherit;
}

.hlmq--boxed {
	max-width: var(--hlmq-container);
	margin-inline: auto;
}

.hlmq.has-glass {
	background-color: color-mix(in srgb, var(--hlmq-bg) 72%, transparent);
}

@supports (backdrop-filter: blur(1px)) {
	.hlmq.has-glass {
		backdrop-filter: blur(var(--hlmq-blur, 10px)) saturate(1.5);
	}
}

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

.hlmq--top,
.hlmq--bottom {
	position: fixed;
	inset-inline: 0;
	z-index: 9998;
}

.hlmq--top {
	top: 0;
}

.hlmq--bottom {
	bottom: 0;
}

body.admin-bar .hlmq--top {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .hlmq--top {
		top: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .hlmq--top {
		top: 0;
	}
}

.hlmq--floating {
	position: fixed;
	inset-inline: 16px;
	bottom: 16px;
	z-index: 9998;
	width: auto;
	max-width: 640px;
	margin-inline: auto;
	border-radius: var(--hlmq-radius, 999px);
}

.hlmq.is-sticky:not(.hlmq--top):not(.hlmq--bottom):not(.hlmq--floating) {
	position: sticky;
	top: 0;
	z-index: 55;
}

/* Layout ------------------------------------------------------------------ */

.hlmq__inner {
	display: flex;
	align-items: stretch;
	gap: 0;
	min-height: var(--hlmq-height);
	max-width: var(--hlmq-container);
	margin-inline: auto;
	padding-inline: var(--hlmq-padding);
}

.hlmq--boxed .hlmq__inner,
.hlmq--floating .hlmq__inner {
	max-width: none;
}

.hlmq__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	align-self: center;
	margin-inline-end: 14px;
	padding: .35em .8em;
	border-radius: 3px;
	background-color: var(--hlmq-label-bg);
	color: var(--hlmq-label-text);
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hlmq--label-outline .hlmq__label {
	background-color: transparent;
	border: 1px solid currentColor;
	color: var(--hlmq-label-bg);
}

.hlmq--label-plain .hlmq__label {
	padding-inline: 0;
	background-color: transparent;
	color: var(--hlmq-label-bg);
}

.hlmq--label-pill .hlmq__label {
	border-radius: 999px;
}

.hlmq__label-icon {
	display: inline-flex;
}

/* A live indicator earns its pulse; nothing else animates. */

.hlmq__label-icon .hlmq-icon {
	display: block;
}

.hlmq__viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	/* The fade tells a reader the run continues past the edge. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.hlmq[dir="rtl"] .hlmq__viewport {
	-webkit-mask-image: linear-gradient(to left, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	mask-image: linear-gradient(to left, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.hlmq__track {
	display: flex;
	align-items: center;
	gap: var(--hlmq-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}

.hlmq__item {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* The separator is drawn on the item rather than added to the DOM, so the
   headline count stays the element count. It is a background image — a shape
   this plugin draws, or one the publisher uploaded — because a glyph depends on
   whichever font loaded and half the useful marks are missing from most faces.

   No image configured means no separator, and the gap alone does the spacing. */

.hlmq--marquee .hlmq__item::after {
	content: "";
	display: block;
	flex: none;
	width: var(--hlmq-sep-size, 8px);
	height: var(--hlmq-sep-size, 8px);
	margin-inline-start: var(--hlmq-gap);
	background-image: var(--hlmq-sep-image, none);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: .55;
}

.hlmq__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	font-family: var(--hlmq-font, inherit);
	font-size: inherit;
	font-weight: var(--hlmq-weight);
	letter-spacing: var(--hlmq-letter);
	text-decoration: none;
	text-transform: var(--hlmq-transform);
	white-space: nowrap;
}

a.hlmq__link:hover,
a.hlmq__link:focus-visible {
	color: var(--hlmq-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hlmq__thumb {
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: 3px;
	object-fit: cover;
}

.hlmq__icon {
	display: inline-flex;
	flex: none;
	color: var(--hlmq-icon);
}

.hlmq__category {
	flex: none;
	padding: .15em .5em;
	border-radius: 3px;
	background-color: var(--hlmq-accent, var(--hlmq-label-bg));
	color: var(--hlmq-label-text);
	font-size: .75em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.hlmq__time {
	flex: none;
	opacity: .65;
	font-size: .82em;
	font-variant-numeric: tabular-nums;
}

/* Controls ---------------------------------------------------------------- */

.hlmq__controls {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: none;
	align-self: center;
	margin-inline-start: 12px;
}

.hlmq__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	opacity: .7;
	transition: opacity .15s ease, background-color .15s ease;
}

.hlmq__button:hover,
.hlmq__button:focus-visible {
	opacity: 1;
	background-color: color-mix(in srgb, currentColor 16%, transparent);
}

.hlmq__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 1px;
}

.hlmq__play {
	display: none;
}

.hlmq.is-paused .hlmq__play {
	display: block;
}

.hlmq.is-paused .hlmq__pause {
	display: none;
}

/* Animations --------------------------------------------------------------

   Marquee runs on a CSS animation with a JS-set duration, so the browser can
   composite it off the main thread. The one-at-a-time animations are driven by
   a class the script toggles, which is cheaper than animating every item. */

.hlmq--marquee .hlmq__track {
	animation: hlmq-run var(--hlmq-duration, 30s) linear infinite;
	animation-delay: var(--hlmq-delay, 0ms);
}

.hlmq--marquee[dir="rtl"] .hlmq__track {
	animation-name: hlmq-run-rtl;
}

@keyframes hlmq-run {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(calc(-1 * var(--hlmq-run, 100%)), 0, 0); }
}

@keyframes hlmq-run-rtl {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(var(--hlmq-run, 100%), 0, 0); }
}

.hlmq.is-paused .hlmq__track,
.hlmq[data-hover="on"]:hover .hlmq__track,
.hlmq[data-focus="on"]:focus-within .hlmq__track {
	animation-play-state: paused;
}

/* One at a time: every item is stacked and only the current one is shown. */

.hlmq--ticker .hlmq__track,
.hlmq--slide .hlmq__track,
.hlmq--fade .hlmq__track,
.hlmq--flip .hlmq__track,
.hlmq--vertical .hlmq__track {
	display: grid;
	gap: 0;
	width: 100%;
}

.hlmq--ticker .hlmq__item,
.hlmq--slide .hlmq__item,
.hlmq--fade .hlmq__item,
.hlmq--flip .hlmq__item,
.hlmq--vertical .hlmq__item {
	grid-area: 1 / 1;
	max-width: 100%;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--hlmq-transition, 600ms) ease,
		transform var(--hlmq-transition, 600ms) cubic-bezier(.22, .61, .36, 1),
		visibility 0s linear var(--hlmq-transition, 600ms);
}

.hlmq--ticker .hlmq__item.is-current,
.hlmq--slide .hlmq__item.is-current,
.hlmq--fade .hlmq__item.is-current,
.hlmq--flip .hlmq__item.is-current,
.hlmq--vertical .hlmq__item.is-current {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.hlmq--slide .hlmq__item,
.hlmq--ticker .hlmq__item {
	transform: translate3d(24px, 0, 0);
}

.hlmq[dir="rtl"].hlmq--slide .hlmq__item,
.hlmq[dir="rtl"].hlmq--ticker .hlmq__item {
	transform: translate3d(-24px, 0, 0);
}

.hlmq--vertical .hlmq__item {
	transform: translate3d(0, 100%, 0);
}

.hlmq--flip .hlmq__item {
	transform: rotateX(-90deg);
	transform-origin: top center;
}

.hlmq--flip .hlmq__track {
	perspective: 400px;
}

/* The item leaving goes the other way, so the two cross rather than stack. */

.hlmq--slide .hlmq__item.is-leaving,
.hlmq--ticker .hlmq__item.is-leaving {
	transform: translate3d(-24px, 0, 0);
}

.hlmq--vertical .hlmq__item.is-leaving {
	transform: translate3d(0, -100%, 0);
}

.hlmq--flip .hlmq__item.is-leaving {
	transform: rotateX(90deg);
}

/* The one-at-a-time animations do not need the edge fade. */

.hlmq--ticker .hlmq__viewport,
.hlmq--slide .hlmq__viewport,
.hlmq--fade .hlmq__viewport,
.hlmq--flip .hlmq__viewport,
.hlmq--vertical .hlmq__viewport {
	-webkit-mask-image: none;
	mask-image: none;
}

.hlmq--ticker .hlmq__link,
.hlmq--slide .hlmq__link,
.hlmq--fade .hlmq__link,
.hlmq--flip .hlmq__link,
.hlmq--vertical .hlmq__link {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hlmq--ticker .hlmq__item::after,
.hlmq--slide .hlmq__item::after,
.hlmq--fade .hlmq__item::after,
.hlmq--flip .hlmq__item::after,
.hlmq--vertical .hlmq__item::after {
	content: none;
}

/* Before the script runs, the first headline is the visible one, so the bar is
   never blank and never a stack of overlapping text. */

.hlmq:not(.is-ready).hlmq--ticker .hlmq__item:first-child,
.hlmq:not(.is-ready).hlmq--slide .hlmq__item:first-child,
.hlmq:not(.is-ready).hlmq--fade .hlmq__item:first-child,
.hlmq:not(.is-ready).hlmq--flip .hlmq__item:first-child,
.hlmq:not(.is-ready).hlmq--vertical .hlmq__item:first-child {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Dark mode ---------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.hlmq[data-dark-bg] {
		background-color: var(--hlmq-dark-bg, var(--hlmq-bg));
		color: var(--hlmq-dark-text, var(--hlmq-text));
	}
}

:root[data-theme="dark"] .hlmq[data-dark-bg] {
	background-color: var(--hlmq-dark-bg, var(--hlmq-bg));
	color: var(--hlmq-dark-text, var(--hlmq-text));
}

:root[data-theme="dark"] .hlmq[data-dark-bg] .hlmq__label {
	background-color: var(--hlmq-dark-label-bg, var(--hlmq-label-bg));
	color: var(--hlmq-dark-label-text, var(--hlmq-label-text));
}

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1024px) {
	.hlmq {
		font-size: var(--hlmq-size-tablet);
	}

	.hlmq--hide-tablet {
		display: none;
	}
}

@media (max-width: 640px) {
	.hlmq {
		font-size: var(--hlmq-size-mobile);
		--hlmq-gap: 28px;
	}

	.hlmq__inner {
		padding-inline: 12px;
	}

	.hlmq__label {
		margin-inline-end: 10px;
		padding-inline: .55em;
	}

	.hlmq__label-text {
		display: none;
	}

	.hlmq--label-plain .hlmq__label-text,
	.hlmq__label:not(:has(.hlmq__label-icon)) .hlmq__label-text {
		display: inline;
	}

	.hlmq__time,
	.hlmq__thumb {
		display: none;
	}

	.hlmq--hide-mobile {
		display: none;
	}
}

@media (min-width: 1025px) {
	.hlmq--hide-desktop {
		display: none;
	}
}

/* Motion and contrast ------------------------------------------------------ */

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

	.hlmq__item {
		transition: none !important;
	}

	/* Without motion the bar becomes a readable list rather than a slideshow. */
	.hlmq--marquee .hlmq__viewport,
	.hlmq--ticker .hlmq__viewport,
	.hlmq--slide .hlmq__viewport,
	.hlmq--fade .hlmq__viewport,
	.hlmq--flip .hlmq__viewport,
	.hlmq--vertical .hlmq__viewport {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.hlmq--ticker .hlmq__track,
	.hlmq--slide .hlmq__track,
	.hlmq--fade .hlmq__track,
	.hlmq--flip .hlmq__track,
	.hlmq--vertical .hlmq__track {
		display: flex;
		gap: var(--hlmq-gap);
	}

	.hlmq--ticker .hlmq__item,
	.hlmq--slide .hlmq__item,
	.hlmq--fade .hlmq__item,
	.hlmq--flip .hlmq__item,
	.hlmq--vertical .hlmq__item {
		position: static;
		opacity: 1;
		visibility: visible;
	}
}

@media (forced-colors: active) {
	.hlmq {
		border: 1px solid CanvasText;
	}

	.hlmq__label {
		border: 1px solid CanvasText;
	}
}

.hlmq .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}