/**
 * GF Sticky Header – base styles for sticky-enabled native Containers.
 *
 * State-specific backgrounds, shadow and padding are generated by Elementor
 * from the widget controls (see src/Extensions/Sticky_Container.php). This file
 * only provides the positioning + transition scaffold and the overlay trick.
 *
 * Classes added in PHP (render) / mirrored by the editor script:
 *   .gf-sticky--scope-container – position: sticky (pins when reached)
 *   .gf-sticky--scope-page      – position: fixed (pinned to the viewport)
 *   .gf-sticky--from-start      – page scope: fixed immediately
 *   .gf-sticky--on-reach        – page scope: pins when you scroll to it
 *   .gf-sticky--anim-*          – pin animation (slide / fade / slide-fade)
 *
 * Runtime classes (added by the frontend/editor JS):
 *   .gf-sticky-active    – sticky enabled on the current breakpoint
 *   .gf-sticky--overlay  – overlay/hero mode (hero present at top of page)
 *   .gf-sticky--scrolled – scrolled past the background threshold
 *   .gf-sticky--pinned   – an on-reach header has reached the top (→ fixed)
 */

.gf-sticky-container {
	transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease, backdrop-filter 0.3s ease;
}

/* Overlay mode: the hero is pulled up behind the (transparent) header via a
 * negative margin (set by JS), so the header must stack above it. .e-con is
 * position: relative already; this just raises its z-index while in flow. The
 * fixed/sticky positioning rules below (higher specificity) take over when
 * pinned. */
.gf-sticky-container.gf-sticky--overlay {
	position: relative;
	z-index: var(--gf-sticky-z, 100);
}

/* ── Scope: Within container → position: sticky ─────────────────────────────
 * Stays in the flow: pins when you scroll to it and is released when its parent
 * container ends. No spacer needed (it never leaves the flow). Needs room to
 * travel — an ancestor with overflow != visible can stop sticky. */
.gf-sticky-container.gf-sticky-active.gf-sticky--scope-container {
	position: -webkit-sticky;
	position: sticky;
	top: calc(var(--gf-sticky-top, 0px) + var(--gf-admin-bar, 0px));
	z-index: var(--gf-sticky-z, 100);
	width: 100%;
}

/* ── Scope: Whole page → position: fixed ────────────────────────────────────
 *   - from-start         : fixed immediately (always visible).
 *   - on-reach (pinned)  : in flow first, then fixed once you scroll down to it.
 * The JS adds a same-height spacer (except in overlay mode) so content below
 * doesn't jump/hide under the fixed header. */
.gf-sticky-container.gf-sticky-active.gf-sticky--scope-page.gf-sticky--from-start,
.gf-sticky-container.gf-sticky-active.gf-sticky--scope-page.gf-sticky--on-reach.gf-sticky--pinned {
	position: fixed;
	top: calc(var(--gf-sticky-top, 0px) + var(--gf-admin-bar, 0px));
	left: 0;
	right: 0;
	width: 100%;
	z-index: var(--gf-sticky-z, 100);
}

/* ── Pin animation ──────────────────────────────────────────────────────────
 * Plays when an on-reach header pins after you scroll to it. Type is chosen by
 * the gf_pin_animation control; duration by --gf-anim-duration. */
.gf-sticky-container.gf-sticky-active.gf-sticky--scope-page.gf-sticky--on-reach.gf-sticky--pinned.gf-sticky--anim-slide {
	animation: gf-sticky-slide-down var(--gf-anim-duration, 0.3s) ease;
}
.gf-sticky-container.gf-sticky-active.gf-sticky--scope-page.gf-sticky--on-reach.gf-sticky--pinned.gf-sticky--anim-fade {
	animation: gf-sticky-fade var(--gf-anim-duration, 0.3s) ease;
}
.gf-sticky-container.gf-sticky-active.gf-sticky--scope-page.gf-sticky--on-reach.gf-sticky--pinned.gf-sticky--anim-slide-fade {
	animation: gf-sticky-slide-fade var(--gf-anim-duration, 0.3s) ease;
}

@keyframes gf-sticky-slide-down {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

@keyframes gf-sticky-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes gf-sticky-slide-fade {
	from { opacity: 0; transform: translateY(-100%); }
	to   { opacity: 1; transform: translateY(0); }
}

/*
 * Placeholder kept in the flow while a page-scope (fixed) header is pinned, so
 * the content below does not jump up by the header's height. Height + visibility
 * are managed inline by the frontend/editor JS.
 */
.gf-sticky-spacer {
	display: block;
	width: 100%;
	flex: 0 0 auto;
	pointer-events: none;
}