/*
 * Plyr theme for self-hosted <video> (assets/js/video-player.js). Plyr's own
 * stylesheet loads on demand from jsDelivr, inserted before this file so
 * these overrides win.
 */

:root {
	--plyr-color-main: var(--color-red);
	--plyr-font-family: inherit;
	--plyr-control-radius: 4px;
	--plyr-range-thumb-height: 12px;
	--plyr-range-track-height: 4px;
	--plyr-video-background: #000;
	--plyr-menu-radius: 6px;
}

.plyr {
	font-family: inherit;
	/* Size the control bar by the player's width, not the viewport's. */
	container-type: inline-size;
}

/* The seek bar must never collapse. */
.plyr__controls .plyr__progress__container {
	min-width: 72px;
}

/* Narrow players (article column, sidebars, phones): drop the volume slider and duration. */
@container (max-width: 560px) {
	.plyr__controls .plyr__volume {
		min-width: 0;
		max-width: none;
		width: auto;
	}

	.plyr__controls .plyr__volume input[type="range"],
	.plyr__controls .plyr__time--duration,
	.plyr__controls [data-plyr="pip"] {
		display: none;
	}
}

@container (max-width: 340px) {
	.plyr__controls .plyr__menu,
	.plyr__controls .plyr__time {
		display: none;
	}
}

/* Native <video> in articles: centred like embeds ([video] shortcode / video block). */
.main-content-text .plyr,
.wp-video .plyr {
	width: 100%;
}

.wp-video {
	max-width: 100%;
}

.main-content-text :is(.wp-video, .wp-block-video) {
	margin-inline: auto;
}

/* Mobile: bleed past the side padding to the screen edges, like body images. */
@media (max-width: 767px) {
	.main-content-text :is(.wp-video, .wp-block-video) {
		width: 100vw !important; /* WP writes an inline px width on .wp-video */
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.main-content-text :is(.wp-video, .wp-block-video) .plyr {
		border-radius: 0;
	}
}

/* Lead video box is a fixed 16:9 frame. */
.kj-article-lead--video .plyr,
.kj-article-lead--video .plyr__video-wrapper {
	height: 100%;
}

.kj-article-lead--video .plyr video {
	object-fit: contain;
}