/**
 * Sticky main header, and its light/dark theming.
 *
 * Originally Elementor Custom Code snippet 668 "Style Main Header Scroll".
 * Pairs with assets/js/header.js, which toggles .scrolled past 50px.
 *
 * THEMING
 * -------
 * The header sits over page sections of varying darkness, so the logo and nav
 * need to flip per page. That used to be done by forking the header itself:
 * the Home Page carried a hardcoded duplicate purely to show a black logo
 * where the Theme Builder template showed a white one. The fork is gone; the
 * colour is now a page setting (see inc/header-theme.php) emitted as a body
 * class, and there is one header again.
 *
 *   .sp-header--mixed   white logo, black nav   (default, and how every
 *                                                template page looked before)
 *   .sp-header--dark    black logo, black nav   (light page backgrounds)
 *   .sp-header--light   white logo, white nav   (dark page backgrounds)
 *
 * Scrolled is NOT a per-page choice. Once the bar fills black, the logo and
 * nav are white in every mode. That is what fixes the black-on-black the
 * homepage used to show, and it fixes it in one place.
 *
 * The logo is a single monochrome asset (Group-842.svg, #FAFAFA) recoloured
 * with filter: invert(1), which lands on #050505. Keeping it an <img> means
 * it keeps its alt attribute.
 *
 * These deliberately do NOT depend on the .header-menu class. The old rules
 * did, the homepage header did not carry it, and the scroll state silently
 * did nothing there. Targeting .elementor-nav-menu cannot miss the same way.
 * !important is required throughout: Elementor sets nav colour from its own
 * per-widget CSS at high specificity (.elementor-N .elementor-element-XXX …).
 */

.main-header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
	background: transparent;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* The logo colour flip is deliberately NOT transitioned.
   It is done with filter: invert(), and interpolating invert(1) to invert(0)
   passes through invert(0.5), which renders the whole mark as flat mid-grey.
   Animating it means a ~300ms grey smear every time the header crosses the
   scroll threshold, which reads as a broken logo. The header's background
   still transitions; the logo simply snaps. */
.main-header img {
	transition: none;
}

.main-header .elementor-nav-menu .elementor-item,
.main-header .elementor-nav-menu .sub-arrow svg {
	transition: color 0.3s ease, fill 0.3s ease;
}

/* ---------------------------------------------------------------------------
   Rest state, per page mode
   --------------------------------------------------------------------------- */

/* Logo: white by default, inverted to near-black only where the page is light. */
.sp-header--dark .main-header img {
	filter: invert(1);
}

/* Nav: black in dark and mixed, white in light.
   Both the custom sp-nav-menu widget and Elementor's stock nav menu are
   covered, so the theming holds whichever renders. */
.sp-header--dark .main-header .elementor-nav-menu--main .elementor-item,
.sp-header--mixed .main-header .elementor-nav-menu--main .elementor-item,
.sp-header--dark .main-header .sp-nav-menu > li > a,
.sp-header--mixed .main-header .sp-nav-menu > li > a {
	color: var(--sp-color-ink, #000000) !important;
}

.sp-header--dark .main-header .elementor-nav-menu--main .sub-arrow svg,
.sp-header--mixed .main-header .elementor-nav-menu--main .sub-arrow svg {
	fill: var(--sp-color-ink, #000000) !important;
}

.sp-header--light .main-header .elementor-nav-menu--main .elementor-item,
.sp-header--light .main-header .sp-nav-menu > li > a {
	color: var(--sp-color-surface, #FFFFFF) !important;
}

.sp-header--light .main-header .elementor-nav-menu--main .sub-arrow svg {
	fill: var(--sp-color-surface, #FFFFFF) !important;
}

/* ---------------------------------------------------------------------------
   Scrolled state - black bar, so white logo and white nav in every mode
   --------------------------------------------------------------------------- */

.main-header.scrolled {
	background: var(--sp-color-primary, #000000) !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* Undoes the dark-mode inversion: the bar is black, so the logo wants white. */
.sp-header--dark .main-header.scrolled img,
.main-header.scrolled img {
	filter: none;
}

/* ---------------------------------------------------------------------------
   Mobile - always a white logo, whatever the page mode

   The per-page modes describe the section showing through a transparent
   header. That only holds on desktop. The header container carries an
   Elementor gradient whose stops are set to 100% from tablet down
   (background_color_stop_tablet / background_color_b_stop_tablet), so at
   1024px and below the bar is solid black at all times, scrolled or not.

   A page set to dark was therefore inverting its logo to black and painting
   it onto that black bar, which is why the logo vanished on mobile at the top
   of the page. Below the breakpoint the mode is simply not relevant: the logo
   sits on black, so it is white.

   Keep the breakpoint in step with the menu's, in assets/css/sp-nav-menu.css.
   --------------------------------------------------------------------------- */

@media ( max-width: 1024px ) {
	.sp-header--dark .main-header img,
	.sp-header--mixed .main-header img,
	.sp-header--light .main-header img {
		filter: none;
	}

	.sp-header--dark .main-header .sp-nav-menu > li > a,
	.sp-header--mixed .main-header .sp-nav-menu > li > a {
		color: var(--sp-color-surface, #FFFFFF) !important;
	}
}

/* ---------------------------------------------------------------------------
   Mobile menu open - always a white logo, whatever the page mode

   The page's header mode describes the section behind the header. While the
   overlay is open that is no longer what the logo sits on, so the mode should
   not decide its colour: the overlay is near-black, so the logo is white.

   Two things are needed, not one. The colour is the obvious half. The z-index
   is the half that is easy to miss: the overlay is a descendant of the header,
   so the header's own z-index does not lift the logo above it. Inside the
   header's stacking context the overlay sits at 1000 while the logo's widget
   is auto, so the overlay paints straight over it and the logo is invisible
   whatever colour it is. The hamburger only escapes this because it carries
   1010 of its own.

   Body class is set by assets/js/sp-nav-menu.js.
   --------------------------------------------------------------------------- */

body.sp-menu-open .main-header img {
	filter: none;
}

body.sp-menu-open .main-header .elementor-widget-theme-site-logo {
	position: relative;
	z-index: 1010;
}

.main-header.scrolled .elementor-nav-menu--main .elementor-item,
.main-header.scrolled .elementor-nav-menu--main .elementor-item.elementor-item-active,
.main-header.scrolled .elementor-nav-menu--main .elementor-item:hover,
.main-header.scrolled .elementor-nav-menu--main .elementor-item:focus,
.main-header.scrolled .sp-nav-menu > li > a {
	color: var(--sp-color-surface, #FFFFFF) !important;
}

.main-header.scrolled .elementor-nav-menu--main .sub-arrow svg {
	fill: var(--sp-color-surface, #FFFFFF) !important;
}

/* ---------------------------------------------------------------------------
   Dropdown submenu

   The submenu paints its own dark background (#100E0A) in every mode, so its
   text stays light regardless of what the bar behind it is doing. Scoped to
   --dropdown so it cannot be caught by the main-nav rules above.
   --------------------------------------------------------------------------- */

.main-header .elementor-nav-menu--dropdown .elementor-item,
.main-header .elementor-nav-menu--dropdown .elementor-sub-item {
	color: var(--sp-color-surface, #FFFFFF) !important;
}

/* ---------------------------------------------------------------------------
   Mobile toggle

   Accent-filled with a white glyph, which reads on light and dark alike, so it
   is held constant across all three modes rather than flipped with the nav.
   --------------------------------------------------------------------------- */

.main-header .elementor-menu-toggle {
	color: var(--sp-color-surface, #FFFFFF) !important;
}

.main-header .elementor-menu-toggle svg,
.main-header .elementor-menu-toggle i {
	color: inherit !important;
	fill: currentColor !important;
}

/* ---------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.main-header,
	.main-header img,
	.main-header .elementor-nav-menu .elementor-item,
	.main-header .elementor-nav-menu .sub-arrow svg {
		transition-duration: 0.01ms !important;
	}
}