/*
 * Apex Events — header.css
 * The site header (Theme Builder template "Site Header").
 *
 * States, set on <body> by assets/js/header.js:
 *   .apex-header-scrolled  the visitor has scrolled down a little (Home page: glass appears)
 *   .apex-header-light     the content behind the header is light, so use light glass + dark text
 * Inner pages (body without .home) always show the glass and push their content below the header.
 */

/* ---------- Glass background layer ---------- */

html body .elementor .apex-header-glass {
	background-color: rgba(20, 20, 22, .28) !important;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0)) !important;
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .25);
	transition: opacity .35s ease, background-color .35s ease, border-color .35s ease;
}

/* Hidden at the top of the Home page (Elementor sets it transparent); shown after scrolling or on inner pages. */
body.apex-header-scrolled .elementor-location-header .apex-header-glass,
body:not(.home) .elementor-location-header .apex-header-glass {
	opacity: 1;
}

/* Light version over white sections. */
body.apex-header-light .elementor .apex-header-glass {
	background-color: rgba(255, 255, 255, .62) !important;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)) !important;
	border-bottom-color: rgba(0, 0, 0, .08);
	box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .18);
}

/* No dark gradient behind the bar, except a faint one over the Home hero video before scrolling. */
html body .elementor-location-header .apex-header-bar {
	background-image: none !important;
}

body.home:not(.apex-header-scrolled) .elementor-location-header .apex-header-bar {
	background-image: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0)) !important;
}

/* Inner pages: reserve the header's height so page content starts below it. */
body:not(.home) .elementor-location-header .apex-header-spacer {
	height: 120px;
}

@media (max-width: 767px) {
	body:not(.home) .elementor-location-header .apex-header-spacer {
		height: 84px;
	}
}

/* ---------- Logo ---------- */

html body .elementor-location-header .apex-header-logo {
	position: relative;
	z-index: 3;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	margin: 0;
}

html body .elementor-location-header .apex-header-logo a {
	display: block;
}

/*
 * Logo with its built-in shadow space: shown 55px tall (41px on phones) so the letters themselves
 * are about 40px (30px), as before. The negative margins keep the header bar the same height.
 */
html body .elementor-location-header .apex-header-logo img {
	display: block;
	height: 55px !important;
	width: auto !important;
	max-width: 260px !important;
	margin: -7.5px 0 !important;
	transition: filter .35s ease, opacity .5s ease;
}

/* Fade the logo in once it has fully downloaded (class added by the script in includes/assets.php). */
html.apex-fx body .elementor-location-header .apex-header-logo img {
	opacity: 0;
}

html.apex-fx body .elementor-location-header .apex-header-logo img.apex-logo-ready,
html.apex-fx.apex-logo-timeout body .elementor-location-header .apex-header-logo img {
	opacity: 1;
}

@media (max-width: 767px) {
	html body .elementor-location-header .apex-header-logo img {
		height: 41px !important;
		max-width: 180px !important;
		margin: -5.5px 0 !important;
	}
}

/* ---------- Dark text over light content ---------- */

html body .elementor-location-header .apex-header-quote-link a,
html body .elementor-location-header .apex-menu-label,
html body .elementor-location-header .apex-menu-icon > * {
	transition: color .35s ease, background-color .35s ease;
}

/* Not while the menu is open: the menu panel is dark, so the header stays white. */
body.apex-header-light .elementor-location-header:not(:has(details[open])) .apex-header-quote-link a,
body.apex-header-light .elementor-location-header:not(:has(details[open])) .apex-menu-label {
	color: #111111 !important;
}

body.apex-header-light .elementor-location-header:not(:has(details[open])) .apex-header-quote-link a:hover {
	color: var(--brand-red, #E22128) !important;
}

body.apex-header-light .elementor-location-header:not(:has(details[open])) .apex-menu-icon > * {
	background-color: #111111 !important;
}

/* Dark version of the logo: white turns black, the red stays red (filter defined in includes/assets.php). */
body.apex-header-light .elementor-location-header:not(:has(details[open])) .apex-header-logo img {
	filter: url(#apex-logo-on-light);
}