/* FluxCore Smart Sticky Nav — turns any Container/Section/Column/Div
   Block into a complete sticky header: pins it to the top of the
   viewport, then hides it on scroll down and reveals it on scroll up.
   Applied per-element from inside Elementor's Style tab ("FluxCore Smart
   Sticky Nav") — see class-fluxcore-elementor.php. One toggle handles
   everything; there's no separate native Sticky/Fixed position setting
   to configure first.

   `position: sticky` (not `fixed`) is used deliberately: it pins the
   element without taking it out of the page's normal document flow, so
   there's no content gap/jump underneath it to compensate for — the
   browser handles that automatically. This works correctly as long as
   the element sits in the page's normal top-level flow (true for the
   vast majority of Elementor headers, including Theme Builder header
   templates); it can't "escape" an ancestor that itself scrolls or has
   `overflow: hidden`, same as CSS position:sticky anywhere else.

   public/js/smart-sticky-nav.js toggles two classes based on scroll
   direction/position: 'fx-nav-hidden' and 'fx-nav-scrolled'. Everything
   those classes actually do is defined here, in CSS, driven by the
   custom properties Elementor writes per-element. */

.fx-sticky-nav-yes {
	position: sticky !important;
	top: 0 !important;
	left: 0;
	right: 0;
	z-index: var( --fx-nav-zindex, 9999 );
	transition: transform var( --fx-nav-duration, 350ms ) var( --fx-nav-easing, ease ),
		background-color var( --fx-nav-duration, 350ms ) var( --fx-nav-easing, ease ),
		backdrop-filter var( --fx-nav-duration, 350ms ) var( --fx-nav-easing, ease ),
		box-shadow var( --fx-nav-duration, 350ms ) var( --fx-nav-easing, ease ),
		padding-top var( --fx-nav-duration, 350ms ) var( --fx-nav-easing, ease ),
		padding-bottom var( --fx-nav-duration, 350ms ) var( --fx-nav-easing, ease );
	will-change: transform;
}

.fx-sticky-nav-yes.fx-nav-hidden {
	transform: translateY( -100% );
}

/* ---- Background on scroll: Solid ---- */
.fx-sticky-nav-yes.fx-nav-bgstyle-solid.fx-nav-scrolled {
	background-color: var( --fx-nav-bg, #ffffff ) !important;
}

/* ---- Background on scroll: Frosted Glass ---- */
.fx-sticky-nav-yes.fx-nav-bgstyle-glass.fx-nav-scrolled {
	background-color: var( --fx-nav-bg, rgba(255,255,255,0.7) ) !important;
	-webkit-backdrop-filter: blur( var( --fx-nav-blur, 12px ) );
	backdrop-filter: blur( var( --fx-nav-blur, 12px ) );
}

/* ---- Shadow on scroll (either background style) ---- */
.fx-sticky-nav-yes.fx-nav-shadow-yes.fx-nav-scrolled {
	box-shadow: 0 4px 20px rgba( 0, 0, 0, 0.08 );
}

/* ---- Shrink on scroll ---- */
.fx-sticky-nav-yes.fx-nav-shrink-yes.fx-nav-scrolled {
	padding-top: var( --fx-nav-scrolled-pad, 12px ) !important;
	padding-bottom: var( --fx-nav-scrolled-pad, 12px ) !important;
}

/* ---- Disable entirely below the tablet breakpoint ---- */
@media ( max-width: 767px ) {
	.fx-sticky-nav-yes.fx-nav-mobile-disabled {
		position: static !important;
		transform: none !important;
		background-color: initial !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		box-shadow: none !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.fx-sticky-nav-yes {
		transition: background-color 200ms ease, backdrop-filter 200ms ease, box-shadow 200ms ease, padding 200ms ease;
	}
	.fx-sticky-nav-yes.fx-nav-hidden {
		/* Motion-sensitive visitors keep the nav visible rather than have
		   it vanish/reappear abruptly with no easing to soften it. */
		transform: none;
	}
}