/* ============================================
   HEADER MOBILE - Mobile Header Component
   Organic Urban — Clean Mobile Header Styles
   ============================================
   
   This file handles mobile-specific header styles.
   Uses CSS custom properties and proper specificity.
   Minimal !important usage.
   ============================================ */

@media screen and (max-width: 768px) {
  
  /* ============================================
     HEADER CONTAINER
     ============================================ */
  
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height-mobile, 60px);
    z-index: var(--z-header, 10000);
    background: rgba(247, 245, 242, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Use isolation to create stacking context */
    isolation: isolate;
    /* Force GPU acceleration */
    transform: translateZ(0);
  }
  
  /* ============================================
     HEADER INNER LAYOUT
     ============================================ */
  
  .header-inner {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: var(--mobile-spacing-sm, 0.75rem);
    height: 100%;
    padding: 0 var(--mobile-padding-container, 1rem);
    position: relative;
    z-index: calc(var(--z-header, 10000) + 1);
  }
  
  /* Safe area support for header inner */
  @supports (padding: max(0px)) {
    .header-inner {
      padding-left: max(var(--mobile-padding-container, 1rem), env(safe-area-inset-left));
      padding-right: max(var(--mobile-padding-container, 1rem), env(safe-area-inset-right));
    }
  }
  
  /* ============================================
     HAMBURGER MENU BUTTON
     ============================================ */
  
  #menuToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--mobile-touch-target-min, 44px);
    height: var(--mobile-touch-target-min, 44px);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-dark);
    font-size: 1.4rem;
    position: relative;
    z-index: calc(var(--z-header, 10000) + 2);
    /* Touch optimization */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(122, 154, 122, 0.2);
  }
  
  #menuToggle:hover,
  #menuToggle:focus {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
  }
  
  #menuToggle:active {
    background: rgba(0, 0, 0, 0.1);
  }
  
  /* ============================================
     LOGO
     ============================================ */
  
  .logo {
    justify-self: center;
    position: relative;
    z-index: calc(var(--z-header, 10000) + 2);
    max-width: 200px;
    overflow: visible;
  }
  
  .logo img,
  .logo picture {
    position: relative;
    z-index: calc(var(--z-header, 10000) + 3);
    max-height: 36px;
    width: auto;
    display: block;
  }
  
  /* ============================================
     DESKTOP NAVIGATION (Hidden on Mobile)
     ============================================ */
  
  .nav {
    display: none;
  }
  
  /* ============================================
     HEADER ACTIONS (Search, Cart, etc.)
     ============================================ */
  
  .header-actions {
    display: flex;
    align-items: center;
    gap: var(--mobile-spacing-xs, 0.5rem);
    position: relative;
    z-index: calc(var(--z-header, 10000) + 2);
  }
  
  /* Safe area support for search overlay */
  @supports (padding: max(0px)) {
    .search-overlay {
      padding-top: max(50px, env(safe-area-inset-top));
    }
  }
  
  .header-actions a,
  .header-actions button {
    /* WCAG 2.1 compliant touch targets (44x44px minimum) */
    width: var(--mobile-touch-target-min, 44px);
    height: var(--mobile-touch-target-min, 44px);
    min-width: var(--mobile-touch-target-min, 44px);
    min-height: var(--mobile-touch-target-min, 44px);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: calc(var(--z-header, 10000) + 3);
    border-radius: 8px;
    /* Touch optimization */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(122, 154, 122, 0.2);
  }

  .header-actions a:active,
  .header-actions button:active {
    background: rgba(0, 0, 0, 0.05);
  }
  
  /* Hide text labels, show icons only */
  .header-actions a span:not(.cart-count),
  .header-actions button span:not(.cart-count) {
    display: none;
  }
  
  /* Hide sign-in link on mobile */
  .header-actions .nav-signin {
    display: none;
  }
  
  /* ============================================
     SEARCH OVERLAY (Mobile Tweaks)
     ============================================ */
  
  .search-overlay {
    padding-top: 50px;
  }
  
  .search-overlay-content {
    width: 95%;
    max-width: 100%;
    padding: var(--mobile-spacing-lg, 1.5rem);
  }
  
  .search-form {
    flex-direction: column;
    gap: var(--mobile-spacing-md, 1rem);
  }
  
  .search-submit {
    width: 100%;
    min-height: var(--mobile-button-height, 48px);
  }
  
}