/**
 * Sticky Header Styles
 * Makes the site header stick to the top of the viewport on scroll
 */

/* Main sticky header implementation */
.header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1030; /* Bootstrap's z-index for sticky elements */
    background-color: #fff;
    transition: box-shadow 0.3s ease;

    /* Ensure the header is always on top */
    will-change: transform;
}

/* Add subtle shadow when scrolled */
.header-wrapper.is-scrolled,
.site-header.is-stuck {
    box-shadow: 0 2px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}

/* Ensure header background is solid */
.site-header {
    background-color: #fff;
    position: relative;
}

/* Adjust body padding to account for fixed header height */
body {
    scroll-padding-top: 80px; /* Adjust based on your header height */
}

/* Smooth scroll behavior for anchor links */
html {
    scroll-behavior: smooth;
}

/* Prevent content jump on page load */
.header-wrapper {
    min-height: 60px; /* Set to your header's height */
}

/* Mobile adjustments */
@media (max-width: 991px) {
    body {
        scroll-padding-top: 60px; /* Smaller header on mobile */
    }

    .header-wrapper {
        min-height: 56px;
    }
}

/* Minimal header mode (checkout/cart) should also be sticky */
.site-header.header-minimal {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Fix for any absolutely positioned elements that might break sticky */
.header-wrapper > * {
    position: relative;
}

/* Ensure mobile menu doesn't interfere with sticky header */
.offcanvas {
    z-index: 1045; /* Higher than sticky header */
}

/* Animation for sticky state transition */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Optional: Add animation when header becomes sticky */
.header-wrapper.animate-sticky {
    animation: slideDown 0.3s ease-out;
}

/* Fix for any dropdown menus in sticky header */
.header-wrapper .dropdown-menu {
    position: absolute;
    z-index: 1035;
}

/* Ensure search overlay works with sticky header */
.mobile-search-overlay {
    position: fixed;
    top: 0;
    z-index: 1040; /* Above sticky header */
}

/* Bottom navigation should not interfere */
#bottom-nav {
    position: relative;
    z-index: 1020; /* Below sticky header */
}

/* Admin bar compatibility for logged-in users */
body.admin-bar .header-wrapper {
    top: 32px; /* WP admin bar height on desktop */
}

@media (max-width: 782px) {
    body.admin-bar .header-wrapper {
        top: 46px; /* WP admin bar height on mobile */
    }
}

/* Performance optimization */
.header-wrapper {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}