/* ========================================
   STICKY NAVIGATION MENU
   Desktop & Tablet Only (768px and up)
   Mobile keeps slide-out menu
   ======================================== */

/* TABLET AND DESKTOP: Make menu sticky */
@media only screen and (min-width: 768px) {
    .wsmenucontainer {
        position: sticky !important;
        top: 0 !important;
        z-index: 9999;
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: box-shadow 0.3s ease;
    }
    
    /* Ensure header stays with the container */
    .header {
        background-color: #fff;
    }
    
    /* Enhanced shadow when scrolled */
    .wsmenucontainer.scrolled {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
}

/* MOBILE: Keep default behavior (slide-out menu) */
@media only screen and (max-width: 767px) {
    .wsmenucontainer {
        /* Mobile keeps its existing absolute positioning */
        /* No sticky behavior on mobile */
    }
}

/* ========================================
   OPTIONAL: JavaScript to add 'scrolled' class
   ======================================== */
/*
Add this to your JavaScript file or in a <script> tag:

window.addEventListener('scroll', function() {
    const menu = document.querySelector('.wsmenucontainer');
    if (window.scrollY > 50) {
        menu.classList.add('scrolled');
    } else {
        menu.classList.remove('scrolled');
    }
});
*/