/*
=====================================================
STICKY HEADER SETUP (single-container version)
=====================================================

In Elementor:

Your normal header container:
   CSS Classes: main-original-header

No second/duplicate container needed. On scroll, the
JS detaches this same header into position: fixed and
slides it down once it has fully scrolled out of view;
a JS-inserted placeholder holds its original spot so
the page content doesn't jump.
=====================================================
*/

.header-fixed-placeholder {
    display: none;
}

.main-original-header.js-detached-header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100% !important;
    z-index: 999999 !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-110%);
    transition:
        transform 0.45s cubic-bezier(0.4, 0, 1, 1),
        opacity 0.4s ease-in,
        visibility 0.45s;

    will-change: transform, opacity;
}

.main-original-header.js-detached-header.show-sticky-header {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.45s ease-out,
        visibility 0s;
}

/*
Fades the header back in the instant it returns to normal flow after
being detached, so reattachment reads as a smooth handoff instead of
an abrupt pop back to full visibility.
*/
.main-original-header.js-fade-in {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.main-original-header.js-fade-in.js-fade-in-visible {
    opacity: 1;
}

/* WordPress admin bar support */
body.admin-bar .main-original-header.js-detached-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .main-original-header.js-detached-header {
        top: 46px !important;
    }
}

/*
Optional visual effect.
Remove this section if you don't want shadow.
*/
.main-original-header.js-detached-header.show-sticky-header {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

/*
Prevent Elementor containers from accidentally hiding the fixed header.
*/
.elementor-location-header {
    position: relative;
    z-index: 9999;
}