/*
 * The documentation video modal.
 *
 * Loaded only on `plugin_documents` singles, by inc/doc-video-modal.php.
 * Deliberately NOT in global.css: that file is on a 32 KB minified budget and
 * sits at 79% of it, and this is chrome for one post type.
 *
 * A native <dialog> arrives with a lot already done — the UA centres it, puts
 * it in the top layer above every stacking context, and paints a ::backdrop.
 * What is left is sizing, the close button, and undoing the UA's default
 * white box.
 */

.bp-doc-video-modal {
	/* Undo the UA's white page-like box; the video is the surface. */
	padding: 0;
	border: 0;
	background: transparent;
	max-width: none;
	max-height: none;
	overflow: visible;
	color: #fff;
}

.bp-doc-video-modal::backdrop {
	background: rgb(0 0 0 / 78%);
}

/*
 * Stop the page scrolling behind the modal.
 *
 * `showModal()` makes the rest of the document inert to CLICKS and to the tab
 * order, but browsers still scroll the body behind an open dialog. astra-child
 * solved this by toggling a class on <html> from jQuery; `:has()` does it with
 * no JavaScript and no state to get out of sync when the dialog closes some
 * other way. Already used elsewhere in this project (store.css keys on
 * `body:has(.bkp-empty-checkout)`).
 */
html:has(.bp-doc-video-modal[open]) {
	overflow: hidden;
}

.bp-doc-video-modal__inner {
	position: relative;
	/*
	 * 900px on a wide screen, 92vw on a narrow one — and never taller than the
	 * viewport, which is what `min()` against 82vh buys on a landscape phone
	 * where 92vw of 16:9 would otherwise overflow.
	 */
	width: min(900px, 92vw, calc(82vh * 16 / 9));
}

.bp-doc-video-modal__frame {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 8px;
	background: #000;
}

.bp-doc-video-modal__close {
	position: absolute;
	/*
	 * Above the frame rather than inside it. Over the video it would sit on top
	 * of YouTube's own controls on a short viewport, and the two would fight.
	 */
	right: 0;
	bottom: calc(100% + 8px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 12%);
	color: #fff;
	cursor: pointer;
}

.bp-doc-video-modal__close:hover,
.bp-doc-video-modal__close:focus-visible {
	background: rgb(255 255 255 / 24%);
}

/* The focus ring has to be visible against a near-black backdrop. */
.bp-doc-video-modal__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.bp-doc-video-modal__close svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/*
 * The triggers live in post content and are promoted to role="button" by the
 * JS, so they need to look and focus like controls. Scoped to `[data-video]`
 * so nothing else in an article is affected.
 */
[data-video] {
	cursor: pointer;
}

[data-video]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}