/**
 * Essential Mobile CSS for Ephedra Outlet Header
 * 
 * File Location: wp-content/themes/eo-astra-child/assets/css/mobile-header.css
 * 
 * This file provides the essential CSS needed for mobile header functionality
 * without conflicting with existing styles
 * 
 * Version: 2.0.0 - Essential Working Version
 */

/*==============================================================================
  MOBILE HEADER ESSENTIAL STYLES
==============================================================================*/

/* Mobile breakpoint */
@media (max-width: 921px) {
  /* CRITICAL: Hide specific duplicate elements from Astra, but preserve main header */
  .ast-above-header,
  .ast-below-header,
  .site-header .ast-search-menu-icon,
  .site-header .ast-mobile-menu-buttons,
  .site-header .ast-button-wrap,
  .astra-search-icon,
  .ast-header-search,
  .ast-mobile-menu-toggle,
  .menu-item .ast-menu-toggle {
    display: none !important;
  }

  /* Hide any existing Astra dropdown toggles to prevent duplicates */
  .main-header-menu .ast-menu-toggle,
  .main-header-menu .dropdown-toggle:not(:last-child) {
    display: none !important;
  }

  /* CRITICAL: Ensure main header areas are visible */
  .main-header-bar-wrap,
  .main-header-bar,
  .site-header {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 999 !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
  }

  /* Ensure ast-container is visible */
  .main-header-bar .ast-container {
    display: block !important;
    visibility: visible !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Make sure announcement bar doesn't hide header */
  .announcement-bar {
    position: relative !important;
    z-index: 998 !important;
  }

  /* Debug: Ensure header has minimum height */
  .main-header-bar-wrap {
    min-height: 60px !important;
    overflow: visible !important;
  }

  /* CRITICAL: Ensure our mobile buttons are visible and clickable */
  .menu-toggle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 999 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    padding: 8px !important;
    width: 40px !important;
    height: 40px !important;
    order: 3 !important;
  }

  .search-btn-div {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer !important;
    padding: 8px !important;
    margin-right: 10px !important;
    order: 2 !important;
  }

  /* CRITICAL: Site branding order and visibility */
  .site-branding {
    order: 1 !important;
    flex-grow: 1 !important;
    display: block !important;
    visibility: visible !important;
  }

  /* Ensure logo/site title is visible */
  .site-branding .custom-logo,
  .site-branding .site-title,
  .site-branding .site-title-link {
    display: block !important;
    visibility: visible !important;
  }

  /* CRITICAL: Header actions order and visibility */
  .header_actions {
    order: 4 !important;
    display: flex !important;
    visibility: visible !important;
  }

  /* Ensure action items are visible */
  .header_actions .action-item {
    display: block !important;
    visibility: visible !important;
  }

  /* CRITICAL: Hide desktop-only elements on mobile */
  .header_contact .desktop-only,
  .header_contact,
  .header-custom-search:not(.active) {
    display: none !important;
  }

  /* Show action text only on larger screens */
  .header_actions .action-text {
    display: none !important;
  }

  /* CRITICAL: Reduce main container margins for more space */
  .ast-container,
  .ast-woocommerce-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Reduce body margins */
  body {
    margin: 0 !important;
  }

  /* Reduce site content margins */
  .ast-single-post .site-content > .ast-container,
  .woocommerce .site-content > .ast-container,
  .page .site-content > .ast-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* CRITICAL: Navigation visibility control */
  .main-navigation {
    display: none !important;
    width: 100% !important;
    order: 10 !important; /* Push to bottom */
  }

  .main-navigation.active {
    display: block !important;
    animation: slideDown 0.3s ease-out;
  }

  /* CRITICAL: Search bar visibility control */
  .header-custom-search {
    display: none !important;
    width: 100% !important;
    margin-top: 15px !important;
    order: 9 !important; /* Before navigation */
  }

  .header-custom-search.active {
    display: block !important;
  }

  /* CRITICAL: Hamburger icon styling */
  .menu-toggle-icon,
  .menu-toggle-icon:before,
  .menu-toggle-icon:after {
    background-color: var(--primary-color, #d7040f);
    content: "";
    display: block;
    height: 3px;
    position: absolute;
    transition: all 0.3s ease;
    width: 24px;
    border-radius: 2px;
    left: 50%;
    transform: translateX(-50%);
  }

  .menu-toggle-icon {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .menu-toggle-icon:before {
    top: -8px;
  }

  .menu-toggle-icon:after {
    bottom: -8px;
  }

  /* Hamburger animation */
  .menu-toggle.toggled .menu-toggle-icon {
    background-color: transparent;
  }

  .menu-toggle.toggled .menu-toggle-icon:before {
    transform: translateX(-50%) rotate(45deg);
    top: 0;
  }

  .menu-toggle.toggled .menu-toggle-icon:after {
    transform: translateX(-50%) rotate(-45deg);
    bottom: 0;
  }

  /* CRITICAL: Mobile menu layout and visibility */
  .main-header-container {
    flex-wrap: wrap !important;
    align-items: center !important;
    position: relative !important;
    display: flex !important;
    visibility: visible !important;
    width: 100% !important;
    min-height: 60px !important;
  }

  /* Mobile menu items */
  .main-header-menu {
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: #fff !important;
    border-top: 1px solid #eee !important;
  }

  .main-header-menu li {
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid #eee !important;
    position: relative !important;
  }

  .main-header-menu li:last-child {
    border-bottom: none !important;
  }

  .main-header-menu li a {
    display: block !important;
    padding: 15px 20px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    border-left: 4px solid transparent !important;
    transition: all 0.3s ease !important;
  }

  .main-header-menu li a:hover {
    background-color: rgba(215, 4, 15, 0.05) !important;
    border-left-color: var(--primary-color, #d7040f) !important;
    color: var(--primary-color, #d7040f) !important;
  }

  /* CRITICAL: Dropdown indicators */
  .dropdown-toggle {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: var(--primary-color, #d7040f) !important;
    border-radius: 4px !important;
    transition: background-color 0.3s ease !important;
  }

  .dropdown-toggle:hover {
    background-color: rgba(215, 4, 15, 0.1) !important;
  }

  /* CRITICAL: Submenu styling */
  .main-header-menu .sub-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: rgba(215, 4, 15, 0.02) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease-in-out !important;
  }

  .main-header-menu .sub-menu.active {
    max-height: 1000px !important;
  }

  .main-header-menu .sub-menu li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  }

  .main-header-menu .sub-menu li a {
    padding: 12px 20px 12px 40px !important;
    font-size: 14px !important;
    color: #555 !important;
    border-left: none !important;
  }

  .main-header-menu .sub-menu li a:hover {
    background-color: rgba(215, 4, 15, 0.08) !important;
    color: var(--primary-color, #d7040f) !important;
  }

  /* CRITICAL: Body scroll lock */
  body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Search field mobile styling */
  .header-custom-search .search-field,
  .header-custom-search input[type="search"] {
    width: 100% !important;
    padding: 12px 15px !important;
    font-size: 16px !important; /* Prevent zoom on iOS */
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
  }

  /* Fix for potential widget conflicts */
  .header-custom-search .widget {
    margin: 0 !important;
  }

  .header-custom-search form {
    margin: 0 !important;
  }
}

/*==============================================================================
  DESKTOP OVERRIDES
==============================================================================*/

/* Desktop - ensure mobile elements are hidden */
@media (min-width: 922px) {
  .menu-toggle,
  .search-btn-div {
    display: none !important;
  }

  .main-navigation {
    display: block !important;
  }

  .header-custom-search {
    display: block !important;
  }

  /* Reset any mobile-specific classes */
  body.mobile-menu-open {
    overflow: auto !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
  }
}

/*==============================================================================
  ANIMATIONS
==============================================================================*/

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*==============================================================================
  ACCESSIBILITY
==============================================================================*/

/* Focus indicators */
.menu-toggle:focus,
.search-btn-div:focus,
.dropdown-toggle:focus {
  outline: 2px solid var(--primary-color, #d7040f) !important;
  outline-offset: 2px !important;
}

/* High contrast support */
@media (prefers-contrast: high) {
  .menu-toggle,
  .search-btn-div,
  .dropdown-toggle {
    border: 2px solid !important;
  }

  .main-header-menu li {
    border-color: #000 !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .menu-toggle-icon,
  .menu-toggle-icon:before,
  .menu-toggle-icon:after,
  .main-navigation,
  .dropdown-toggle,
  .main-header-menu .sub-menu {
    transition: none !important;
    animation: none !important;
  }
}

/*==============================================================================
  DEBUGGING STYLES (Comment out in production)
==============================================================================*/

/*
.eo-nav-ready .menu-toggle {
    border: 2px solid green !important;
}

.eo-nav-ready .search-btn-div {
    border: 2px solid blue !important;
}

.main-navigation.active {
    border: 2px solid red !important;
}
*/