/**
 * Sticky Container for Elementor — frontend styles.
 *
 * Design notes:
 * - Native `position: sticky` is preferred: the element keeps its place in the layout,
 *   so activating sticky never causes a layout shift (CLS = 0).
 * - The JS engine only writes CSS custom properties (--scfe-*), never inline layout values,
 *   so theme styles stay predictable.
 */

.scfe-sticky {
	--scfe-top: 40px;
	--scfe-bottom: 0px;
	--scfe-top-effective: var(--scfe-top);
	--scfe-transition: 200ms;
	--scfe-zindex: 100;
	--scfe-header-height: 0px;
}

/* ---------------------------------------------------------------
 * 1. Native sticky mode (default; "auto" uses it whenever possible)
 * --------------------------------------------------------------- */

.scfe-sticky.scfe-active.scfe-mode-sticky {
	position: sticky;
	top: var(--scfe-top-effective);
	z-index: var(--scfe-zindex);
}

/* Theme offset compensation.
   Some themes make a row full-bleed with `position: relative; left: -15px` (Woodmart
   .wd-section-stretch, Elementor negative-gap sections). `position: sticky` re-interprets
   `left` as the horizontal stick threshold, so that negative offset is lost and the row
   shifts right. The engine measures the difference around the mode switch and hands it
   back here. Applied only when a shift was actually detected, so no transform is created
   for ordinary sticky elements. */
.scfe-sticky.scfe-active.scfe-shift-x {
	transform: translateX(var(--scfe-x-shift, 0px));
}

.scfe-sticky.scfe-hidden.scfe-shift-x {
	transform: translateX(var(--scfe-x-shift, 0px)) translateY(-120%);
}

.scfe-sticky.scfe-align-bottom.scfe-hidden.scfe-shift-x {
	transform: translateX(var(--scfe-x-shift, 0px)) translateY(120%);
}

/* Bottom alignment sticks to the bottom edge instead of the top one. */
.scfe-sticky.scfe-align-bottom.scfe-active.scfe-mode-sticky {
	top: auto;
	bottom: var(--scfe-bottom);
}

/* Inside a row-direction flex container the item must not stretch, otherwise
   sticky has no travel room. The class is added by the engine only when needed. */
.scfe-flex-row-child.scfe-active {
	align-self: flex-start;
	height: auto;
}

/* ---------------------------------------------------------------
 * 2. Fixed + placeholder mode (used when an ancestor blocks sticky,
 *    e.g. overflow: hidden, or when the boundary is a custom ancestor)
 * --------------------------------------------------------------- */

.scfe-sticky.scfe-active.scfe-mode-fixed {
	position: fixed;
	left: var(--scfe-left, 0);
	width: var(--scfe-width, auto);
	top: var(--scfe-top-effective);
	z-index: var(--scfe-zindex);
	margin-top: 0;
	will-change: transform, top;
	transition: transform var(--scfe-transition) ease, top var(--scfe-transition) ease;
}

.scfe-sticky.scfe-align-bottom.scfe-active.scfe-mode-fixed {
	top: auto;
	bottom: var(--scfe-bottom);
}

/* Invisible placeholder that preserves the reserved space while fixed. */
.scfe-placeholder {
	display: block;
	visibility: hidden;
	pointer-events: none;
	margin: 0;
	padding: 0;
	border: 0;
}

/* ---------------------------------------------------------------
 * 3. Scroll direction behaviour (slide out / in)
 * --------------------------------------------------------------- */

.scfe-sticky.scfe-hidden {
	transform: translateY(-120%);
}

.scfe-sticky.scfe-align-bottom.scfe-hidden {
	transform: translateY(120%);
}

/* ---------------------------------------------------------------
 * 4. Editor + accessibility helpers
 * --------------------------------------------------------------- */

/* In the Elementor editor the sticky engine is disabled; make the state obvious. */
.elementor-editor-active .scfe-sticky.scfe-active,
.elementor-editor-preview .scfe-sticky.scfe-active {
	position: relative;
	top: auto;
	bottom: auto;
	transform: none;
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.scfe-sticky {
		--scfe-transition: 0ms;
		transition: none !important;
	}
}

/* Print: never stick. */
@media print {
	.scfe-sticky,
	.scfe-sticky.scfe-active {
		position: static !important;
		transform: none !important;
	}
}