/* ==========================================
   MOBILE MENU - CLOSED BY DEFAULT
   ========================================== */

@media (max-width: 768px) {

    .menu-toggle {
        display: flex;
        position: relative;
        z-index: 1002;
    }

    .menu-container {
        position: fixed !important;
        top: 0;
        right: 0;

        width: 320px;
        max-width: 85vw;
        height: 100dvh;

        background: #ffffff !important;

        padding: 75px 24px 30px;

        overflow-y: auto;
        overflow-x: hidden;

        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);

        /* CLOSED */
        transform: translateX(100%);
        visibility: hidden;
        opacity: 0;

        pointer-events: none;

        transition:
            transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
            opacity 0.25s ease,
            visibility 0.35s ease;

        z-index: 1000;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
    }

    /* OPEN */
    .menu-container.is-open {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    /* Hamburger */
    .menu-toggle.is-active {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1003;
    }

    /* Hamburger animation */
    .menu-toggle.is-active .hamburger-bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.is-active .hamburger-bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.is-active .hamburger-bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Prevent page scrolling while menu is open */
    body.mobile-menu-active {
        overflow: hidden;
    }

}