/*
 * Live-report update media safety.
 * Loaded only on singular /live/ report pages and scoped by body class.
 */
body.hit-live-report main,
body.hit-live-report article,
body.hit-live-report .entry-content,
body.hit-live-report [class*="update"],
body.hit-live-report [class*="timeline"],
body.hit-live-report [class*="flash"],
body.hit-live-report [class*="bulletin"] {
	min-width: 0;
}

/*
 * A video attached to a flash must be visible in full. Fixed-height wrappers
 * elsewhere on the site may use cover; live-report videos explicitly do not.
 */
body.hit-live-report main video,
body.hit-live-report article video,
body.hit-live-report [class*="update"] video,
body.hit-live-report [class*="timeline"] video,
body.hit-live-report [class*="flash"] video,
body.hit-live-report [class*="bulletin"] video {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: initial !important;
	object-position: initial !important;
	aspect-ratio: auto !important;
	background: transparent !important;
	box-sizing: border-box !important;
}

/* Embedded media inside the body of an update may never escape its card. */
body.hit-live-report main iframe,
body.hit-live-report main embed,
body.hit-live-report main object,
body.hit-live-report article iframe,
body.hit-live-report article embed,
body.hit-live-report article object {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

body.hit-live-report iframe[src*="youtube.com"],
body.hit-live-report iframe[src*="youtube-nocookie.com"],
body.hit-live-report iframe[src*="youtu.be"],
body.hit-live-report iframe[src*="vimeo.com"] {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	border: 0;
}

body.hit-live-report figure,
body.hit-live-report .wp-video,
body.hit-live-report .wp-caption,
body.hit-live-report .wp-block-video,
body.hit-live-report .wp-block-embed,
body.hit-live-report .wp-block-embed__wrapper,
body.hit-live-report .mejs-container {
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Never manufacture black letterboxing around an attached flash video. */
body.hit-live-report figure:has(video),
body.hit-live-report .wp-video:has(video),
body.hit-live-report .wp-block-video:has(video),
body.hit-live-report [class*="update"] [class*="media"]:has(video),
body.hit-live-report [class*="update"] [class*="video"]:has(video),
body.hit-live-report [class*="flash"] [class*="media"]:has(video),
body.hit-live-report [class*="flash"] [class*="video"]:has(video),
body.hit-live-report [class*="bulletin"] [class*="media"]:has(video),
body.hit-live-report [class*="bulletin"] [class*="video"]:has(video) {
	background: transparent !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.hit-live-report .mejs-container,
body.hit-live-report .mejs-inner,
body.hit-live-report .mejs-mediaelement {
	background: transparent !important;
}

/* Markup inserted by the two flash-only editor controls. */
body.hit-live-report .hit-live-update-center {
	text-align: center !important;
}

body.hit-live-report hr.hit-live-update-separator {
	display: block;
	width: 100%;
	height: 0;
	margin: 1.25rem 0;
	padding: 0;
	border: 0;
	border-top: 1px solid currentColor;
	opacity: .22;
	clear: both;
}

/*
 * The attached-video container is the usual source of cropping. Relax only
 * media/video wrappers that actually contain a video, and only on live pages.
 */
@supports selector(figure:has(> video)) {
	body.hit-live-report figure:has(video),
	body.hit-live-report .wp-video:has(video),
	body.hit-live-report [class*="update"] *:has(> video),
	body.hit-live-report [class*="timeline"] *:has(> video),
	body.hit-live-report [class*="flash"] *:has(> video),
	body.hit-live-report [class*="bulletin"] *:has(> video),
	body.hit-live-report [class*="update"] [class*="media"]:has(video),
	body.hit-live-report [class*="update"] [class*="video"]:has(video),
	body.hit-live-report [class*="update"] [class*="attachment"]:has(video),
	body.hit-live-report [class*="timeline"] [class*="media"]:has(video),
	body.hit-live-report [class*="timeline"] [class*="video"]:has(video),
	body.hit-live-report [class*="flash"] [class*="media"]:has(video),
	body.hit-live-report [class*="flash"] [class*="video"]:has(video) {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: auto !important;
		overflow: hidden !important;
	}
}

@media (max-width: 782px) {
	body.hit-live-report main video,
	body.hit-live-report article video,
	body.hit-live-report main iframe,
	body.hit-live-report article iframe,
	body.hit-live-report main embed,
	body.hit-live-report article embed,
	body.hit-live-report main object,
	body.hit-live-report article object {
		max-width: 100% !important;
	}
}

/*
 * Attached flash images must keep their intrinsic aspect ratio as well.
 * Scope this to live-update media only so site-wide thumbnails/cards are untouched.
 */
body.hit-live-report [class*="update"] figure img:not(.emoji):not(.avatar),
body.hit-live-report [class*="timeline"] figure img:not(.emoji):not(.avatar),
body.hit-live-report [class*="flash"] figure img:not(.emoji):not(.avatar),
body.hit-live-report [class*="bulletin"] figure img:not(.emoji):not(.avatar),
body.hit-live-report [class*="update"] [class*="media"] > img:not(.emoji):not(.avatar),
body.hit-live-report [class*="update"] [class*="image"] > img:not(.emoji):not(.avatar),
body.hit-live-report [class*="update"] [class*="attachment"] > img:not(.emoji):not(.avatar),
body.hit-live-report [class*="timeline"] [class*="media"] > img:not(.emoji):not(.avatar),
body.hit-live-report [class*="timeline"] [class*="image"] > img:not(.emoji):not(.avatar),
body.hit-live-report [class*="timeline"] [class*="attachment"] > img:not(.emoji):not(.avatar),
body.hit-live-report [class*="flash"] [class*="media"] > img:not(.emoji):not(.avatar),
body.hit-live-report [class*="flash"] [class*="image"] > img:not(.emoji):not(.avatar),
body.hit-live-report [class*="flash"] [class*="attachment"] > img:not(.emoji):not(.avatar),
body.hit-live-report [class*="bulletin"] [class*="media"] > img:not(.emoji):not(.avatar),
body.hit-live-report [class*="bulletin"] [class*="image"] > img:not(.emoji):not(.avatar),
body.hit-live-report [class*="bulletin"] [class*="attachment"] > img:not(.emoji):not(.avatar),
body.hit-live-report [class*="update"] img.wp-post-image,
body.hit-live-report [class*="timeline"] img.wp-post-image,
body.hit-live-report [class*="flash"] img.wp-post-image,
body.hit-live-report [class*="bulletin"] img.wp-post-image {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	object-fit: initial !important;
	object-position: initial !important;
	/* A number of live-feed UIs absolutely position the image inside a crop box.
	 * Put it back in normal flow so the frame grows to the image's true height. */
	position: static !important;
	inset: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* Release fixed crop-boxes only when they actually wrap an update image. */
@supports selector(figure:has(> img)) {
	body.hit-live-report [class*="update"] figure:has(> img:not(.emoji):not(.avatar)),
	body.hit-live-report [class*="timeline"] figure:has(> img:not(.emoji):not(.avatar)),
	body.hit-live-report [class*="flash"] figure:has(> img:not(.emoji):not(.avatar)),
	body.hit-live-report [class*="bulletin"] figure:has(> img:not(.emoji):not(.avatar)),
	body.hit-live-report [class*="update"] [class*="media"]:has(> img:not(.emoji):not(.avatar)),
	body.hit-live-report [class*="update"] [class*="image"]:has(> img:not(.emoji):not(.avatar)),
	body.hit-live-report [class*="update"] [class*="attachment"]:has(> img:not(.emoji):not(.avatar)),
	body.hit-live-report [class*="timeline"] [class*="media"]:has(> img:not(.emoji):not(.avatar)),
	body.hit-live-report [class*="timeline"] [class*="image"]:has(> img:not(.emoji):not(.avatar)),
	body.hit-live-report [class*="timeline"] [class*="attachment"]:has(> img:not(.emoji):not(.avatar)),
	body.hit-live-report [class*="flash"] [class*="media"]:has(> img:not(.emoji):not(.avatar)),
	body.hit-live-report [class*="flash"] [class*="image"]:has(> img:not(.emoji):not(.avatar)),
	body.hit-live-report [class*="flash"] [class*="attachment"]:has(> img:not(.emoji):not(.avatar)),
	body.hit-live-report [class*="bulletin"] [class*="media"]:has(> img:not(.emoji):not(.avatar)),
	body.hit-live-report [class*="bulletin"] [class*="image"]:has(> img:not(.emoji):not(.avatar)),
	body.hit-live-report [class*="bulletin"] [class*="attachment"]:has(> img:not(.emoji):not(.avatar)) {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: auto !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		box-sizing: border-box !important;
		line-height: 0 !important;
		/* The frame now sizes from the in-flow image. Hidden only keeps borders
		 * and rounded corners visually clean; it no longer performs cropping. */
		overflow: hidden !important;
	}
}

/*
 * 1.9.13 - Responsive mobile playback and minimal controls for videos embedded
 * in the body of an individual flash/update. Everything stays scoped to live reports.
 */
body.hit-live-report .hit-flash-minimal-player {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-sizing: border-box !important;
	line-height: 0 !important;
	overflow: hidden !important;
}

body.hit-live-report .hit-flash-minimal-player > video,
body.hit-live-report .hit-flash-minimal-player .mejs-mediaelement > video {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	object-fit: initial !important;
	background: transparent !important;
	margin: 0 !important;
}

/* Hide MediaElement's full toolbar only inside the explicitly enhanced player. */
body.hit-live-report .hit-flash-minimal-player .mejs-controls,
body.hit-live-report .hit-flash-minimal-player .mejs-overlay-play,
body.hit-live-report .hit-flash-minimal-player .mejs-layers {
	display: none !important;
}

body.hit-live-report .hit-flash-minimal-controls {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: rgba(20, 20, 20, .72);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .16);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	line-height: 1;
	direction: ltr;
}

body.hit-live-report .hit-flash-player-button {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-width: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	line-height: 1;
	touch-action: manipulation;
}

body.hit-live-report .hit-flash-player-button:hover,
body.hit-live-report .hit-flash-player-button:focus-visible {
	background: rgba(255, 255, 255, .14);
}

body.hit-live-report .hit-flash-player-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

body.hit-live-report .hit-flash-player-button svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
	pointer-events: none;
}

/* Keep looped flash media inline and proportional on phones and tablets. */
body.hit-live-report video[data-hit-live-video-enhanced="loop"] {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	object-fit: initial !important;
	background: transparent !important;
}

@media (max-width: 782px) {
	body.hit-live-report .hit-flash-minimal-player,
	body.hit-live-report video[data-hit-live-video-enhanced="loop"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.hit-live-report .hit-flash-minimal-controls {
		right: 8px;
		bottom: 8px;
		padding: 4px;
	}

	body.hit-live-report .hit-flash-player-button {
		width: 34px;
		height: 34px;
		min-width: 34px;
	}
}

/* MediaElement uses absolutely positioned internal layers by default. Reset
 * those only after the specific body-video player was enhanced, so its height
 * can follow the video's intrinsic ratio instead of an old fixed player size. */
body.hit-live-report .hit-flash-minimal-player.mejs-container .mejs-inner,
body.hit-live-report .hit-flash-minimal-player.mejs-container .mejs-mediaelement {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
}

body.hit-live-report .hit-flash-minimal-player.mejs-container video {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
}

body.hit-live-report .hit-flash-minimal-player video,
body.hit-live-report video[data-hit-live-video-enhanced="loop"] {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
