/**
 * DQ Video Consent -- placeholder styles.
 *
 * Deliberately free of theme tokens, Tailwind, and webfonts: the plugin has to
 * look sane under any theme, and must not pull a single external request while
 * it is standing in for a blocked embed.
 *
 * Four things drive the structure here:
 *
 *  - Every colour is a custom property with an inline fallback, so a site
 *    themes the placeholder by declaring the tokens anywhere above it -- see
 *    the list below. There is deliberately no default token block to beat on
 *    specificity or source order; the fallbacks live in the var() calls.
 *  - The blocked state's appearance lives on .dqvc__box, which only exists
 *    while the video is blocked. So it needs no cancelling when the player
 *    loads -- there is nothing to cancel.
 *  - Where the embed block already provides an aspect-ratio box, we fill it
 *    rather than nesting a second one inside it.
 *  - Button rules are a deliberate reset cluster scoped under .dqvc /
 *    .dqvc__overlay. Tailwind's preflight ships
 *    `[type=button], button { background-color: transparent }`, and
 *    `[type=button]` has the same specificity as a single class, so an unscoped
 *    `.dqvc__button` loses to it whenever the theme's stylesheet loads second.
 *    Scoping makes these order-independent.
 *
 * Tokens, with their fallbacks:
 *
 *   --dqvc-surface               #f2f3f5   inline placeholder background
 *   --dqvc-text                  #1f2933   inline placeholder text
 *   --dqvc-accent                #1f2933   the "this is blocked" border
 *   --dqvc-radius                3px       button corner
 *   --dqvc-btn-bg                #1f2933   inline grant button
 *   --dqvc-btn-text              #fff
 *   --dqvc-btn-bg-hover          #000
 *   --dqvc-overlay-bg            rgba( 24, 26, 30, 0.9 )
 *   --dqvc-overlay-text          #fff
 *   --dqvc-overlay-btn-bg        #fff      grant button on the dark overlay
 *   --dqvc-overlay-btn-text      #1f2933
 *   --dqvc-overlay-btn-bg-hover  #e6e8eb
 *
 * --dqvc-ratio is set inline by the script from the embed's real dimensions and
 * is not a theming hook.
 */

/* A neutered iframe is hidden until the script replaces it. It has no src, so
   nothing loads either way -- this only stops an empty frame flashing up. */
.dqvc-blocked {
	display: none !important;
}

/* Geometry and inherited colour only. The light background also backs the
   no-JS fallback, and sits harmlessly behind the player once it loads. */
.dqvc {
	position: relative;
	width: 100%;
	aspect-ratio: var( --dqvc-ratio, 16 / 9 );
	background: var( --dqvc-surface, #f2f3f5 );
	color: var( --dqvc-text, #1f2933 );
}

/* Core's embed block sizes a responsive embed with a padding-box on
   .wp-block-embed__wrapper and absolutely positions the iframe against it. The
   placeholder stands in for that iframe, so it has to behave the same way --
   otherwise its own aspect box stacks on top of the wrapper's and the embed
   grows to fill the column. The block's declared ratio is also more
   trustworthy than the provider's reported dimensions.

   Descendant, not child: anything else filtering embed_oembed_html can wrap
   what we return before it reaches the page, and a wrapping filter is a
   common shape -- nocookie4yt wrapped the placeholder in a <span> and a child
   combinator here silently matched nothing. inset:0 resolves against the
   nearest positioned ancestor, which is .wp-block-embed__wrapper (core makes
   it position:relative) unless such a wrapper positions itself. */
.wp-block-embed__wrapper .dqvc {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.dqvc .dqvc__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The placeholder itself, and the overlay drawn over a registered gate. */
.dqvc .dqvc__box,
.dqvc__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	padding: 1.5em;
	text-align: center;
}

/* Deliberately conspicuous: a blocked video should read as blocked rather than
   as a quiet empty box. This is why the appearance lives here and not on .dqvc
   -- .dqvc__box is removed the moment consent is given, so the border cannot
   survive into the playing state. */
.dqvc .dqvc__box {
	border: 2px solid var( --dqvc-accent, #1f2933 );
}

/* font-size is set in rem, not inherited: a gated element may set `font-size: 0`
   on itself to kill inline whitespace under an image, and this overlay is
   appended inside that element. Every size in here is em-based, so inheriting
   that zero collapsed the whole overlay -- the button became a 2px dot of its
   own border, with no hit area. Do not change it to em. */
.dqvc__overlay {
	background: var( --dqvc-overlay-bg, rgba( 24, 26, 30, 0.9 ) );
	color: var( --dqvc-overlay-text, #fff );
	font-size: 1rem;
	z-index: 2;
}

/* The overlay is absolutely positioned against whatever it covers. The class is
   added by the script to any element a registered gate matched, so this stays
   free of any one site's block names. */
.dqvc-gated {
	position: relative;
}

/* color is restated because themes routinely style bare p elements, which
   would otherwise beat plain inheritance from .dqvc / .dqvc__overlay. */
.dqvc .dqvc__heading,
.dqvc__overlay .dqvc__heading {
	margin: 0;
	color: inherit;
	font-size: 1.0625em;
	font-weight: 700;
	line-height: 1.3;
}

.dqvc .dqvc__body,
.dqvc__overlay .dqvc__body {
	margin: 0;
	max-width: 42ch;
	color: inherit;
	font-size: 0.875em;
	line-height: 1.45;
}

.dqvc .dqvc__actions,
.dqvc__overlay .dqvc__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin: 0.25em 0 0;
}

/* A reset cluster, not decoration: buttons inherit no font, default to
   cursor:default, and are the element themes interfere with most. Every
   property here is one a theme or Tailwind's preflight actively sets. */
.dqvc .dqvc__button,
.dqvc__overlay .dqvc__button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0.6em 1.1em;
	border: 1px solid transparent;
	border-radius: var( --dqvc-radius, 3px );
	background-image: none;
	font-family: inherit;
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	cursor: pointer;
}

.dqvc .dqvc__button:disabled,
.dqvc__overlay .dqvc__button:disabled {
	cursor: default;
	opacity: 0.6;
}

.dqvc .dqvc__button--primary {
	background-color: var( --dqvc-btn-bg, #1f2933 );
	border-color: var( --dqvc-btn-bg, #1f2933 );
	color: var( --dqvc-btn-text, #fff );
}

.dqvc .dqvc__button--primary:hover:not( :disabled ),
.dqvc .dqvc__button--primary:focus-visible {
	background-color: var( --dqvc-btn-bg-hover, #000 );
	border-color: var( --dqvc-btn-bg-hover, #000 );
}

.dqvc__overlay .dqvc__button--primary {
	background-color: var( --dqvc-overlay-btn-bg, #fff );
	border-color: var( --dqvc-overlay-btn-bg, #fff );
	color: var( --dqvc-overlay-btn-text, #1f2933 );
}

.dqvc__overlay .dqvc__button--primary:hover:not( :disabled ),
.dqvc__overlay .dqvc__button--primary:focus-visible {
	background-color: var( --dqvc-overlay-btn-bg-hover, #e6e8eb );
	border-color: var( --dqvc-overlay-btn-bg-hover, #e6e8eb );
}

.dqvc .dqvc__button:focus-visible,
.dqvc__overlay .dqvc__button:focus-visible,
.dqvc .dqvc__link:focus-visible,
.dqvc .dqvc__noscript:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.dqvc .dqvc__link,
.dqvc__overlay .dqvc__link,
.dqvc .dqvc__noscript {
	color: inherit;
	font-size: 0.8125em;
	text-decoration: underline;
}

/* The no-JS fallback has no box around it, so it centres itself. */
.dqvc .dqvc__noscript {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	padding: 1em;
	text-align: center;
}

/* Short embeds cannot fit the full prompt, so drop to the essentials. */
@media ( max-width: 400px ) {

	.dqvc .dqvc__box,
	.dqvc__overlay {
		padding: 0.75em;
		gap: 0.5em;
	}

	.dqvc .dqvc__heading,
	.dqvc__overlay .dqvc__heading {
		font-size: 0.9375em;
	}

	.dqvc .dqvc__body,
	.dqvc__overlay .dqvc__body {
		font-size: 0.8125em;
	}

	.dqvc .dqvc__actions,
	.dqvc__overlay .dqvc__actions {
		flex-direction: column;
	}
}