/* Fade the header's bottom gradient into whichever block follows it */
.page-header-block + * {
	position: relative;
}

/* With Header */
.page-header-block {
	background-color: var(--wp--preset--color--navy);
	position: relative;
}

.page-header-block::after {
	content: '';
	background: linear-gradient(180deg, rgba(19, 54, 88, 0.9) 10%, rgba(19, 54, 88, 0.7) 30%, rgba(86, 120, 155, 0.3) 70%, rgba(86, 120, 155, 0) 90%);
	height: var(--navbar-height);
	left: 0;
	mix-blend-mode: multiply;
	opacity: 0.9;
	position: absolute;
	top: 0;
	transition: .25s ease-in-out;
	width: 100%;
	z-index: 0;
}


/* Background styles */
/* -- Styling for images and video backgrouns  */
.page-header-block .background {
	height: 100dvh;
	left: 0;
	min-height: 800px;
	pointer-events: none; /* purely decorative — also catches MediaElement.js's play-button
	                          overlay on mobile (autoplay-blocked), which sits as a sibling
	                          of <video> and would otherwise stay clickable */
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;

	&::before {
		content: '';
		background-color: var(--wp--preset--color--black);
		height: 100%;
		left: 0;
		opacity: 0.2;
		position: absolute;
		top: 0;
		transition: .25s ease-in-out;
		width: 100vw;
		z-index: 1;
	}

	&::after {
		content: '';
		background: linear-gradient(90deg, rgba(0, 39, 80, 0.8) 0%, rgba(0, 89, 182, 0) 100%);
		/* background: linear-gradient(90deg, rgba(0, 39, 80, 0.7) 0%, rgba(0, 89, 182, 0) 100%); */
		height: 100%;
		left: 0;
		opacity: 1;
		position: absolute;
		top: 0;
		transition: .25s ease-in-out;
		width: 100vw;
		z-index: 1;
	}

	& img {
		height: 100dvh;
		min-height: 800px;
		object-fit: cover;
		object-position: center;
		width: 100vw;
	}

	iframe,
	video {
		aspect-ratio: 16 / 9;
		height: auto;
		left: 50%;
		min-height: 100%;
		min-width: 100%;
		object-fit: cover;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		width: auto;
	}
}

/* There's no browser API that can see Low Power Mode directly — this is the closest
   real, honest proxy the web has. Hides the decorative hero video/iframe so whatever
   sits behind it (a placeholder image, or the block's navy background) shows instead.
   Actually pausing the media (so it stops decoding rather than just being hidden)
   happens in JS — see page-header-block.js. */
@media (prefers-reduced-motion: reduce) {
	.page-header-block .background video,
	.page-header-block .background iframe {
		display: none !important;
	}
}

.page-header-block .video-slider {
	height: 100dvh !important;
	min-height: 800px;
	max-width: 100dvw;
} 
.page-header-block .video-slider .video-slide {
	height: 100dvh !important;
	min-height: 800px;
}

.page-header-block .mejs-mediaelement {
	height: 100dvh;
	min-height: 800px;
}

.page-header-block .mejs-container {
	max-width: none;
}

.page-header-block .mejs-controls {
	display: none !important;
}


body:not(.home) {

	.page-header-block p {
		opacity: 0;
		transition: opacity 0.6s ease;
	}

}

.page-header-block .container {
	height: 100%;
	position: relative;
	z-index: 1;

	> * {
		max-width: 500px;
	}

	> *:last-child {
		margin-bottom: 0 !important;
	}

	h1 {
		max-width: 70%;
		color: var(--wp--preset--color--white) !important;
		text-wrap: balance !important;
		text-transform: uppercase;
		transition: opacity 0.6s ease;
		@media screen and (max-width: 992px) {
			margin-left: auto;
			margin-right: auto;
			max-width: 90%;
			text-align: center;
		}
		@media screen and (max-width: 662px) {
			max-width: 100%;
		}
	}
	p {
		color: var(--wp--preset--color--white) !important;
		font-family: var(--light) !important;
		font-size: 18px;
		margin-top: 40px;
		@media screen and (max-width: 992px) {
			font-size: 15px;
			margin-left: auto;
			margin-right: auto;
			text-align: center;
		}
		@media screen and (max-width: 662px) {
			margin-top: 20px;
		}
	}

}

.page-header-block .meta {
	display: flex;
	font-family: var(--wp--preset--font-family--roboto-condensed-bold) !important;
	font-size: 20px;
	font-weight: 400;
	gap: 20px;
	margin-bottom: 20px;
	opacity: 0;
	transition: 1s ease-in-out;
}

.page-header-block .meta .date {
	color: var(--wp--preset--color--white);
}

.page-header-block .wp-block-buttons {
	@media screen and (max-width: 992px) {
		justify-content: center !important;
		margin-left: auto;
		margin-right: auto;
	}
}

.page-header-block .wp-block-button .wp-block-button__link:hover {
	color: var(--wp--preset--color--white) !important;
}

.page-header-block .down-arrow-container {
	align-items: center;
	bottom: 45px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	text-align: center;
	width: 120px;
	z-index: 2;

	& span {
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--roboto);
		font-size: 14px;
		font-weight: 400;
		margin-bottom: 7px;
	}

	& .down-arrow {
		transition: .25s ease-in-out;
		animation: bounce 1400ms infinite;
		background-color: var(--wp--preset--color--white);
		clip-path: polygon(0 0, 50% 100%, 100% 0);
		height: 17px;
		width: 34px;
	}

}


.single .page-header-block {

	h1 {
		@media screen and (min-width: 663px) {
			font-size: 48px;
		}
	}

	.meta {
		justify-content: center;
	}

}



/* RESPONSIVE */

/* -- MAX WIDTH -- */
@media screen and (max-width: 1188px) {

	.page-header-block .container > * {
		max-width: 80%;
	}

}

@media screen and (max-width: 662px) {

	.page-header-block {
		min-height: 580px;
		max-height: none;
	}
	.page-header-block .background {
		height: 100%;
		min-height: 580px;
	}

	.page-header-block .container {
		min-height: 580px;
		padding-bottom: calc(var(--navbar-height) + 20px);
		padding-top: calc(var(--navbar-height) + 100px);
	}

	.page-header-block .container > * {
		max-width: 100%;
	}

}

@media screen and (max-width: 380px) {

	.page-header-block .container {
		padding-bottom: var(--navbar-height);
		padding-top: calc(var(--navbar-height) + 80px);
	}

}