/**
 * Site-wide header / navbar gradient overlay (matches Our Legacy hero treatment).
 */

html {
	overflow-x: clip;
}

body {
	overflow-x: clip;
	max-width: 100%;
}

#wrapper-navbar {
	position: relative;
	max-width: 100%;
}

#wrapper-navbar::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: clamp(140px, 22vw, 240px);
	background: linear-gradient(
		180deg,
		rgba(10, 22, 40, 0.88) 0%,
		rgba(18, 35, 68, 0.65) 40%,
		rgba(18, 35, 68, 0.15) 75%,
		rgba(18, 35, 68, 0) 100%
	);
	pointer-events: none;
	z-index: 1048;
}

.custom-header-media::before {
	background: linear-gradient(
		180deg,
		rgba(18, 35, 68, 0.75) 0%,
		rgba(18, 35, 68, 0.2) 55%,
		rgba(18, 35, 68, 0.35) 100%
	) !important;
	height: 100% !important;
	opacity: 1 !important;
	z-index: 2;
}

body.home .custom-header-media::before,
body.sln-legacy-source-hero .custom-header-media.sln-legacy-home-video::before {
	background: linear-gradient(
		180deg,
		rgba(18, 35, 68, 0.55) 0%,
		rgba(18, 35, 68, 0.08) 50%,
		rgba(18, 35, 68, 0.35) 100%
	) !important;
	height: 100% !important;
	opacity: 1 !important;
}