/* ========================================
   MOBILE HEADER OVERRIDE - Ensures MobileHeader component is visible
   This file ensures the new MobileHeader component is not hidden by existing CSS
   ======================================== */

@media (max-width: 767px) {
  /* Only prevent scroll when menu is actually open - use class-based approach */
  /* The component handles scroll lock via JavaScript, CSS only supports it */
  html.mobile-menu-open,
  body.mobile-menu-open {
    position: fixed !important;
    width: 100% !important;
    overflow: hidden !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: none !important;
  }

  /* Ensure normal scrolling when menu is NOT open */
  html:not(.mobile-menu-open),
  body:not(.mobile-menu-open) {
    position: static !important;
    overflow: visible !important;
    touch-action: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Ensure menu overlay can scroll independently */
  .mobile-menu-overlay {
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Prevent pull-to-refresh on mobile when menu is open */
  html.mobile-menu-open {
    overscroll-behavior-y: none !important;
  }
  /* CRITICAL: Hide the old NextHeader on mobile to prevent conflicts */
  header.header:not(.mobile-header),
  .header:not(.mobile-header),
  .header.header:not(.mobile-header),
  header[class*="header"]:not(.mobile-header) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  /* CRITICAL: Ensure mobile-header-wrapper is visible on mobile */
  .mobile-header-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10005 !important;
  }

  /* Ensure mobile header itself is visible */
  .mobile-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10005 !important;
    pointer-events: auto !important;
  }

  /* Ensure mobile header content is visible */
  .mobile-header-content {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Ensure hamburger button is visible */
  .mobile-hamburger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Ensure logo is visible */
  .mobile-header-logo {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Ensure menu overlay can be visible when open */
  .mobile-menu-overlay {
    display: block !important;
    visibility: visible !important;
  }

  .mobile-menu-overlay.open {
    transform: translateX(0) !important;
  }
}

/* Hide mobile header on desktop/tablet */
@media (min-width: 768px) {
  .mobile-header-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}