/* ==========================================================================
   Sticky header — body-class driven, overrides VamTam entirely via !important.

   JS (sticky-header.js) toggles body classes:
     .nav-scrolling-down  →  header hidden (slide off-screen)
     .nav-scrolling-up    →  header shown  (white pill)
     (neither)            →  at top of page (natural / transparent)

   VamTam's stickyHeader() JS may also run and toggle its own classes
   (--fixed-shown / --fixed-hidden) on the element. That's fine —
   our CSS uses body-class selectors + !important, so it always wins.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIX: Prevent VamTam's 1-second fade-in animation (opacity:0 → 1)
   that causes a flash of invisible content on page load.
   -------------------------------------------------------------------------- */
body:not(.elementor-editor-active) .vamtam-sticky-header > .elementor-container,
body:not(.elementor-editor-active) .vamtam-sticky-header > .e-con-inner {
    opacity: 1 !important;
    animation: none !important;
}

/* --------------------------------------------------------------------------
   DESKTOP HEADER (≥ 1025px)  —  targets .elementor-element-4f5f688
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {

    /* --- Base: always fixed at top, smooth transitions --- */
    body:not(.elementor-editor-active) .elementor-element-4f5f688:not(.vamtam-sticky-header--spacer) {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        transition: transform 0.3s ease,
                    background-color 0.3s ease,
                    box-shadow 0.3s ease,
                    border-radius 0.3s ease,
                    top 0.3s ease,
                    left 0.3s ease,
                    right 0.3s ease !important;
    }

    /* --- Scrolling DOWN: slide header off-screen (hide) ---
         Override VamTam's --fixed-shown if it's also set. */
    body.nav-scrolling-down .elementor-element-4f5f688:not(.vamtam-sticky-header--spacer),
    body.nav-scrolling-down .elementor-element-4f5f688.vamtam-sticky-header--fixed-shown:not(.vamtam-sticky-header--spacer),
    body.nav-scrolling-down .elementor-element-4f5f688.vamtam-sticky-header--fixed-hidden:not(.vamtam-sticky-header--spacer) {
        transform: translateY(-110%) !important;
    }

    /* --- Scrolling UP: slide header back in as white pill ---
         Override VamTam's --fixed-hidden if it's also set. */
    body.nav-scrolling-up .elementor-element-4f5f688:not(.vamtam-sticky-header--spacer),
    body.nav-scrolling-up .elementor-element-4f5f688.vamtam-sticky-header--fixed-shown:not(.vamtam-sticky-header--spacer),
    body.nav-scrolling-up .elementor-element-4f5f688.vamtam-sticky-header--fixed-hidden:not(.vamtam-sticky-header--spacer) {
        transform: translateY(0) !important;
        background-color: #FFFFFF !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10) !important;
        left: 20px !important;
        right: 20px !important;
        top: 20px !important;
        border-radius: 60px !important;
        overflow: visible !important;
    }

    /* --- Prevent dropdown clipping when pill is shown --- */
    body.nav-scrolling-up .elementor-element-4f5f688 .e-con-inner,
    body.nav-scrolling-up .elementor-element-4f5f688 .e-con,
    body.nav-scrolling-up .elementor-element-4f5f688 .elementor-widget-container,
    body.nav-scrolling-up .elementor-element-4f5f688 .e-n-menu {
        overflow: visible !important;
    }

    body.nav-scrolling-up .elementor-element-4f5f688 .e-n-menu-content,
    body.nav-scrolling-up .elementor-element-4f5f688 .elementor-nav-menu--dropdown {
        z-index: 99999 !important;
    }

    body.nav-scrolling-up .elementor-element-4f5f688 .e-n-menu-content,
    body.nav-scrolling-up .elementor-element-4f5f688 .elementor-nav-menu--dropdown.elementor-nav-menu__container {
        margin-top: 28px !important;
    }

    /* --- Compact nav items when pill is shown --- */
    body.nav-scrolling-up .elementor-element-4f5f688 .elementor-nav-menu--main .elementor-item {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* --- Smaller logo when pill is shown --- */
    body.nav-scrolling-up .elementor-element-4f5f688 .elementor-element-b30485c img {
        max-width: 110px !important;
        transition: max-width 0.3s ease;
    }

    /* --- Spacer: invisible placeholder that holds layout space ---
         VamTam's container.php creates this duplicate automatically. */
    body:not(.elementor-editor-active) .elementor-element-4f5f688.vamtam-sticky-header--spacer {
        position: static !important;
        transform: none !important;
        transition: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* --------------------------------------------------------------------------
   MOBILE / TABLET HEADER (≤ 1024px)  —  element: .elementor-element-0604a4a
   Pure CSS position:sticky — no JS needed, no hide-on-scroll.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    body:not(.elementor-editor-active) .elementor-element-0604a4a {
        position: sticky !important;
        top: 0 !important;
        z-index: 9999 !important;
        width: 100% !important;
        transform: none !important;
    }
}