/**
 * CH Header Scroll State
 *
 * header-scroll.js adds .ch-header-scrolled to .elementor-location-header once
 * the page is scrolled past the threshold; everything here hangs off it.
 *
 * The white bar goes on the inner header element, not on the wrapper: the
 * wrapper collapses to its 1px border because the inner header carries a -80px
 * bottom margin so it can overlap the hero.
 *
 * .ch-header-ready is added one frame later, so a page that loads already
 * scrolled starts white instead of fading in.
 */

.elementor-location-header > .e-con.e-default-header {
	background-color: transparent;
}

.elementor-location-header.ch-header-ready > .e-con.e-default-header {
	transition: background-color 320ms ease, box-shadow 320ms ease;
}

.elementor-location-header.ch-header-scrolled > .e-con.e-default-header {
	background-color: #ffffff;
	box-shadow: 0 12px 34px -18px rgba(0, 0, 0, 0.4);
}

/**
 * The menu is white so it reads over the hero. On the white bar it has to go
 * back to ink. !important matches how the header document's own nav rules get
 * past the menu widget's atomic colour.
 */
.elementor.elementor-location-header.ch-header-scrolled nav.elementor-nav-menu--main a.elementor-item,
.elementor.elementor-location-header.ch-header-scrolled .elementor-menu-toggle {
	color: var(--ch-ink, #1a1a1a) !important;
	fill: var(--ch-ink, #1a1a1a) !important;
}

.elementor.elementor-location-header.ch-header-scrolled nav.elementor-nav-menu--main a.elementor-item:hover,
.elementor.elementor-location-header.ch-header-scrolled nav.elementor-nav-menu--main a.elementor-item:focus,
.elementor.elementor-location-header.ch-header-scrolled nav.elementor-nav-menu--main a.elementor-item.elementor-item-active,
.elementor.elementor-location-header.ch-header-scrolled .elementor-menu-toggle:hover,
.elementor.elementor-location-header.ch-header-scrolled .elementor-menu-toggle.elementor-active {
	color: var(--ch-gold, #b89d72) !important;
	fill: var(--ch-gold, #b89d72) !important;
}

/**
 * The burger shown at tablet and below is an inline SVG, and the header
 * document pins its own fill to #FFFFFF through
 * `...elementor-element-2450aca div.elementor-menu-toggle svg`. Colouring the
 * container is not enough — that rule wins on the icon itself and leaves it
 * white on the white bar. The extra .elementor-widget-nav-menu here is what
 * outranks it; both burger and close icons are covered.
 */
.elementor-location-header .elementor-menu-toggle svg {
	transition: fill 320ms ease;
}

.elementor.elementor-location-header.ch-header-scrolled .elementor-widget-nav-menu div.elementor-menu-toggle svg {
	fill: var(--ch-ink, #1a1a1a) !important;
}

.elementor.elementor-location-header.ch-header-scrolled .elementor-widget-nav-menu div.elementor-menu-toggle:hover svg,
.elementor.elementor-location-header.ch-header-scrolled .elementor-widget-nav-menu div.elementor-menu-toggle.elementor-active svg {
	fill: var(--ch-gold, #b89d72) !important;
}

/**
 * The dark-lettering logo sits behind the white one, so fading the image out
 * crossfades between the two without touching the markup.
 */
.elementor-location-header .e-con.e-default-a > img {
	transition: opacity 320ms ease;
}

.elementor-location-header.ch-header-scrolled .e-con.e-default-a {
	background-image: var(--ch-header-scrolled-logo, none);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.elementor-location-header.ch-header-scrolled.ch-header-has-alt-logo .e-con.e-default-a > img {
	opacity: 0;
}