/**
 * ========================================
 * HEADER MOBILE FIX - Critical Patches
 * ========================================
 * Fixes cho mobile menu không click được
 */

/* ===== MOBILE ONLY ===== */
@media (max-width: 768px) {

  /* Fix 1: Force ensure mobile toggle is clickable */
  .mobile-menu-toggle {
    position: relative !important;
    z-index: 10002 !important;
    display: flex !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(1, 158, 178, 0.3);
    cursor: pointer !important;
  }

  /* Fix 2: Ensure hamburger is always visible and clickable */
  .hamburger,
  .hamburger::before,
  .hamburger::after {
    pointer-events: none !important; /* Let clicks pass through to button */
  }

  /* Fix 3: Fix mobile menu z-index and positioning */
  .header-nav {
    position: fixed !important;
    z-index: 10001 !important;
    pointer-events: auto !important;
    touch-action: pan-y !important;
  }

  /* Fix 4: Ensure menu items are clickable */
  .menu-item {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
  }

  .menu-item a {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(1, 158, 178, 0.2);
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  /* Fix 5: Mobile CTA button */
  .header-nav .cta-button {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(1, 158, 178, 0.3);
  }

  /* Fix 6: Fix overlay z-index - MUST BE BELOW MENU */
  .mobile-menu-overlay {
    position: fixed !important;
    z-index: 9998 !important; /* LOWER than menu (10001) */
    pointer-events: auto !important;
    touch-action: none !important;
  }

  .mobile-menu-overlay.active {
    pointer-events: auto !important;
    display: block !important;
  }

  .mobile-menu-overlay:not(.active) {
    display: none !important;
    pointer-events: none !important;
  }

  /* Fix 7: Ensure header doesn't block clicks */
  .montor-header {
    pointer-events: auto !important;
  }

  /* Fix 8: Ensure header container allows clicks */
  .header-container {
    pointer-events: auto !important;
  }

  /* Fix 9: Hide desktop elements properly without affecting z-index */
  .header-cta-desktop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Fix 10: Force menu to be above everything when open */
  .header-nav.active {
    z-index: 10001 !important;
    pointer-events: auto !important;
  }

  .mobile-menu-toggle.active {
    z-index: 10002 !important;
  }

  /* CRITICAL: Ensure menu content is above overlay */
  .header-nav.active .menu-list {
    position: relative !important;
    z-index: 10002 !important;
    pointer-events: auto !important;
  }

  .header-nav.active .menu-item {
    position: relative !important;
    z-index: 10003 !important;
    pointer-events: auto !important;
  }

  .header-nav.active .menu-item a {
    position: relative !important;
    z-index: 10004 !important;
    pointer-events: auto !important;
  }

  .header-nav.active .header-cta {
    position: relative !important;
    z-index: 10003 !important;
    pointer-events: auto !important;
  }

  /* Fix 11: Remove any conflicting transforms that might break touch */
  .menu-item a:active {
    transform: scale(0.98) !important;
  }

  /* Fix 12: Ensure links are full width and height for better touch target */
  .menu-item a {
    width: 100% !important;
    min-height: 48px !important; /* iOS recommended touch target */
    display: flex !important;
    align-items: center !important;
  }

  /* Fix 13: Fix for iOS Safari specific issues */
  .header-nav {
    -webkit-overflow-scrolling: touch !important;
  }

  /* Fix 14: Prevent double-tap zoom on buttons */
  .mobile-menu-toggle,
  .menu-item a,
  .cta-button {
    touch-action: manipulation !important;
  }

  /* Fix 15: Ensure header logo doesn't block menu toggle */
  .header-logo {
    pointer-events: auto !important;
  }

  .header-logo a {
    pointer-events: auto !important;
  }

  /* Fix 16: Fix for header position conflicts */
  .montor-header {
    position: fixed !important;
    z-index: 9999 !important;
  }

  /* Fix 17: Prevent body scrolling when menu is open */
  body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Fix 18: Ensure Bricks elements don't interfere */
  .brxe-section,
  .brxe-container,
  .brxe-block {
    z-index: auto !important;
  }

  /* Fix 19: Fix for potential backdrop-filter issues */
  .header-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Fix 20: Ensure menu list is clickable */
  .menu-list {
    pointer-events: auto !important;
  }

}

/* ===== EXTRA SMALL DEVICES ===== */
@media (max-width: 480px) {
  
  /* Increase touch targets for very small screens */
  .mobile-menu-toggle {
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .menu-item a {
    min-height: 52px !important;
    padding: 18px 20px !important;
  }

  .cta-button {
    min-height: 52px !important;
  }

}

/* ===== DEBUG MODE ===== */
.debug-header-mobile .mobile-menu-toggle {
  outline: 3px solid red !important;
}

.debug-header-mobile .header-nav {
  outline: 3px solid blue !important;
}

.debug-header-mobile .menu-item {
  outline: 2px solid green !important;
}

.debug-header-mobile .mobile-menu-overlay {
  background: rgba(255, 0, 0, 0.3) !important;
}

/* ===== ACCESSIBILITY ===== */
@media (max-width: 768px) {
  
  /* Focus states for accessibility */
  .mobile-menu-toggle:focus-visible {
    outline: 3px solid #019EB2 !important;
    outline-offset: 3px !important;
  }

  .menu-item a:focus-visible {
    outline: 2px solid #019EB2 !important;
    outline-offset: -2px !important;
  }

  /* Active states for better feedback */
  .mobile-menu-toggle:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease !important;
  }

}

/* ===== FALLBACK FOR OLD BROWSERS ===== */
@supports not (touch-action: manipulation) {
  @media (max-width: 768px) {
    .mobile-menu-toggle,
    .menu-item a,
    .cta-button {
      -ms-touch-action: manipulation;
    }
  }
}