/**
 * PF YouTube Ambient — the overlay on a YouTube embed that plays by itself.
 *
 * The iframe is YouTube's; everything here sits over it. A shield swallows the
 * pointer so YouTube's own hover chrome never appears, and two glass chips —
 * sound, full screen — fade in when the pointer is over the frame. The chips take
 * their blur and rim from the shared `.pf-glass` rules (pf-glass.css) and only
 * set layout, colour and motion, the way the CV popup does.
 *
 * Nothing here sets a radius on the video: the site's 10 px comes from
 * pf-consistency. The one exception is full screen, where the frame runs to the
 * edge of the window and a rounded corner would read as broken.
 *
 * Selectors carry a `.pf-yt` ancestor on purpose. Kadence styles a bare `button`
 * and its :hover with an accent fill; a single class would lose that argument.
 */

.pf-yt {
	position: relative;
}

/* ---------- the shield --------------------------------------------------- */

.pf-yt .pf-yt__shield {
	position: absolute;
	inset: 0;
	z-index: 2;
	-webkit-tap-highlight-color: transparent;
}

/* ---------- the chips ---------------------------------------------------- */

.pf-yt .pf-yt__ui {
	position: absolute;
	z-index: 3;
	display: flex;
	gap: 8px;
	padding: 12px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms ease;
}

/* Hover feedback stays in the 100-150 ms band — it is feedback, not a transition.
   Hover is gated on a pointer that can really hover: a touch browser leaves
   :hover stuck on whatever was last tapped, and the chips would never go away.
   Touch gets `.is-open` instead, which the script sets for a few seconds. */
@media (hover: hover) {
	.pf-yt:hover .pf-yt__ui,
	.pf-yt:focus-within .pf-yt__ui {
		opacity: 1;
		pointer-events: auto;
	}
}

.pf-yt.is-open .pf-yt__ui {
	opacity: 1;
	pointer-events: auto;
}

/* Keyboard focus reveals them on any device — an iPad with a keyboard has no
   hover either. Its own rule: a browser without :has() drops only this one. */
.pf-yt:has( .pf-yt__btn:focus-visible ) .pf-yt__ui {
	opacity: 1;
	pointer-events: auto;
}

.pf-yt .pf-yt__ui--br { right: 0; bottom: 0; }
.pf-yt .pf-yt__ui--bl { left: 0; bottom: 0; }
.pf-yt .pf-yt__ui--tr { right: 0; top: 0; }
.pf-yt .pf-yt__ui--tl { left: 0; top: 0; }

/* Clear glass over a plum veil. The shared tint (6 % of the light heading colour)
   is right over a still canvas and unreadable over a bright frame, so the chips
   carry the canvas colour at a third strength instead. */
.pf-yt .pf-yt__btn {
	--pf-glass-tint: rgba(20, 18, 26, 0.38);
	--pf-glass-tint-hover: rgba(20, 18, 26, 0.55);
	--pf-glass-rim: rgba(245, 243, 247, 0.35);

	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	color: #f5f3f7;
	line-height: 1;
	background: var(--pf-glass-tint);
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}

.pf-yt .pf-yt__btn:hover,
.pf-yt .pf-yt__btn:focus-visible {
	color: #f5f3f7;
	background: var(--pf-glass-tint-hover);
	box-shadow: none;
}

.pf-yt .pf-yt__btn:focus-visible {
	outline: 2px solid #c8a2e8;
	outline-offset: 2px;
}

/* Accent means state: the sound chip is lit while there is sound. */
.pf-yt .pf-yt__sound[aria-pressed="true"] {
	color: #b07bd8;
}

/* ---------- the icons ---------------------------------------------------- */

.pf-yt .pf-yt__ico {
	display: flex;
	pointer-events: none;
}

.pf-yt .pf-yt__ico--on,
.pf-yt .pf-yt__ico--exit {
	display: none;
}

.pf-yt .pf-yt__sound[aria-pressed="true"] .pf-yt__ico--off,
.pf-yt.is-fullscreen .pf-yt__ico--enter {
	display: none;
}

.pf-yt .pf-yt__sound[aria-pressed="true"] .pf-yt__ico--on,
.pf-yt.is-fullscreen .pf-yt__ico--exit {
	display: flex;
}

/* ---------- full screen -------------------------------------------------- */

/* The wrapper is what goes full screen, so the chips come with it. Two things
   hold the frame open at 16:9 with a spacer — core's responsive-embed rule on the
   wrapper (::before) and Kadence's `.entry-content-asset.videofit` box around the
   iframe (padding-top). Both have to go or the frame is pushed off the bottom of
   the screen. */
.pf-yt.is-fullscreen {
	width: 100%;
	height: 100%;
	background: #14121a;
}

.pf-yt.is-fullscreen::before {
	display: none;
}

.pf-yt.is-fullscreen .entry-content-asset {
	position: absolute;
	inset: 0;
	height: 100%;
	padding: 0;
}

.pf-yt.is-fullscreen iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Edge to edge, so square — the same rule as `alignfull`. Outranks pf-consistency's
   `body.pf-round .wp-block-embed iframe`. */
body.pf-round .wp-block-embed .pf-yt.is-fullscreen iframe {
	border-radius: 0;
}

.pf-yt::backdrop {
	background: #14121a;
}

/* ---------- stepping aside ----------------------------------------------- */

/* Reduced motion, or a video that will not play: the visitor gets YouTube's own
   player back, with its own controls, so nothing here may sit over it. */
.pf-yt.pf-yt--plain .pf-yt__shield,
.pf-yt.pf-yt--plain .pf-yt__ui,
.pf-yt.pf-yt--failed .pf-yt__shield,
.pf-yt.pf-yt--failed .pf-yt__ui {
	display: none;
}

/* A visitor who has asked for less transparency gets the solid surface. */
@media (prefers-reduced-transparency: reduce) {
	.pf-yt .pf-yt__btn {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: #1e1a24;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pf-yt .pf-yt__ui,
	.pf-yt .pf-yt__btn {
		transition: none;
	}
}