/* =============================================================================
 * SF Header Uno — front-end stylesheet
 * -----------------------------------------------------------------------------
 * BASELINE only. This file is functional/visible and wired to the inline
 * CSS custom properties emitted by the renderer, but the PIXEL-FAITHFUL
 * fidelity pass (animations, easing, stagger, mobile-panel motion, scroll
 * skin transitions) is the FRONTEND-DEVELOPER's job. See "LEFT FOR YOU".
 *
 * =============== CONTRACT (do not rename without updating PHP) ===============
 *
 * ROOT ELEMENT:  <header class="sfhu-header"> with inline style="--sfhu-*:…"
 * Mode classes (PHP-applied, static): .sfhu-mode-hide-show | .sfhu-mode-sticky-solid | .sfhu-mode-static
 *                                     .sfhu-transparent (when transparent-over-hero on)
 * Body classes (PHP-applied): .sfhu-active, .sfhu-override-on
 *
 * STRUCTURE / SELECTORS:
 *   .sfhu-header               root, fixed bar, holds the CSS vars
 *     .sfhu-bar                the visible bar block (spacers + row + bg)
 *       .sfhu-spacer-top       24px top spacer
 *       .sfhu-inner            max-width 86rem, side padding 2.5rem
 *         .sfhu-row            flex space-between / center
 *           .sfhu-brand        logo link (color drives currentColor logo fill)
 *             .sfhu-logo       <img> attachment logo  (fill:currentColor via path if SVG inlined)
 *             .sfhu-logo-text  text fallback (site name)
 *           .sfhu-nav-wrap     <nav> centered
 *             .sfhu-nav        <ul> flex gap 1rem
 *               .sfhu-item     <li>
 *                 .sfhu-link   <a> flex column, overflow:hidden (hover clip mask)
 *                   .sfhu-link-text         primary label span
 *                   .sfhu-link-text-clone   duplicated label (hover swap target)
 *           .sfhu-cta-wrap     desktop CTA container (hidden ≤ breakpoint)
 *             .sfhu-cta        the button <a>
 *               .sfhu-cta-text
 *           .sfhu-burger       <button> hamburger pill (shown ≤ breakpoint)
 *             .sfhu-burger-line (.is-first/.is-second/.is-third)  3 static lines
 *       .sfhu-spacer-bottom    24px bottom spacer
 *       .sfhu-background       absolute white fill layer (scrolled skin)
 *     .sfhu-mobile  (#sfhu-mobile)  mobile panel (drops from top)
 *       .sfhu-mobile-list        <ul>
 *         .sfhu-mobile-item      <li>
 *           .sfhu-mobile-link    <a>  (Geist, big, thin)
 *       .sfhu-mobile-cta-spacer  16px spacer
 *       .sfhu-cta.sfhu-cta-mobile  full-width in-panel CTA
 *
 * JS-TOGGLED CLASSES (applied by sf-header-uno.js):
 *   .is-sfhu-open        on .sfhu-header  -> mobile panel open (also body.sfhu-noscroll for scroll-lock)
 *   .is-sfhu-scrolled    on .sfhu-header  -> "scrolled" dark-text skin (past threshold / scroll-up)
 *   .is-sfhu-hidden      on .sfhu-header  -> bar translated out of view (scroll-down hide)
 *   body.sfhu-noscroll                    -> scroll lock while mobile panel open
 *
 * CSS CUSTOM PROPERTIES (emitted inline on .sfhu-header; defaults shown):
 *   --sfhu-bar-text        #ffffff   bar text + logo (rest)
 *   --sfhu-cta-bg          #d3e7ff   CTA background (rest)
 *   --sfhu-cta-text        #000000   CTA text (rest)
 *   --sfhu-cta-hover-bg    #3d5e86   CTA background (hover)
 *   --sfhu-cta-hover-text  #ffffff   CTA text (hover)
 *   --sfhu-burger-pill     #ffffff   hamburger pill (rest)
 *   --sfhu-burger-line     #000000   hamburger lines
 *   --sfhu-burger-open     #d3e7ff   hamburger pill (open/scrolled)
 *   --sfhu-scrolled-text   #000000   bar text + logo in scrolled skin
 *   --sfhu-mobile-bg       #ffffff   mobile panel background
 *   --sfhu-mobile-link     #000000   mobile panel link colour
 *   --sfhu-logo-width      100px     desktop logo width
 *   --sfhu-collapse-bp     991px     collapse breakpoint (token; media queries below use 991px literal — see note)
 *   --sfhu-mobile-link-size 3rem     mobile link font-size
 *
 * NOTE on breakpoint: CSS media queries cannot read a custom property, so the
 * literal 991px is used below. If the admin breakpoint changes, the
 * frontend-developer should either keep 991px or generate a small inline
 * <style> override. --sfhu-collapse-bp is provided for JS use.
 *
 * LEFT FOR YOU (frontend-developer) — intentionally NOT pixel-faithful here:
 *   1. Nav-link hover text-stagger (translateY swap on .sfhu-link-text /
 *      .sfhu-link-text-clone; per-char stagger ~0.02–0.04s, .2s ease).
 *   2. CTA fill-wipe (left→right reveal) + optional top-line animation.
 *   3. Mobile panel open easing (height/max-height or translateY; Webflow IX2 feel).
 *   4. Scroll-skin transition polish (yPercent -102 ↔ 0, .6s power4.out) — JS
 *      toggles .is-sfhu-hidden/.is-sfhu-scrolled; refine the transition curve here.
 *   5. ≤767px logo shrink + nav gap 1.5rem fine values.
 * ========================================================================== */

/* ---- Root / bar ---- */
.sfhu-header {
	font-family: var(--sfhu-font-family, inherit);
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 9999;
	background: transparent;
	color: var(--sfhu-bar-text, #ffffff);
	/* power4.out approximation for the yPercent hide/show; colour eases shorter. */
	transition: transform .6s cubic-bezier(.165,.84,.44,1), color .3s ease, background .3s ease;
	will-change: transform;
}

.sfhu-bar {
	position: relative;
	overflow: visible !important;
}

.sfhu-spacer-top {
	height: var(--sfhu-pad-top-desktop, 24px);
}

.sfhu-spacer-bottom {
	height: var(--sfhu-pad-bottom-desktop, 0px);
}

.sfhu-inner {
	max-width: 86rem;
	margin: 0 auto;
	padding-left: var(--sfhu-pad-left-desktop,40px);
	padding-right: var(--sfhu-pad-right-desktop,40px);
	position: relative;
	z-index: 2;
	overflow: visible !important;
}

.sfhu-row {
	min-height: calc(58px + max(0px, (var(--sfhu-logo-top-offset, 0px) * -1)));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	overflow: visible !important;
}

.sfhu-background {
	position: absolute;
	inset: 0;
	background: var(--sfhu-header-bg, transparent) !important;
	opacity: 1;
	transition: background .3s ease, opacity .3s ease;
	z-index: 1;
}

.sfhu-header {
	font-family: var(--sfhu-font-family, inherit);
	background: transparent !important;
}
.sfhu-header .sfhu-bar {
	background: var(--sfhu-header-bg, transparent) !important;
}

.sfhu-header.sfhu-transparent .sfhu-bar,
.sfhu-header.is-sfhu-scrolled .sfhu-bar,
.sfhu-header.is-sfhu-open .sfhu-bar,
.sfhu-header.sfhu-transparent .sfhu-background,
.sfhu-header.is-sfhu-scrolled .sfhu-background,
.sfhu-header.is-sfhu-open .sfhu-background {
	background: var(--sfhu-header-bg, transparent) !important;
}

.sfhu-header.sfhu-transparent .sfhu-background {
	opacity: 1;
}

/* ---- Brand / logo ---- */
.sfhu-brand {
	display: inline-flex;
	align-items: center;
	color: inherit; /* drives currentColor logo fill */
	text-decoration: none;
	z-index: 999;
	overflow: visible !important;
	line-height: 0;
}

.sfhu-logo {
	width: var(--sfhu-logo-width, 100px);
	height: auto;
	display: block;
	transition: color .3s ease;
	overflow: visible !important;
	max-height: none !important;
	object-fit: contain;
	position: relative;
	top: var(--sfhu-logo-top-offset, 0px);
	z-index: 3;
}

/* If the logo is an inlined SVG, let its paths follow the bar text colour so the
 * white->black scroll/menu flip works. (No-op for a raster <img>.) */
.sfhu-brand svg,
.sfhu-logo svg {
	color: inherit;
}
.sfhu-brand svg path,
.sfhu-logo svg path,
.sfhu-brand svg [fill] {
	fill: currentColor;
}

.sfhu-logo-text {
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 500;
	color: inherit;
}

/* ---- Desktop nav ---- */
.sfhu-nav-wrap {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.sfhu-nav {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfhu-item {
	margin: 0;
	list-style: none;
}

.sfhu-link {
	position: relative;
	display: flex;
	flex-flow: column;
	padding: 0 .5rem;
	overflow: hidden; /* clip mask for hover swap (LEFT FOR YOU #1) */
	color: inherit;
	text-decoration: none;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: -0.02em;
	transition: color .2s ease;
}

/* Hover swap: two stacked copies inside the overflow:hidden .sfhu-link column.
 * At rest the primary sits in view, the clone is parked one line below.
 * On hover both translate up by 100%: primary leaves upward, clone rises in.
 * No underline / ::before / ::after. ~.4s with a soft power-out feel; a tiny
 * clone delay gives the two-stage "stagger" read without per-char splitting. */
.sfhu-link-text,
.sfhu-link-text-clone {
	display: block;
	transition: transform .4s cubic-bezier(.165,.84,.44,1);
}

.sfhu-link-text {
	transform: translateY(0);
}

.sfhu-link-text-clone {
	position: absolute;
	top: 0;
	left: .5rem;
	transform: translateY(100%);
	transition-delay: .03s; /* subtle stagger between the two lines */
}

.sfhu-link:hover .sfhu-link-text,
.sfhu-link:focus-visible .sfhu-link-text {
	transform: translateY(-100%);
}
.sfhu-link:hover .sfhu-link-text-clone,
.sfhu-link:focus-visible .sfhu-link-text-clone {
	transform: translateY(0);
}

/* ---- CTA ---- */
.sfhu-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .625rem;
	min-height: 3rem;
	padding: var(--sfhu-cta-pad-y, 10px) var(--sfhu-cta-pad-x, 16px);
	overflow: hidden; /* clips the fill-wipe layer to the rounded rect */
	border: 1px solid var(--sfhu-cta-bg, #d3e7ff);
	border-radius: var(--sfhu-cta-radius, 4px);
	background: var(--sfhu-cta-bg, #d3e7ff);
	color: var(--sfhu-cta-text, #000000);
	font-family: inherit;
	font-size: var(--sfhu-cta-font-size, 1rem);
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: -0.02em;
	text-decoration: none;
	transition: color .2s ease, border-color .2s ease;
}

/* Fill-wipe layer: a scaleX(0) bar anchored left that grows to full width on
 * hover, revealing the hover background as a left->right wipe. */
.sfhu-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sfhu-cta-hover-bg, #3d5e86);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s cubic-bezier(.165,.84,.44,1);
	z-index: 0;
}

/* Keep the label above the wipe layer. */
.sfhu-cta-text {
	position: relative;
	z-index: 1;
}

.sfhu-cta:hover,
.sfhu-cta:focus-visible {
	border-color: var(--sfhu-cta-hover-bg, #3d5e86);
	color: var(--sfhu-cta-hover-text, #ffffff);
}

.sfhu-cta:hover::before,
.sfhu-cta:focus-visible::before {
	transform: scaleX(1);
}

/* ---- Hamburger (hidden on desktop) ---- */
.sfhu-burger {
	display: none;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	row-gap: .25rem;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: .5rem;
	background: var(--sfhu-burger-pill, #ffffff);
	cursor: pointer;
	transition: background-color .2s ease;
	z-index: 999;
}

.sfhu-burger-line {
	width: 1.0625rem;
	height: 1px;
	background: var(--sfhu-burger-line, #000000);
	transition: background-color .2s ease;
}

/* ---- Mobile panel (hidden until breakpoint) ---- */
.sfhu-mobile {
	display: none;
}

.sfhu-mobile-list {
	display: flex;
	flex-flow: column;
	gap: 2rem;
	width: 100%;
	max-height: calc(100% - 5rem);
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfhu-mobile-item {
	margin: 0;
	list-style: none;
}

.sfhu-mobile-link {
	display: block;
	color: var(--sfhu-mobile-link, #000000);
	font-family: inherit;
	font-size: var(--sfhu-mobile-link-size, 3rem);
	line-height: 1;
	font-weight: 250;
	text-decoration: none;
}

.sfhu-mobile-cta-spacer {
	height: 16px;
}

.sfhu-cta-mobile {
	width: 100%;
}

/* ---- Content offset spacer (pushes page content below the fixed header) ----
 * Plain in-flow block printed right after the fixed .sfhu-header. Takes its
 * height from inline vars on the element (--sfhu-offset-d desktop /
 * --sfhu-offset-m mobile). Fallback 0px = no offset when the vars are absent. */
.sfhu-content-offset {
	width: 100%;
	height: var(--sfhu-offset-d, 0px);
}

@media (max-width: 991px) {
	.sfhu-content-offset {
		height: var(--sfhu-offset-m, 0px);
	}
}

/* =============================================================================
 * JS-TOGGLED STATES (baseline; frontend-developer refines timing/curves)
 * ========================================================================== */

/* Scrolled skin: bar text/logo -> dark; hamburger pill -> open colour. */
.sfhu-header.is-sfhu-scrolled {
	color: var(--sfhu-scrolled-text, #000000);
}
.sfhu-header.is-sfhu-scrolled .sfhu-burger {
	background: var(--sfhu-burger-open, #d3e7ff);
}
.sfhu-header.is-sfhu-scrolled .sfhu-background {
	opacity: 1;
}

/* Hide-on-scroll-down. */
.sfhu-header.is-sfhu-hidden {
	transform: translateY(-102%);
}

/* Menu open: bar text dark, hamburger pill open colour. */
.sfhu-header.is-sfhu-open {
	color: var(--sfhu-scrolled-text, #000000);
}
.sfhu-header.is-sfhu-open .sfhu-burger {
	background: var(--sfhu-burger-open, #d3e7ff);
}

/* Scroll lock when panel open. */
body.sfhu-noscroll {
	overflow: hidden;
}

/* =============================================================================
 * OVERRIDE FALLBACK — when the plugin takes over, hide the theme/Elementor
 * native header so only SF Header Uno renders. Scoped under body.sfhu-override-on.
 * ========================================================================== */
body.sfhu-override-on header[data-elementor-type="header"],
body.sfhu-override-on .ehf-header,
body.sfhu-override-on .elementor-location-header,
body.sfhu-override-on #masthead,
body.sfhu-override-on .site-header {
	display: none !important;
}

/* =============================================================================
 * REDUCED MOTION — disable transforms/transitions for users who ask for it.
 * The hide/show still works (instant), the colour skin still applies.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.sfhu-header,
	.sfhu-logo,
	.sfhu-link-text,
	.sfhu-link-text-clone,
	.sfhu-cta,
	.sfhu-cta::before,
	.sfhu-burger,
	.sfhu-burger-line,
	.sfhu-mobile {
		transition-duration: .01ms !important;
	}
	.sfhu-header.is-sfhu-hidden {
		transform: none !important;
		visibility: hidden;
	}
}

/* =============================================================================
 * RESPONSIVE — collapse at 991px (see breakpoint note above)
 * ========================================================================== */
@media (max-width: 991px) {
	.sfhu-nav-wrap,
	.sfhu-cta-wrap {
		display: none;
	}

	.sfhu-burger {
		display: flex;
	}

	/* Mobile panel: a full-height overlay that slides down from the top edge.
	 * translateY gives a GPU-smooth ~.5s open without animating padding. */
	.sfhu-mobile {
		display: flex;
		flex-flow: column;
		justify-content: flex-end;
		align-items: flex-start;
		position: fixed;
		inset: 0 0 auto 0;
		height: 100dvh;
		max-height: 100vh; /* dvh fallback */
		overflow: hidden;
		background: var(--sfhu-mobile-bg, #ffffff);
		padding: 6rem 2.5rem 2.5rem;
		transform: translateY(-100%);
		transition: transform .5s cubic-bezier(.165,.84,.44,1);
		z-index: 9990;
	}

	.sfhu-header.is-sfhu-open .sfhu-mobile {
		transform: translateY(0);
	}
}

@media (max-width: 767px) {
	.sfhu-logo {
		width: 8.75rem;
	}
	.sfhu-mobile-link {
		font-size: 2.5rem;
	}
}

@media (max-width: 479px) {
	.sfhu-logo {
		width: 140px;
	}
}


/* ---- Strong theme/Elementor override fixes ---- */
.sfhu-header,
.sfhu-header * {
	box-sizing: border-box;
}

.sfhu-header .sfhu-link,
.sfhu-header .sfhu-link:visited,
.sfhu-header .sfhu-link:hover,
.sfhu-header .sfhu-link:focus,
.sfhu-header .sfhu-link:active,
.sfhu-header .sfhu-link-text,
.sfhu-header .sfhu-link-text-clone {
	color: var(--sfhu-bar-text, #ffffff) !important;
}

.sfhu-header.is-sfhu-scrolled .sfhu-link,
.sfhu-header.is-sfhu-scrolled .sfhu-link-text,
.sfhu-header.is-sfhu-scrolled .sfhu-link-text-clone,
.sfhu-header.is-sfhu-open .sfhu-link,
.sfhu-header.is-sfhu-open .sfhu-link-text,
.sfhu-header.is-sfhu-open .sfhu-link-text-clone {
	color: var(--sfhu-scrolled-text, #000000) !important;
}

.sfhu-header .sfhu-cta,
.sfhu-header .sfhu-cta span {
	color: var(--sfhu-cta-text, #000000) !important;
}

.sfhu-header .sfhu-cta:hover,
.sfhu-header .sfhu-cta:hover span {
	color: var(--sfhu-cta-hover-text, #ffffff) !important;
}

.sfhu-header .sfhu-burger {
	display: none !important;
}

@media (max-width: 991px) {
	.sfhu-header .sfhu-burger {
		display: flex !important;
	}

	.sfhu-header .sfhu-mobile {
		justify-content: flex-start !important;
		padding-top: calc(var(--sfhu-pad-top-mobile, 5px) + 1rem) !important;
		padding-bottom: var(--sfhu-pad-bottom-mobile, 5px) !important;
		overflow-y: visible !important;
		z-index: 10000 !important;
	}

	.sfhu-header.is-sfhu-open .sfhu-bar {
		background: transparent !important;
	}

	.sfhu-header .sfhu-mobile-list {
		max-height: none !important;
		overflow: visible !important;
		gap: 1.5rem !important;
	}
}

@media (max-width: 991px){
 .sfhu-inner{padding-left:var(--sfhu-pad-left-mobile,20px);padding-right:var(--sfhu-pad-right-mobile,20px);}
 .sfhu-spacer-top{height:var(--sfhu-pad-top-mobile,5px);}
 .sfhu-spacer-bottom{height:var(--sfhu-pad-bottom-mobile,5px);}
}


/* ---- Optional global colour mode ---- */
.sfhu-header.sfhu-use-global-colors {
	color: var(--e-global-color-text, inherit) !important;
}

.sfhu-header.sfhu-use-global-colors .sfhu-link,
.sfhu-header.sfhu-use-global-colors .sfhu-link:visited,
.sfhu-header.sfhu-use-global-colors .sfhu-link:hover,
.sfhu-header.sfhu-use-global-colors .sfhu-link:focus,
.sfhu-header.sfhu-use-global-colors .sfhu-link:active,
.sfhu-header.sfhu-use-global-colors .sfhu-link-text,
.sfhu-header.sfhu-use-global-colors .sfhu-link-text-clone,
.sfhu-header.sfhu-use-global-colors .sfhu-mobile-link,
.sfhu-header.sfhu-use-global-colors .sfhu-mobile-link span {
	color: var(--e-global-color-text, inherit) !important;
}

.sfhu-header.sfhu-use-global-colors .sfhu-cta,
.sfhu-header.sfhu-use-global-colors .sfhu-cta span {
	color: var(--e-global-color-primary, inherit) !important;
}

.sfhu-header.sfhu-use-global-colors .sfhu-cta {
	background: var(--e-global-color-accent, var(--sfhu-cta-bg, #d3e7ff)) !important;
}

/* Keep the hamburger/button colours controlled by the plugin fields even when
   global colours are enabled. This prevents Elementor accent colours from
   unexpectedly changing the burger background. */
.sfhu-header.sfhu-use-global-colors .sfhu-burger {
	background: var(--sfhu-burger-pill, #ffffff) !important;
}

.sfhu-header.sfhu-use-global-colors.is-sfhu-scrolled .sfhu-burger,
.sfhu-header.sfhu-use-global-colors.is-sfhu-open .sfhu-burger {
	background: var(--sfhu-burger-open, var(--sfhu-burger-pill, #ffffff)) !important;
}

.sfhu-header.sfhu-use-global-colors .sfhu-burger-line {
	background: var(--sfhu-burger-line, #000000) !important;
}

/* ---- v1.0.16: strict plugin colour mode ----
   When "Use global colours" is OFF, the plugin must win over Elementor/theme styles.
   Keep this scoped to .sfhu-header so it does not affect the rest of the website. */
.sfhu-header:not(.sfhu-use-global-colors) {
	color: var(--sfhu-bar-text, #ffffff) !important;
	font-family: var(--sfhu-font-family, inherit) !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-brand,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-logo-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-nav,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-nav-wrap,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-link,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-link:link,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-link:visited,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-link:hover,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-link:focus,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-link:active,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-link-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-link-text-clone {
	color: var(--sfhu-bar-text, #ffffff) !important;
	font-family: var(--sfhu-font-family, inherit) !important;
	text-decoration: none !important;
}

.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-scrolled,
.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-open,
.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-scrolled .sfhu-brand,
.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-open .sfhu-brand,
.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-scrolled .sfhu-link,
.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-open .sfhu-link,
.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-scrolled .sfhu-link:visited,
.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-open .sfhu-link:visited,
.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-scrolled .sfhu-link:hover,
.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-open .sfhu-link:hover,
.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-scrolled .sfhu-link-text,
.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-open .sfhu-link-text,
.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-scrolled .sfhu-link-text-clone,
.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-open .sfhu-link-text-clone {
	color: var(--sfhu-scrolled-text, #000000) !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:link,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:visited,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta span {
	background-color: var(--sfhu-cta-bg, #d3e7ff) !important;
	border-color: var(--sfhu-cta-bg, #d3e7ff) !important;
	color: var(--sfhu-cta-text, #000000) !important;
	font-family: var(--sfhu-font-family, inherit) !important;
	text-decoration: none !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible {
	border-color: var(--sfhu-cta-hover-bg, #3d5e86) !important;
	color: var(--sfhu-cta-hover-text, #ffffff) !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible span {
	color: var(--sfhu-cta-hover-text, #ffffff) !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta::before {
	background: var(--sfhu-cta-hover-bg, #3d5e86) !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-burger,
.sfhu-header:not(.sfhu-use-global-colors) button.sfhu-burger,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-burger:hover,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-burger:focus,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-burger:active {
	background: var(--sfhu-burger-pill, #ffffff) !important;
	background-color: var(--sfhu-burger-pill, #ffffff) !important;
	border-color: var(--sfhu-burger-pill, #ffffff) !important;
	color: var(--sfhu-burger-line, #000000) !important;
}

.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-scrolled .sfhu-burger,
.sfhu-header:not(.sfhu-use-global-colors).is-sfhu-open .sfhu-burger {
	background: var(--sfhu-burger-open, var(--sfhu-burger-pill, #ffffff)) !important;
	background-color: var(--sfhu-burger-open, var(--sfhu-burger-pill, #ffffff)) !important;
	border-color: var(--sfhu-burger-open, var(--sfhu-burger-pill, #ffffff)) !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-burger-line,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-burger span.sfhu-burger-line,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-burger .is-first,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-burger .is-second,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-burger .is-third {
	background: var(--sfhu-burger-line, #000000) !important;
	background-color: var(--sfhu-burger-line, #000000) !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-mobile {
	background: var(--sfhu-mobile-bg, #ffffff) !important;
	background-color: var(--sfhu-mobile-bg, #ffffff) !important;
	font-family: var(--sfhu-font-family, inherit) !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-mobile-link,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-mobile-link:link,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-mobile-link:visited,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-mobile-link:hover,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-mobile-link:focus,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-mobile-link:active,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-mobile-link span {
	color: var(--sfhu-mobile-link, #000000) !important;
	font-family: var(--sfhu-font-family, inherit) !important;
	text-decoration: none !important;
}

/* ---- v1.0.19: CTA child hover/background fix ----
/* The CTA label/span must never draw its own box. The button background and
   ::before hover layer are the only visible backgrounds. */
.sfhu-header .sfhu-cta,
.sfhu-header .sfhu-cta:link,
.sfhu-header .sfhu-cta:visited {
	background: var(--sfhu-cta-bg, #d3e7ff) !important;
	background-color: var(--sfhu-cta-bg, #d3e7ff) !important;
	border-color: var(--sfhu-cta-bg, #d3e7ff) !important;
}

.sfhu-header .sfhu-cta:hover,
.sfhu-header .sfhu-cta:focus-visible,
.sfhu-header .sfhu-cta:active {
	border-color: var(--sfhu-cta-hover-bg, #3d5e86) !important;
}

.sfhu-header .sfhu-cta .sfhu-cta-text,
.sfhu-header .sfhu-cta span,
.sfhu-header .sfhu-cta:hover .sfhu-cta-text,
.sfhu-header .sfhu-cta:hover span,
.sfhu-header .sfhu-cta:focus-visible .sfhu-cta-text,
.sfhu-header .sfhu-cta:focus-visible span,
.sfhu-header .sfhu-cta:active .sfhu-cta-text,
.sfhu-header .sfhu-cta:active span {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta span {
	color: var(--sfhu-cta-text, #000000) !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active span {
	color: var(--sfhu-cta-hover-text, #ffffff) !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover::before,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible::before,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active::before {
	background: var(--sfhu-cta-hover-bg, #3d5e86) !important;
}


/* ---- v1.0.20: stronger CTA child reset ----
   Elementor/global styles sometimes put a background on the text span itself.
   In plugin colour mode, the button and its ::before layer own all backgrounds. */
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta > .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta > span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover > .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover > span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus > .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus > span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible > .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible > span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active > .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active > span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta .sfhu-cta-text *,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta span * {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border-color: transparent !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active {
	background: var(--sfhu-cta-bg, #d3e7ff) !important;
	background-color: var(--sfhu-cta-bg, #d3e7ff) !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover::before,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible::before,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active::before {
	background: var(--sfhu-cta-hover-bg, #3d5e86) !important;
	background-color: var(--sfhu-cta-hover-bg, #3d5e86) !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover > .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover > span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible > .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible > span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active > .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active > span {
	color: var(--sfhu-cta-hover-text, #ffffff) !important;
}


/* ---- v1.0.22: CTA label background matches the button state ----
   Some themes/Elementor styles apply a background directly to the span label.
   In plugin colour mode, force the label to use the same background colour as
   the button in both normal and hover states so no separate light rectangle appears. */
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta > .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta > span {
	/* v1.0.24: label stays transparent so the parent rest bg + ::before wipe show through. */
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--sfhu-cta-text, #000000) !important;
	box-shadow: none !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover > .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover > span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus > .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus > span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible > .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible > span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active > .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active > span {
	/* v1.0.24: label stays transparent on hover so the ::before wipe shows through. */
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--sfhu-cta-hover-text, #ffffff) !important;
	box-shadow: none !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active {
	/* v1.0.24: parent keeps REST bg in every state; the ::before wipe paints hover-bg. */
	background: var(--sfhu-cta-bg, #d3e7ff) !important;
	background-color: var(--sfhu-cta-bg, #d3e7ff) !important;
	border-color: var(--sfhu-cta-hover-bg, #3d5e86) !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover::before,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus::before,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible::before,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active::before {
	background: var(--sfhu-cta-hover-bg, #3d5e86) !important;
	background-color: var(--sfhu-cta-hover-bg, #3d5e86) !important;
}

/* ---- v1.0.22: definitive CTA hover background sync ----
   The CTA text span must follow the parent button hover background in ALL colour modes.
   This is placed at the very end of the stylesheet so it wins over Elementor/theme
   and older plugin hover/reset rules. */
.sfhu-header .sfhu-cta:hover,
.sfhu-header .sfhu-cta:focus,
.sfhu-header .sfhu-cta:focus-visible,
.sfhu-header .sfhu-cta:active {
	/* v1.0.24: parent keeps REST bg in every state; the ::before wipe paints hover-bg. */
	background: var(--sfhu-cta-bg, #d3e7ff) !important;
	background-color: var(--sfhu-cta-bg, #d3e7ff) !important;
	border-color: var(--sfhu-cta-hover-bg, #3d5e86) !important;
	color: var(--sfhu-cta-hover-text, #ffffff) !important;
}

.sfhu-header .sfhu-cta:hover > .sfhu-cta-text,
.sfhu-header .sfhu-cta:hover > span,
.sfhu-header .sfhu-cta:focus > .sfhu-cta-text,
.sfhu-header .sfhu-cta:focus > span,
.sfhu-header .sfhu-cta:focus-visible > .sfhu-cta-text,
.sfhu-header .sfhu-cta:focus-visible > span,
.sfhu-header .sfhu-cta:active > .sfhu-cta-text,
.sfhu-header .sfhu-cta:active > span {
	/* v1.0.24: label stays transparent on hover so the ::before wipe shows through. */
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--sfhu-cta-hover-text, #ffffff) !important;
	box-shadow: none !important;
}

.sfhu-header .sfhu-cta > .sfhu-cta-text,
.sfhu-header .sfhu-cta > span {
	border: 0 !important;
	outline: 0 !important;
}

/* ---- v1.0.23: CTA span must never paint its own background ----
   The parent .sfhu-cta owns normal and hover backgrounds. The label stays transparent
   so no small rectangle can appear over the button, regardless of Elementor/theme CSS. */
.sfhu-header .sfhu-cta .sfhu-cta-text,
.sfhu-header .sfhu-cta span.sfhu-cta-text,
.sfhu-header .sfhu-cta > .sfhu-cta-text,
.sfhu-header .sfhu-cta > span,
.sfhu-header .sfhu-cta:hover .sfhu-cta-text,
.sfhu-header .sfhu-cta:hover span.sfhu-cta-text,
.sfhu-header .sfhu-cta:hover > .sfhu-cta-text,
.sfhu-header .sfhu-cta:hover > span,
.sfhu-header .sfhu-cta:focus .sfhu-cta-text,
.sfhu-header .sfhu-cta:focus > span,
.sfhu-header .sfhu-cta:focus-visible .sfhu-cta-text,
.sfhu-header .sfhu-cta:focus-visible > span,
.sfhu-header .sfhu-cta:active .sfhu-cta-text,
.sfhu-header .sfhu-cta:active > span {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta > span {
	color: var(--sfhu-cta-text, #000000) !important;
}

.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:hover > span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus > span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:focus-visible > span,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active .sfhu-cta-text,
.sfhu-header:not(.sfhu-use-global-colors) .sfhu-cta:active > span {
	color: var(--sfhu-cta-hover-text, #ffffff) !important;
}

/* ---- v1.0.24: restore the left->right fill-wipe on CTA hover ----
   The earlier anti-bleed patches (v1.0.19/.22/.23) painted the PARENT button and
   the label span to the full hover background instantly on :hover, which masked the
   .sfhu-cta::before scaleX wipe (only the hover-out retract was visible).
   Fix: the parent now keeps the REST bg (--sfhu-cta-bg) in EVERY state, and the label
   span stays transparent in EVERY state, so the ::before bar is the ONLY layer that
   paints the hover bg (--sfhu-cta-hover-bg) and the wipe animates on hover-in.
   border-color and text color still switch to the hover values. */