/*
 * BD Player — front-end styles.
 *
 * Hand-written and intentionally tiny (no framework on the front end). Handles
 * the cover positioning for the YouTube iframe in both inline and full-page
 * modes. The JS sizes `.bdp-frame` so the 16:9 video always fills the box.
 */

.bdp-player {
	position: relative;
	overflow: hidden;
	background: #000;
}

/* Full-page background: fixed behind all page content. */
.bdp-player.bdp--fixed {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

/* The frame is sized + centered by the player script to cover the wrapper. */
.bdp-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: var(--bdp-opacity, 1);
	z-index: 0;
}

.bdp-frame iframe,
.bdp-frame video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.bdp-frame iframe {
	pointer-events: none;
}

/* Placeholder/poster shown instantly while the YouTube embed loads, then
   faded out once the video starts playing (set by the player script).
   !important guards the layout against theme `img` rules. */
.bdp-poster {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: cover !important;
	object-position: center;
	z-index: 1;
	opacity: 1;
	transition: opacity 600ms ease;
	pointer-events: none;
}
.bdp-player.bdp-playing .bdp-poster {
	opacity: 0;
}

/* Enclosed content sits in normal flow above the video, so it both renders
   over the background and grows the box (down to the min-height floor). */
.bdp-content {
	position: relative;
	z-index: 4;
}

/* Optional tint above the video. */
.bdp-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

/* Optional logo / watermark, sits above the video and the tint.
   Layout-critical properties are !important because the logo <img> is injected
   into arbitrary themes that frequently style `img` (position, margin, height,
   max-width) with higher specificity than a single class. */
.bdp-logo {
	position: absolute !important;
	z-index: 5;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	/* Use the configured width, but never let it dominate a small player. */
	width: min(var(--bdp-logo-w, 120px), 45%) !important;
	max-width: 45% !important;
	height: auto !important;
	max-height: none !important;
	pointer-events: none;
	user-select: none;
}
/* Each position sets BOTH axes (and resets the opposite offsets + transform)
   so the selected corner always wins, regardless of theme styles. */
.bdp-logo--top-left     { top: var(--bdp-logo-gap, 1.25rem) !important; left: var(--bdp-logo-gap, 1.25rem) !important; right: auto !important; bottom: auto !important; transform: none !important; }
.bdp-logo--top-right    { top: var(--bdp-logo-gap, 1.25rem) !important; right: var(--bdp-logo-gap, 1.25rem) !important; left: auto !important; bottom: auto !important; transform: none !important; }
.bdp-logo--bottom-left  { bottom: var(--bdp-logo-gap, 1.25rem) !important; left: var(--bdp-logo-gap, 1.25rem) !important; right: auto !important; top: auto !important; transform: none !important; }
.bdp-logo--bottom-right { bottom: var(--bdp-logo-gap, 1.25rem) !important; right: var(--bdp-logo-gap, 1.25rem) !important; left: auto !important; top: auto !important; transform: none !important; }
.bdp-logo--center       { top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; }

/* Full-page logo floated above page content (opt-in via the Logo setting or
   the logo_overlay shortcode attribute). Fixed so it stays put while scrolling
   and escapes the background wrapper's negative stacking context. */
.bdp-logo.bdp-fixed-logo { position: fixed !important; z-index: 99990; }

@media (max-width: 600px) {
	.bdp-logo { width: min(calc(var(--bdp-logo-w, 120px) * 0.8), 40%); }
}

/* Before the API loads, keep the area dark rather than flashing. */
.bdp-player:not(.bdp-ready) .bdp-frame {
	opacity: 0;
}
.bdp-player.bdp-ready .bdp-frame {
	opacity: var(--bdp-opacity, 1);
	transition: opacity 600ms ease;
}