/**
 * Header Sticky Extension - Styles
 *
 * Applies sticky behavior to the Header & Footer Builder's outer header
 * wrapper, so the whole header moves as one unit regardless of the Elementor
 * layout inside it.
 *
 * @package TT_Flux_Addon
 * @since 1.0.0
 */

.tt-flux-header-wrapper.tt-flux-header--sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    box-sizing: border-box;
}

body.admin-bar .tt-flux-header-wrapper.tt-flux-header--sticky {
    top: 32px;
}

.tt-flux-header-spacer {
    display: block;
    height: var(--tt-flux-header-height, 0px);
}

.tt-flux-header-wrapper.tt-flux-header--smart {
    transition: transform 0.28s ease;
    will-change: transform;
}

.tt-flux-header-wrapper.tt-flux-header--smart.tt-flux-header--hidden {
    transform: translateY(calc(-100% - var(--tt-flux-admin-bar-height, 0px)));
}

@media (max-width: 782px) {
    body.admin-bar .tt-flux-header-wrapper.tt-flux-header--sticky {
        top: 46px;
    }
}