/*
 * RACONVAL header overrides.
 * Recolors the Hello+ header to the brand's dark navy and pins it to
 * the top of the viewport at all times (position: fixed, so it can't
 * lose its sticky context the way `position: sticky` sometimes does
 * inside Elementor's wrappers — that was showing a flash of the white
 * page background underneath). header-custom.js keeps --rv-header-h in
 * sync so the page content never sits under it.
 */

.elementor-37 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}

body {
	padding-top: var( --rv-header-h, 88px );
	background-color: #0f263e; /* avoids a white flash on elastic/overscroll */
}

/* The WP admin toolbar is also `position: fixed; top: 0`, logged-in
 * users only. Without this the header sits underneath it (hidden by
 * its higher z-index) instead of below it, leaving a gap. */
body.admin-bar .elementor-37 {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .elementor-37 {
		top: 46px;
	}
}

.elementor-37 .ehp-header,
.elementor-37 .ehp-header .ehp-header__dropdown,
.elementor-37 .ehp-header .ehp-header__navigation,
.elementor-37 .ehp-header .ehp-header__menu-cart-items {
	background-color: #0f263e !important;
	transition: box-shadow .25s ease;
}

.elementor-37 .ehp-header {
	--header-toggle-icon-color: #ffffff;
	--header-toggle-icon-color-active: #ffffff;
}

.elementor-37 .ehp-header__item,
.elementor-37 .ehp-header__button-toggle,
.elementor-37 .ehp-header__toggle-icon {
	color: #ffffff !important;
}

/* Elementor's generated CSS paints the toggle navy; force the icon white. */
.elementor-37 .ehp-header button.ehp-header__button-toggle svg {
	fill: #ffffff !important;
}

.elementor-37 .ehp-header__item:hover,
.elementor-37 .ehp-header__item--top-level.is-item-anchor:hover {
	color: #3ccd9d !important;
}

.elementor-37 .ehp-header__button--primary.is-type-button {
	background-color: #1848d8 !important;
	color: #ffffff !important;
}

.elementor-37 .ehp-header__button--primary.is-type-button:hover,
.elementor-37 .ehp-header__button--primary.is-type-button:focus {
	background-color: #0f36a6 !important;
}

/* Shadow + a shorter header once the page has scrolled, in any direction. */
.elementor-37.is-scrolled .ehp-header {
	box-shadow: 0 8px 24px rgba(15, 38, 62, .25);
	--header-box-padding-block-start: 10px;
	--header-box-padding-block-end: 10px;
	--header-logo-width: 150px;
}

@media (max-width: 1024px) {
	.elementor-37.is-scrolled .ehp-header {
		--header-logo-width: 130px;
	}
}