/*
 * 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;
}

/* Any logo: 40px tall (30px on phones) at its natural width. */
html body .elementor-location-header .apex-header-logo img {
	display: block;
	height: 40px !important;
	width: auto !important;
	max-width: 260px !important;
	transition: filter .35s ease;
}

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

/*
 * Crop for the ORIGINAL logo file only (white-transparent.png): a 1024x1024 square whose wordmark
 * fills just x 36–987, y 408–630. These rules match that file name, so they do nothing once a
 * tightly cropped logo is uploaded, and can then be deleted.
 */
html body .elementor-location-header .apex-header-logo a:has(img[src*="white-transparent"]) {
	overflow: hidden;
	width: 171.4px;
	height: 40px;
}

html body .elementor-location-header .apex-header-logo img[src*="white-transparent"] {
	width: 184.5px !important;
	height: 184.5px !important;
	max-width: none !important;
	margin: -73.5px 0 0 -6.5px;
}

@media (max-width: 767px) {
	html body .elementor-location-header .apex-header-logo a:has(img[src*="white-transparent"]) {
		width: 128.5px;
		height: 30px;
	}

	html body .elementor-location-header .apex-header-logo img[src*="white-transparent"] {
		width: 138.4px !important;
		height: 138.4px !important;
		margin: -55.1px 0 0 -4.9px;
	}
}

/* ---------- 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);
}