/* ========================================
   MOBILE HEADER FORCE VISIBLE - ULTIMATE OVERRIDE
   This file has the HIGHEST priority to ensure mobile header is visible
   Loads AFTER all other CSS files
   ======================================== */

@media (max-width: 767px) {
  /* ULTIMATE OVERRIDE: Hide old header completely on mobile */
  header.header:not(.mobile-header),
  .header:not(.mobile-header),
  .header.header:not(.mobile-header),
  header[class*="header"]:not(.mobile-header),
  .header-surface:not(.mobile-header),
  .header-main:not(.mobile-header),
  .header-container:not(.mobile-header),
  .header-content:not(.mobile-header) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* ULTIMATE OVERRIDE: Force mobile header to be visible */
  .mobile-header-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 99999 !important;
    height: auto !important;
    width: 100% !important;
  }

  .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: 99999 !important;
    pointer-events: auto !important;
    height: auto !important;
    min-height: 60px !important;
  }

  .mobile-header-content {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-header-logo {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-hamburger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-menu-overlay {
    display: block !important;
    visibility: visible !important;
    z-index: 99998 !important;
  }
}