/*
 * Background Video support for the Group block — NPM Refinery
 *
 * Pairs with npm-hero-video.php (adds .npm-has-bg-video + <video>) and
 * npm-hero-video-control.js (editor control that picks the video).
 *
 * No :has() used — .npm-has-bg-video is added directly by the PHP
 * filter, so styling doesn't depend on browser support for it.
 */

.npm-has-bg-video {
	position: relative;
	overflow: hidden;
}

/* Other direct children need to sit above the video layer. */
.npm-has-bg-video > :not(.npm-hero-video) {
	position: relative;
	z-index: 1;
}

.npm-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: 100% !important; /* overrides WP's is-layout-constrained max-width on direct children — needed since that rule ships with !important in global styles */
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none; /* decorative background, never blocks clicks */
}

/* Dark tint for legible text over video — same effect as Cover block's Dim. */
.npm-has-bg-video::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(0, 0, 0, 0.65);
	pointer-events: none;
}

/* "Disable video on mobile" toggle — falls back to the block's own
   background-image. Matches project's standard mobile breakpoint. */
@media (max-width: 600px) {
	.npm-hero-video--no-mobile {
		display: none;
	}
	.main-navigation ul#primary-menu {
		background-color: var(--wp--preset--color--primary, #182b0f);
    	opacity: 1;
	}
}