/*
 * wakefly/video -- the one scoped stylesheet this block needs.
 *
 * Loaded through block.json's `style`/`editorStyle`, so it is enqueued only on a page that
 * renders the block and it is unaffected by the SCRIPT_DEBUG style.css/style.min.css split
 * in functions.php.
 *
 * Every colour here is a theme.json preset read through its own custom property -- the tint
 * plate is `bright-blue` and the play circle is `secondary`, which is what the unit's
 * `chrome` field measures them as, exactly. None of the three is restated as a hex literal.
 */

/*
 * BORDER-BOX, SCOPED TO THIS BLOCK. Neither WordPress core nor this theme sets a global
 * box-sizing reset, and core's own `* { box-sizing: border-box }` ships inside the block
 * library stylesheet, which is only enqueued for blocks core knows are on the page -- this
 * block's markup is written by hand, so none of it applies.
 */
.wp-block-wakefly-video,
.wp-block-wakefly-video *,
.wp-block-wakefly-video *::before,
.wp-block-wakefly-video *::after {
	box-sizing: border-box;
}

/*
 * THE ROOT. MEASURED AT ALL FOUR VIEWPORTS (unit structure, root box): 1296x817, 936x615,
 * 696x480, 366x294 -- the height tracking the width through the plate's 16:9, which is why
 * there is no height here at all.
 *
 * NO BACKGROUND, and that is measured rather than omitted: the root's computed
 * backgroundColor is rgba(0,0,0,0). _video.scss paints the plate and never the wrapper,
 * unlike the two image carousels whose roots are white. Painting white here to match its
 * siblings would paint something the source does not.
 *
 * padding-block 1.5rem is the shared `py-4` VerticalPadding class, measured identical at all
 * four viewports; there is no horizontal padding and no border.
 */
.wp-block-wakefly-video {
	padding-block: 1.5rem;
}

/* --------------------------------------------------------------------------- the intro */

/*
 * MEASURED 1296x24 / 936x24 / 696x24 / 366x24 -- full width at every viewport, since this
 * widget renders no container gutter of its own -- with marginBottom 16px. THE MARGIN IS A
 * TERM IN THE UNIT'S OWN `derivations` (88px between the root and the plate = 24 + 24 + 16 +
 * 24), so dropping it makes every instance 16px short. Font size, line height and colour are
 * the theme's body defaults and are measured as such (16px / 24px / rgb(51,51,51)), so
 * nothing restates them here.
 */
.wp-block-wakefly-video__intro {
	margin-block-end: 1rem;
}

.wp-block-wakefly-video__intro > :first-child {
	margin-block-start: 0;
}

.wp-block-wakefly-video__intro > :last-child {
	margin-block-end: 0;
}

/* ---------------------------------------------------------------------------- the plate */

/*
 * div.video-inner CONTRIBUTES NOTHING -- measured the same height as the plate at every
 * viewport, which is why the unit's `derivations` does not list it as a term. It is kept
 * because it is the source's own element and because it is what the plate's 100% width
 * resolves against.
 */
.wp-block-wakefly-video__inner {
	position: relative;
}

/*
 * THE CLICK TARGET AND THE TINT PLATE ARE ONE ELEMENT (unit `chrome`, "video-plate").
 * MEASURED 1296x729 at 1440 and 936x527 / 696x392 / 366x206 below it, each within a pixel of
 * width x 9/16 -- so the 16:9 is an aspect-ratio ON THIS ELEMENT and the height is never
 * written down.
 *
 * The blue is the whole of the tint: the thumbnail sits absolutely on top at opacity 0.6 and
 * the plate reads THROUGH it. There is no overlay element. _video.scss declares a
 * `.video-overlay` at rgba(28,58,169,0.7) that the .cshtml never emits -- a dead rule, and
 * the contract records it precisely so a build does not add one.
 *
 * PADDING IS DELIBERATELY NOT SET. _video.scss sets `border: 0` and never touches padding,
 * so Chromium's UA button padding (1px 6px) survives and the contract measures it. It is
 * invisible because the img is `inset: 0`, which resolves against the padding box and covers
 * it. Resetting it here would be a change the source does not make.
 *
 * THE FONT, HOWEVER, IS NOT THE SOURCE'S UA DEFAULT SHOWING THROUGH -- IT IS OURS, AND THAT
 * IS A DIFFERENCE RATHER THAN A REPRODUCTION. A <button> does not inherit font from its
 * parent: Chromium's UA sheet gives it `font: 400 13.3333px Arial`, and a fidelity
 * measurement pass on 2026-09-10 measured this element computing 13.3333px where the SOURCE
 * computes 16px. The source is not relying on a UA default either -- Bootstrap's reboot
 * carries `button, input, optgroup, select, textarea { font-family: inherit; font-size:
 * inherit; line-height: inherit }`, so the source's button inherits the page's own 16px body
 * type. The three declarations below are that rule, scoped to this element, and they are the
 * whole of the fix.
 *
 * NOTHING GEOMETRIC MOVES. The plate's height is its 16:9 against a 100% width, the play
 * circle sizes from `font-size: 2.5rem` -- a ROOT-relative unit, so it does not read this
 * element's size -- and the glyph is 1em OF THE CIRCLE. Measured identical at all four
 * viewports after the change; only the button's own computed font changes.
 */
.wp-block-wakefly-video__plate {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	background-color: var(--wp--preset--color--bright-blue);
	cursor: pointer;
	overflow: hidden;
}

/*
 * OPACITY 0.6 IS MEASURED AND HAS NOWHERE ELSE TO LIVE. core/image has no opacity attribute
 * and the style engine has no opacity property, so the unit's `structure` records it in prose
 * and names this stylesheet as its home. It is not decoration: it is what makes the blue read
 * through the photograph, and at opacity 1 the tint disappears entirely.
 */
.wp-block-wakefly-video__thumbnail {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.6;
}

/* ---------------------------------------------------------------------- the play circle */

/*
 * THREE SIZES ACROSS THE SWEEP (unit `chrome`, "play-button"): 50px base, 60px from
 * media-breakpoint-up(md) = 768, 96px from media-breakpoint-up(xl) = 1200. Measured 96x96 at
 * 1440, 60x60 at 1024 AND at 768 -- 1024 sits in the md band with 768 and only 1440 clears
 * xl -- and 50x50 at 390.
 *
 * THE GLYPH DOES NOT SCALE WITH THE CIRCLE: measured 40x40 at all four viewports, from
 * `font-size: 2.5rem` on the circle and a 1em SVG. So the font-size is written once, outside
 * the two media queries, and only width/height move.
 */
.wp-block-wakefly-video__play {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 50px;
	height: 50px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	font-size: 2.5rem;
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
}

.wp-block-wakefly-video__play-glyph {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/*
 * HOVER AND FOCUS REPAINT THE CIRCLE FROM `secondary` TO `primary` -- a change of hue, not a
 * tint. _video.scss: `&:hover, &:focus { .video-thumbnail-play-button { background: $primary } }`.
 *
 * NOTHING MEASURED IT AND THE CONTRACT SAYS SO IN AS MANY WORDS (unit `states`,
 * "play-button-hover" carries no `capture` key): the capture tool takes a click and cannot
 * hold a pointer over an element while it reads styles. The two colours below are read from
 * the stylesheet and the palette, and no box, no measured paint and no screenshot backs them.
 *
 * `:focus` RATHER THAN `:focus-visible`, which is the source's own selector and therefore
 * also repaints after a mouse click. The narrower modern selector would be an improvement the
 * source does not make.
 */
.wp-block-wakefly-video__plate:hover .wp-block-wakefly-video__play,
.wp-block-wakefly-video__plate:focus .wp-block-wakefly-video__play {
	background-color: var(--wp--preset--color--primary);
}

@media (min-width: 768px) {
	.wp-block-wakefly-video__play {
		width: 60px;
		height: 60px;
	}
}

@media (min-width: 1200px) {
	.wp-block-wakefly-video__play {
		width: 96px;
		height: 96px;
	}
}

/* -------------------------------------------------------------------------- the lightbox */

/*
 * NOTHING BELOW THIS LINE IS MEASURED, AND THAT IS THE CONTRACT'S OWN POSITION rather than a
 * gap in this build: "NO CAPTURE OF THE OPEN MODAL EXISTS AND NONE IS CLAIMED. #videoModal is
 * rendered by the page layout, outside this unit's source_selector ... Its geometry, its
 * backdrop and its close control are unmeasured."
 *
 * So this is a plain, accessible lightbox rather than a reproduction of one: a 16:9 player at
 * most 1200px wide, centred, on a dark backdrop, with a close control in the corner. The
 * <dialog> element supplies the top layer, the focus trap, Escape and focus restoration.
 */
.wp-block-wakefly-video__dialog {
	width: min(92vw, 1200px);
	max-width: none;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--white);
	overflow: visible;
}

.wp-block-wakefly-video__dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.85);
}

.wp-block-wakefly-video__dialog-inner {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--black);
}

.wp-block-wakefly-video__frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.wp-block-wakefly-video__close {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset-block-start: -2.75rem;
	inset-inline-end: 0;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	font-size: 1.25rem;
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
	cursor: pointer;
}

.wp-block-wakefly-video__close-glyph {
	width: 1em;
	height: 1em;
	fill: currentColor;
}