/**
 * Header ground theming.
 *
 * The floating nav is a light glass pill — `rgba(255,255,255,.36)` behind
 * `blur(18px) saturate(1.4)`. That fill is too thin to hold a value of its
 * own, so over a dark band the pill composites to #676767 and the nav text
 * drops to 3.3:1, under the 4.5:1 AA floor. The wordmark is #1A0047, darker
 * than the nav text, so the logo goes first.
 *
 * Sections declare their own ground with `ground-dark`. While one sits under
 * the bar's midline, assets/js/header-navigation.js puts `nav-dark` on the
 * bar and the whole pill flips: dark fill, white type, white wordmark,
 * inverted CTA. Both states stay translucent, so the frost survives on each.
 *
 * These rules live here rather than in an Elementor global class because
 * Elementor only emits a global class that some document references, and
 * `nav-dark` is applied at runtime — it would never reach the stylesheet.
 *
 * Specificity: `.elementor .nav-bar` is (0,2,0) and the kit's scoped button
 * default is (0,3,0), so every rule below is written to outrank both without
 * depending on stylesheet order.
 */

.elementor .nav-bar.nav-dark {
	background-color: rgba(16, 21, 42, 0.52);
	border-color: rgba(255, 255, 255, 0.2);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* The dark state belongs to the BAR. Below 1025 `.nav-list` stops being a row
   on the pill and becomes a white drawer underneath it, so a white trigger
   colour lands on white: measured on a dark-hero page at 420px, text
   rgb(255,255,255) on a panel rgb(255,255,255) — contrast 1.00, with all five
   top-level labels invisible while their sub-links (onyx) rendered fine.

   So the trigger treatment is desktop-only. The bar's own furniture — logo,
   burger, CTA — is still on the dark pill at every width and is left alone. */
@media (min-width: 1025px) {
	.elementor .nav-bar.nav-dark .nav-trigger {
		color: var(--white);
	}

	.elementor .nav-bar.nav-dark .nav-trigger:hover,
	.elementor .nav-bar.nav-dark .nav-trigger:focus-visible {
		background-color: rgba(255, 255, 255, 0.14);
	}
}

.elementor .nav-bar.nav-dark .nav-burger:hover,
.elementor .nav-bar.nav-dark .nav-burger:focus-visible {
	background-color: rgba(255, 255, 255, 0.14);
}

/* The caret and the button arrow are both currentColor, so they follow. */

.elementor .nav-bar.nav-dark .nav-burger-bar,
.elementor .nav-bar.nav-dark .nav-burger-bar::before,
.elementor .nav-bar.nav-dark .nav-burger-bar::after {
	background-color: var(--white);
}

/* Swaps the rendered image, so there is one logo element and no second asset
   to keep in sync. The mark keeps its gradient; only the wordmark goes white. */
.elementor .nav-bar.nav-dark .nav-logo {
	content: url("../images/facteus-logo-on-dark.svg");
}

.elementor .nav-bar.nav-dark a.btn-primary {
	background-color: var(--white);
	border-color: var(--white);
	color: var(--onyx);
}

.elementor .nav-bar.nav-dark a.btn-primary:hover,
.elementor .nav-bar.nav-dark a.btn-primary:focus-visible {
	background-color: var(--off-white);
	border-color: var(--off-white);
	color: var(--onyx);
}

@media (prefers-reduced-motion: reduce) {
	.elementor .nav-bar {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Legacy: the V3 header (post 33174).
 *
 * Kept because that template is still published, but it is not the header in
 * use — post 33986 is — and none of these selectors match anything rendered
 * today. It is a per-page body class, so it cannot follow a scroll, and it
 * expects a `facteus-logo--on-dark` widget that was never created. Superseded
 * by the rules above; remove with 33174.
 * ------------------------------------------------------------------------ */

.facteus-logo--on-dark {
	display: none;
}

body.facteus-header-theme-dark .facteus-header-shell .facteus-nav-shell {
	background: rgba(11, 25, 23, 0.82) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
	-webkit-backdrop-filter: blur(18px) saturate(140%) !important;
	backdrop-filter: blur(18px) saturate(140%) !important;
}

body.facteus-header-theme-dark .facteus-header-shell .e-n-menu-title-container,
body.facteus-header-theme-dark .facteus-header-shell .e-n-menu-title-container .e-n-menu-title-text {
	color: #ffffff !important;
}

body.facteus-header-theme-dark .facteus-header-shell .e-n-menu-title-container svg {
	fill: currentcolor;
	stroke: currentcolor;
}

body.facteus-header-theme-dark .facteus-header-shell .e-n-menu-title-container svg * {
	stroke: currentcolor;
}

body.facteus-header-theme-dark .facteus-header-shell .e-n-menu-dropdown-icon,
body.facteus-header-theme-dark .facteus-header-shell .e-n-menu-dropdown-icon i,
body.facteus-header-theme-dark .facteus-header-shell .e-n-menu-dropdown-icon i::before {
	color: #ffffff !important;
}

body.facteus-header-theme-dark .facteus-header-shell .e-n-menu-toggle,
body.facteus-header-theme-dark .facteus-header-shell .e-n-menu-toggle i,
body.facteus-header-theme-dark .facteus-header-shell .e-n-menu-toggle i::before {
	color: #ffffff !important;
}

body.facteus-header-theme-dark .facteus-logo--on-light {
	display: none;
}

body.facteus-header-theme-dark .facteus-logo--on-dark {
	display: block;
}

/* ---------------------------------------------------------------------------
   Nav label rename, 22 Oct 2026.

   Solutions / Use Cases / Data -> Who We Serve / What We Offer / Who We Are,
   which is ~113px wider in total. The bar now needs a 1163px viewport to hold
   five triggers plus the logo and the CTA. Elementor's next breakpoint down is
   1024, where the burger takes over, so 1025-1162 is a band of laptop widths
   with no breakpoint of its own: the list overflowed its track there and the
   dropdown chevrons were squeezed to zero width, which removed the only cue
   that these items open menus.

   Recover the space from the bar's own gaps and padding, never from the type —
   the labels stay on the kit's scale. A global-class variant cannot express
   this band because Elementor has no breakpoint in it, which is why it lives
   here rather than on `nav-bar`.
   The selectors double the class deliberately. This stylesheet is enqueued at
   index 7 while Elementor's global/local sheets land at 25-34, so a plain
   `.elementor .nav-bar` at (0,2,0) ties the global class and loses on source
   order — measured: the rules emitted but computed values stayed at the base.
   `.nav-bar.nav-bar` is (0,3,0) and wins without depending on order.
   --------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1162px) {
	.elementor .nav-bar.nav-bar   { gap: 10px; padding-inline: 12px; }
	.elementor .nav-list.nav-list { gap: 0; }
	.elementor .nav-link.nav-link { padding-inline: 5px; margin-inline: -5px; }
}