/**
 * MOBILE MENU FIX - CRITICAL OVERRIDE
 * Đảm bảo mobile menu HOÀN TOÀN ẨN cho đến khi click vào hamburger button
 *
 * Vấn đề: Menu hiện ra che cả website trên mobile
 * Giải pháp: 3 lớp bảo vệ với !important
 */

/* ========================================
   LAYER 1: BASE STATE - HIDDEN
   ======================================== */

.mobile-menu {
    /* Positioning */
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;

    /* Hide off-screen by default */
    transform: translateX(100%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    /* Z-index */
    z-index: 55 !important;
}

.mobile-menu-overlay {
    /* Positioning */
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    /* Hide by default */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    /* Z-index */
    z-index: 50 !important;
}

/* ========================================
   LAYER 2: ACTIVE STATE - VISIBLE
   ======================================== */

.mobile-menu.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.mobile-menu-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ========================================
   LAYER 3: MEDIA QUERY PROTECTION
   ======================================== */

/* Mobile: Ensure menu is hidden until activated */
@media (max-width: 1023px) {
    /* Default state: HIDDEN */
    .mobile-menu:not(.active) {
        transform: translateX(100%) !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .mobile-menu-overlay:not(.active) {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Active state: VISIBLE */
    .mobile-menu.active {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .mobile-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Desktop: Completely hide */
@media (min-width: 1024px) {
    .mobile-menu,
    .mobile-menu-overlay,
    .mobile-menu-button {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ========================================
   LAYER 4: TRANSITION OVERRIDE
   ======================================== */

.mobile-menu,
.mobile-menu-overlay {
    /* Smooth transitions only for transform/opacity */
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s !important;
}

.mobile-menu.active,
.mobile-menu-overlay.active {
    /* Immediate visibility when active, smooth transform/opacity */
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s !important;
}

/* ========================================
   DEBUG: Console verification
   ======================================== */

/*
To verify in browser console:
1. Check transform:
   getComputedStyle(document.querySelector('.mobile-menu')).transform
   Expected: "matrix(1, 0, 0, 1, [screenWidth], 0)" (translateX(100%))

2. Check visibility:
   getComputedStyle(document.querySelector('.mobile-menu')).visibility
   Expected: "hidden"

3. Check opacity:
   getComputedStyle(document.querySelector('.mobile-menu-overlay')).opacity
   Expected: "0"

4. After clicking hamburger:
   - transform should be "matrix(1, 0, 0, 1, 0, 0)" (translateX(0))
   - visibility should be "visible"
   - overlay opacity should be "1"
*/