/*
 * CWS - Header Container
 * Fixed-position header + hide-on-scroll styles for Elementor containers.
 *
 * Enqueued only when a container on the page enables the feature
 * (see CWS_header_container::maybe_decorate()). The per-device top offset is
 * written by Elementor as the --cws-sticky-offset custom property on the same
 * element; this stylesheet adds the WP admin-bar height on top with calc().
 *
 * Position is read from --cws-header-pos (default: fixed). The "Sticky on device"
 * responsive control overrides it to `static` on chosen breakpoints, so the
 * header scrolls normally there. When static, top/left/right/z-index are inert.
 *
 * "Become fixed" deferred mode: the header renders with .cws-header-defer and
 * stays in normal flow (no position rule) until JS adds .cws-header-stuck, at
 * which point it pins exactly like .cws-header-fixed (same --cws-header-pos, so a
 * per-device `static` still keeps it in flow).
 */

.cws-header-fixed,
.cws-header-defer.cws-header-stuck {
    position: var(--cws-header-pos, fixed);
    top: var(--cws-sticky-offset, 0px);
    left: 0;
    right: 0;
    z-index: 100;
}

/*
 * Lift the fixed header below the WP admin bar for logged-in users.
 * The admin bar is 32px tall on desktop and 46px at <= 782px (WP defaults).
 */
.admin-bar .cws-header-fixed,
.admin-bar .cws-header-defer.cws-header-stuck {
    top: calc(var(--cws-sticky-offset, 0px) + 32px);
}

@media screen and (max-width: 782px) {
    .admin-bar .cws-header-fixed,
    .admin-bar .cws-header-defer.cws-header-stuck {
        top: calc(var(--cws-sticky-offset, 0px) + 46px);
    }
}

/*
 * Hide-on-scroll: slide the header fully out of view when the JS adds
 * .cws-header-hidden. Subtracting the offset on top of -100% guarantees the
 * header clears the viewport top even when a positive top offset is set.
 */
.cws-header-disappear {
    transition: transform 0.3s ease;
    will-change: transform;
}

.cws-header-disappear.cws-header-hidden {
    transform: translateY(calc(-100% - var(--cws-sticky-offset, 0px)));
}

/*
 * "Become fixed after" spacer: JS inserts this before a deferred header and sets
 * its height to the header's height while pinned, reserving the header's flow
 * space so the content below doesn't jump and the top bar above doesn't move.
 * Height is set inline by JS; full-width + flex:0 0 auto keep it behaving in both
 * block and flex (column) parents.
 */
.cws-header-spacer {
    width: 100%;
    flex: 0 0 auto;
    pointer-events: none;
}