/**
 * Header - Homepage state (DLS-142)
 *
 * Loaded only when body.dls-home-header is present (front page; see
 * supreme_starter_is_dls_home_header()). On the homepage the header floats,
 * transparent, over the hero with white text and logo, and turns solid white
 * while a menu item is hovered/opened or focus is inside the header.
 *
 * CSS only: the mega menu (Supreme-Menu-main), the SearchWP form and their
 * scripts are NOT changed. Inner pages keep the plain white header.
 */

body.dls-home-header .elementor-location-header {
	--dls-hdr-fg: #fff;
	--dls-hdr-ph: #fff; /* search placeholder: white over the hero */
	--dls-hdr-ph-o: .92;
	--dls-menu-font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* menu + dropdown font on the homepage (the template's); inner pages fall back to Lato in ss-menu-mes-styles.css */
	--dls-hdr-bg: transparent;
	--dls-hdr-icon-filter: brightness(0) invert(1);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	/* hidden mega-menu panels stick out past the right edge; the header is out of flow here, so clip them (x only) */
	overflow-x: clip;
}

/* Elementor's own sticky (tablet/mobile) is switched off on the homepage; the section stays in flow inside the floating wrapper so the mobile search bar sits below it. On tablet/mobile (1024px and below) the wrapper itself is fixed, so the header stays on screen while scrolling (see the max-width block below); on desktop it scrolls away with the hero and comes back on scroll up (.scrolled, below). */
body.dls-home-header .main-header,
body.dls-home-header .main-header.elementor-sticky,
body.dls-home-header .main-header.elementor-sticky--active {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: 100% !important;
	margin: 0 !important;
	transform: none !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}
body.dls-home-header .elementor-location-header .elementor-sticky__spacer { display: none !important; }

/* Desktop, after the first 120px of scroll (ss-menu-hide-on-scroll.js adds .scrolled): the header is fixed and solid white, slides out while scrolling down and back in on scroll up; at the top it returns to the transparent floating state. The solid colours come from the :has(.main-header:is(.scrolled, .dls-m-scrolled)) entries in the solid-state lists below. */
body.dls-home-header .main-header.scrolled {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 9999;
}
body.dls-home-header .main-header.scrolled.header-hidden { transform: translateY(-100%) !important; }
/* the script adds .header-snap for two frames while it switches the header between in-flow and fixed, so that switch does not animate (no pop-in or white fade); the slide-out / slide-in afterwards keep their transitions */
body.dls-home-header .main-header.header-snap { transition: none !important; }

/* The ticker is removed site-wide later (guide step 5); it never shows over the hero. */
body.dls-home-header .marquee-section { display: none !important; }

/* ---- solid white state: a menu item is hovered/open, focus is in the header, or the mobile menu is open (iOS never focuses a tapped button, so :focus-within alone missed it) ---- */
body.dls-home-header .elementor-location-header:has(.menu-top-level.mes-hover-active),
body.dls-home-header .elementor-location-header:has(.main-header:is(.scrolled, .dls-m-scrolled)),
body.dls-home-header .elementor-location-header:has(.mes-menu-container:focus-within),
body.dls-home-header .elementor-location-header:has(.searchwp-live-search-results-showing),
body.dls-home-header .elementor-location-header:focus-within,
body.dls-home-header.mes-mobile-menu-active .elementor-location-header {
	--dls-hdr-fg: #000;
	--dls-hdr-ph: #707070; /* QA: readable grey on the solid white bar */
	--dls-hdr-ph-o: 1;
	--dls-hdr-bg: #fff;
	--dls-hdr-icon-filter: none;
}

body.dls-home-header .main-header {
	background-color: var(--dls-hdr-bg) !important;
	background-image: none !important;
	transition: background-color .18s cubic-bezier(.22, .61, .36, 1);
}

/* ---- logo ----
   The header holds the coloured logo and, after the header JSON edit (DLS-142), a second image
   widget `.logo-image--white` (the template's white logo). Inner pages never show the white one.
   On the homepage the white logo sits over the coloured one and they cross-fade with the solid state.
   Before that DB edit (no white widget) the coloured SVG is simply turned white with a filter. */
.main-header .logo-image--white { display: none; }

/* with the white widget */
body.dls-home-header .main-header .header-logo:has(.logo-image--white) .elementor-widget-wrap { position: relative; }
body.dls-home-header .main-header .logo-image--white { display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
body.dls-home-header .main-header .logo-image img { transition: opacity .18s cubic-bezier(.22, .61, .36, 1), filter .18s cubic-bezier(.22, .61, .36, 1); }
body.dls-home-header .main-header .header-logo:has(.logo-image--white) .logo-image:not(.logo-image--white) img { opacity: 0; }
body.dls-home-header .elementor-location-header:has(.menu-top-level.mes-hover-active) .header-logo:has(.logo-image--white) .logo-image:not(.logo-image--white) img,
body.dls-home-header .elementor-location-header:has(.main-header:is(.scrolled, .dls-m-scrolled)) .header-logo:has(.logo-image--white) .logo-image:not(.logo-image--white) img,
body.dls-home-header .elementor-location-header:has(.mes-menu-container:focus-within) .header-logo:has(.logo-image--white) .logo-image:not(.logo-image--white) img,
body.dls-home-header .elementor-location-header:has(.searchwp-live-search-results-showing) .header-logo:has(.logo-image--white) .logo-image:not(.logo-image--white) img,
body.dls-home-header .elementor-location-header:focus-within .header-logo:has(.logo-image--white) .logo-image:not(.logo-image--white) img,
body.dls-home-header.mes-mobile-menu-active .elementor-location-header .header-logo:has(.logo-image--white) .logo-image:not(.logo-image--white) img {
	opacity: 1;
}
body.dls-home-header .elementor-location-header:has(.menu-top-level.mes-hover-active) .logo-image--white img,
body.dls-home-header .elementor-location-header:has(.main-header:is(.scrolled, .dls-m-scrolled)) .logo-image--white img,
body.dls-home-header .elementor-location-header:has(.mes-menu-container:focus-within) .logo-image--white img,
body.dls-home-header .elementor-location-header:has(.searchwp-live-search-results-showing) .logo-image--white img,
body.dls-home-header .elementor-location-header:focus-within .logo-image--white img,
body.dls-home-header.mes-mobile-menu-active .elementor-location-header .logo-image--white img {
	opacity: 0;
}

/* fallback: no white widget yet */
body.dls-home-header .main-header .header-logo:not(:has(.logo-image--white)) .logo-image img {
	filter: brightness(0) invert(1);
}
body.dls-home-header .elementor-location-header:has(.menu-top-level.mes-hover-active) .header-logo:not(:has(.logo-image--white)) .logo-image img,
body.dls-home-header .elementor-location-header:has(.main-header:is(.scrolled, .dls-m-scrolled)) .header-logo:not(:has(.logo-image--white)) .logo-image img,
body.dls-home-header .elementor-location-header:has(.mes-menu-container:focus-within) .header-logo:not(:has(.logo-image--white)) .logo-image img,
body.dls-home-header .elementor-location-header:has(.searchwp-live-search-results-showing) .header-logo:not(:has(.logo-image--white)) .logo-image img,
body.dls-home-header .elementor-location-header:focus-within .header-logo:not(:has(.logo-image--white)) .logo-image img,
body.dls-home-header.mes-mobile-menu-active .elementor-location-header .header-logo:not(:has(.logo-image--white)) .logo-image img {
	filter: none;
}

/* ---- top-level menu labels and chevrons (panels and sub-menus keep their own colours; the mobile menu's purple Contact Us button keeps its white text) ---- */
body.dls-home-header .main-header #menu-menu-expansion > li.menu-top-level:not(.mobile-cta),
body.dls-home-header .main-header #menu-menu-expansion > li.menu-top-level:not(.mobile-cta) > a,
body.dls-home-header .main-header #menu-menu-expansion > li.menu-top-level:not(.mobile-cta) > .mes-title-wrapper,
body.dls-home-header .main-header #menu-menu-expansion > li.menu-top-level:not(.mobile-cta) > .mes-title-wrapper .mes-title-text {
	color: var(--dls-hdr-fg) !important;
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: auto; /* the template sets none; the inherited "antialiased" renders white labels thinner on macOS */
	-moz-osx-font-smoothing: auto;
	transition: color .18s cubic-bezier(.22, .61, .36, 1);
}
body.dls-home-header .main-header #menu-menu-expansion.mes-nav-menu > li.menu-item-has-children.menu-top-level > .mes-title-wrapper::after,
body.dls-home-header .main-header #menu-menu-expansion.mes-nav-menu > li.menu-item-has-children.menu-top-level > a::after {
	border-color: var(--dls-hdr-fg);
}

/* ---- search box (same form and live results; only the look changes) ---- */
body.dls-home-header .main-header #searchwp-form-1 .swp-input--search {
	background-color: rgba(255, 255, 255, .11);
	border: 1px solid var(--dls-hdr-fg);
	color: var(--dls-hdr-fg);
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	transition: background-color .18s cubic-bezier(.22, .61, .36, 1), border-color .18s cubic-bezier(.22, .61, .36, 1), color .18s cubic-bezier(.22, .61, .36, 1);
}
body.dls-home-header .main-header #searchwp-form-1 .swp-input--search::placeholder {
	color: var(--dls-hdr-ph);
	opacity: var(--dls-hdr-ph-o);
}
body.dls-home-header .elementor-location-header:has(.menu-top-level.mes-hover-active) #searchwp-form-1 .swp-input--search,
body.dls-home-header .elementor-location-header:has(.main-header:is(.scrolled, .dls-m-scrolled)) #searchwp-form-1 .swp-input--search,
body.dls-home-header .elementor-location-header:has(.mes-menu-container:focus-within) #searchwp-form-1 .swp-input--search,
body.dls-home-header .elementor-location-header:has(.searchwp-live-search-results-showing) #searchwp-form-1 .swp-input--search,
body.dls-home-header .elementor-location-header:focus-within #searchwp-form-1 .swp-input--search,
body.dls-home-header.mes-mobile-menu-active .elementor-location-header #searchwp-form-1 .swp-input--search {
	background-color: #fff;
	border-color: #d1d3d4;
}

/* ---- Contact Us pill: white on the hero, purple once the header is solid ---- */
body.dls-home-header .main-header .header-button-container a.elementor-button {
	border-radius: 9999px;
	background-color: #fff;
	color: #32126E;
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	transition: background-color .18s cubic-bezier(.22, .61, .36, 1), color .18s cubic-bezier(.22, .61, .36, 1);
}
body.dls-home-header .elementor-location-header:has(.menu-top-level.mes-hover-active) .header-button-container a.elementor-button,
body.dls-home-header .elementor-location-header:has(.main-header:is(.scrolled, .dls-m-scrolled)) .header-button-container a.elementor-button,
body.dls-home-header .elementor-location-header:has(.mes-menu-container:focus-within) .header-button-container a.elementor-button,
body.dls-home-header .elementor-location-header:has(.searchwp-live-search-results-showing) .header-button-container a.elementor-button,
body.dls-home-header .elementor-location-header:focus-within .header-button-container a.elementor-button,
body.dls-home-header.mes-mobile-menu-active .elementor-location-header .header-button-container a.elementor-button {
	background-color: #32126E;
	color: #fff;
}
/* one hover colour for every CTA: orange */
body.dls-home-header .main-header .header-button-container a.elementor-button:hover,
body.dls-home-header .main-header .header-button-container a.elementor-button:focus-visible {
	background-color: #f45a28 !important;
	color: #fff !important;
}

/* ---- phone / tablet: existing burger + search icon, recoloured with the state (menu behaviour untouched) ---- */
@media screen and (max-width: 1024px) {
	/* persistent header, as on the other pages and on production: fixed to the top, transparent over the hero until the page is scrolled (ss-menu-hide-on-scroll.js adds .dls-m-scrolled to the header after 10px, which turns it solid white through the :has() entries in the solid-state lists above) */
	body.dls-home-header .elementor-location-header {
		position: fixed;
	}
	body.dls-home-header .main-header .mes-mobile-toggle span {
		background-color: var(--dls-hdr-fg) !important;
		/* the colour fades with the header; transform and opacity keep the menu plugin's 0.3s ease, which is the hamburger-to-X
		   animation (a transition list with only the colour switched that animation off on the homepage) */
		transition: transform .3s ease, opacity .3s ease, background-color .18s cubic-bezier(.22, .61, .36, 1);
	}
	body.dls-home-header .main-header .mobile-search-trigger {
		filter: var(--dls-hdr-icon-filter);
	}
	/* the opened menu is a white panel: its top-level labels are purple, as in the reference, whatever the header state */
	body.dls-home-header .main-header #menu-menu-expansion > li.menu-top-level:not(.mobile-cta) > .mes-title-wrapper .mes-title-text {
		color: #32126E !important;
	}
}

/* ---- polish (checked against the template at 1440px) ---- */
/* no drop shadow line under the transparent bar */
body.dls-home-header .main-header { box-shadow: none !important; border-bottom: 0 !important; }
/* ---- the header turns solid white as soon as the pointer is anywhere on it (template behaviour), not only on a menu item.
   Generated from the :focus-within rules above; fine pointers only, so a tap on a phone does not leave it stuck solid. ---- */
@media (hover: hover) and (pointer: fine) {
	body.dls-home-header .elementor-location-header:hover {
		--dls-hdr-fg: #000;
		--dls-hdr-ph: #707070;
		--dls-hdr-ph-o: 1;
		--dls-hdr-bg: #fff;
		--dls-hdr-icon-filter: none;
	}
	body.dls-home-header .elementor-location-header:hover .header-logo:has(.logo-image--white) .logo-image:not(.logo-image--white) img {
		opacity: 1;
	}
	body.dls-home-header .elementor-location-header:hover .logo-image--white img {
		opacity: 0;
	}
	body.dls-home-header .elementor-location-header:hover .header-logo:not(:has(.logo-image--white)) .logo-image img {
		filter: none;
	}
	body.dls-home-header .elementor-location-header:hover #searchwp-form-1 .swp-input--search {
		background-color: #fff;
		border-color: #d1d3d4;
	}
	body.dls-home-header .elementor-location-header:hover .header-button-container a.elementor-button {
		background-color: #32126E;
		color: #fff;
	}
}