/**
 * CDSWerx Sticky Nav Styler — Base Stylesheet (v5.0)
 *
 * Stuck-state visual skin + sticky-triggered entrance/exit animations.
 * All rules key off the internal state contract:
 *   [data-cds-sticky-nav][data-state="default" | "stuck" | "unsticking"]
 * "unsticking" is a transient state held by the companion JS for the exit
 * animation's duration — every stuck-look rule therefore matches
 * :is([data-state="stuck"], [data-state="unsticking"]) so the element
 * keeps its stuck appearance while animating out.
 *
 * Provider classes (Elementor Pro / JetSticky) are never referenced here —
 * the state-machine JS handles that translation. Pinning behavior (sticky
 * offset, devices, stop-at-parent, anchor offset) is intentionally NOT in
 * this stylesheet: provider territory + CDSWerx Plugin → Frontend Fixes.
 *
 * @package CDSWerx_Widget_Library
 * @since   4.0.0
 * @since   5.0.0
 */

/* === Stacking guard =========================================================
   A styled header must out-rank ordinary page content in BOTH states —
   otherwise it slides behind the page when the provider releases it.
   The CDSWerx Plugin tier system (cdswerx-globalstyles.css) only covers
   elements matching `header.sticky-header` (z-index 10000 !important);
   this is the baseline for containers that don't follow that convention.
   - :where() drops the position guard to zero specificity, so Elementor's
     own position settings (absolute/fixed) always win.
   - z-index is overridable via Elementor's Advanced → Z-Index control
     (higher specificity) or the --cds-nav-z variable. */
:where([data-cds-sticky-nav]) {
	position: relative;
}
[data-cds-sticky-nav] {
	z-index: var(--cds-nav-z, 100);
}

/* === Shared timing token =================================================== */
[data-cds-sticky-nav] {
	--cds-transition: var(--cds-transition-duration, .45s) var(--cds-transition-easing, cubic-bezier(.4, 0, .2, 1));
	transition:
		background-color  var(--cds-transition),
		backdrop-filter   var(--cds-transition),
		-webkit-backdrop-filter var(--cds-transition),
		box-shadow        var(--cds-transition),
		border-color      var(--cds-transition);
}

/* === Stuck state — backdrop filter =========================================
   Background color/gradient/image come from the "Sticky Section Style"
   Background group control (Elementor-generated CSS at high specificity);
   only the backdrop filter lives here, driven by the blur/saturation vars. */
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) {
	-webkit-backdrop-filter: saturate(var(--cds-nav-saturate, 100%)) blur(var(--cds-nav-blur, 0px));
	        backdrop-filter: saturate(var(--cds-nav-saturate, 100%)) blur(var(--cds-nav-blur, 0px));
}

/* === Sticky-triggered entrance / exit animations (v5.0) =====================
   --cds-entrance-anim / --cds-exit-anim carry keyframe names set by the
   Effect selects ("none" when unset). "both" fill keeps the final frame
   while stuck and the exit start-frame during the unsticking hold. */
[data-cds-sticky-nav][data-state="stuck"] {
	animation:
		var(--cds-entrance-anim, none)
		var(--cds-entrance-duration, .4s)
		var(--cds-transition-easing, cubic-bezier(.4, 0, .2, 1))
		var(--cds-entrance-delay, 0ms)
		both;
}
[data-cds-sticky-nav][data-state="unsticking"] {
	animation:
		var(--cds-exit-anim, none)
		var(--cds-entrance-duration, .4s)
		var(--cds-transition-easing, cubic-bezier(.4, 0, .2, 1))
		0ms
		both;
}

@keyframes cds-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes cds-fade-in-down {
	from { opacity: 0; transform: translateY(-24px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes cds-slide-in-down {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}
@keyframes cds-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}
@keyframes cds-fade-out-up {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(-24px); }
}
@keyframes cds-slide-out-up {
	from { transform: translateY(0); }
	to   { transform: translateY(-100%); }
}

/* Accessibility: states still flip (styling applies), motion is removed. */
@media (prefers-reduced-motion: reduce) {
	[data-cds-sticky-nav][data-state="stuck"],
	[data-cds-sticky-nav][data-state="unsticking"] {
		animation: none !important;
	}
}

/* === Stuck state — nav link colors (Elementor Nav Menu + JetMenu) ========== */
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .elementor-nav-menu .menu-item a,
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .jet-nav .menu-item a,
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .jet-nav .menu-item-link {
	color: var(--cds-nav-stuck-link-color, inherit);
}

[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .elementor-nav-menu .menu-item a:hover,
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .jet-nav .menu-item a:hover,
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .jet-nav .menu-item-link:hover {
	color: var(--cds-nav-stuck-hover-color, inherit);
}

[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .elementor-nav-menu .current-menu-item a,
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .jet-nav .current-menu-item a,
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .jet-nav .current-menu-item .menu-item-link {
	color: var(--cds-nav-stuck-active-color, inherit);
}

[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .elementor-nav-menu .sub-menu .menu-item a,
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .jet-nav .sub-menu .menu-item a {
	color: var(--cds-nav-stuck-submenu-color, inherit);
}

[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .elementor-nav-menu .sub-menu .menu-item a:hover,
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .jet-nav .sub-menu .menu-item a:hover {
	color: var(--cds-nav-stuck-submenu-hover, inherit);
}

/* === Smooth color transitions on link elements ============================= */
[data-cds-sticky-nav] .elementor-nav-menu .menu-item a,
[data-cds-sticky-nav] .jet-nav .menu-item a,
[data-cds-sticky-nav] .jet-nav .menu-item-link {
	transition: color var(--cds-transition);
}

/* === Logo Swap (v4.2 — static convention classes) ==========================
   Two mechanisms, both opacity/visibility-only (no reflow), both driven
   entirely by the rules below — no PHP-generated selectors.

   SIMPLE mode (panel media picker):
     The companion JS tags the detected logo widget `.cds-logo-host` and
     appends the sticky image as `<img class="cds-logo--sticky cds-logo--injected">`
     inside it. The injected image is absolutely centered over the host.

   ADVANCED mode (two widgets, user-applied classes):
     `.cds-logo`         → default logo widget (visible until stuck)
     `.cds-logo--sticky` → sticky logo widget  (visible only when stuck)
     `.cds-logo-stack`   → optional parent wrapper for true overlap
   ========================================================================== */

/* Shared fade timing for every swap participant */
[data-cds-sticky-nav] .cds-logo,
[data-cds-sticky-nav] .cds-logo--sticky,
[data-cds-sticky-nav] .cds-logo-host > * {
	transition:
		opacity    var(--cds-transition),
		visibility var(--cds-transition),
		transform  var(--cds-transition);
}

/* Default state: sticky variants hidden */
[data-cds-sticky-nav] .cds-logo--sticky {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Stuck state — ADVANCED two-widget swap.
   :not(.cds-logo-host) keeps a `.cds-logo`-tagged Simple-mode host from
   hiding itself (which would also hide the injected sticky image inside). */
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .cds-logo:not(.cds-logo-host) {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .cds-logo--sticky {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Stuck state — SIMPLE injected swap: hide the host widget's original
   content (Image widget markup or CDSWerx SVG markup), not the host. */
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .cds-logo-host > :not(.cds-logo--injected) {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Injected sticky image: centered over the host, never larger than it */
[data-cds-sticky-nav] .cds-logo-host {
	position: relative;
}
[data-cds-sticky-nav] .cds-logo--injected {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Logo Scale When Stuck (--cds-logo-scale, set by the panel slider) */
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .cds-logo img,
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .cds-logo svg,
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .cds-logo--sticky img,
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .cds-logo--sticky svg {
	transform: scale(var(--cds-logo-scale, .8));
}
[data-cds-sticky-nav]:is([data-state="stuck"], [data-state="unsticking"]) .cds-logo--injected {
	transform: translate(-50%, -50%) scale(var(--cds-logo-scale, .8));
}

/* Optional overlap helper for ADVANCED mode: wrap default + sticky logo
   widgets in a parent with class `cds-logo-stack`; both children occupy
   the same grid cell so the swap happens in place. */
[data-cds-sticky-nav] .cds-logo-stack {
	display: grid;
}
[data-cds-sticky-nav] .cds-logo-stack > * {
	grid-column: 1 / 1;
	grid-row:    1 / 1;
}