/**
 * Mobile Menu and Header Fix
 * Fixes mobile menu visibility and header text cutoff issues
 */

/* Mobile menu is now using display: none/block instead of transform */

/* Fix header spacing on mobile */
@media (max-width: 768px) {
  /* Reduce fixed header height on mobile */
  header.fixed {
    height: auto !important;
  }
  
  /* Add top padding to main content for fixed header */
  main {
    padding-top: 3.5rem !important; /* Reduced height for mobile header */
    margin-top: 0 !important;
  }
  
  /* Fix hero section spacing - remove negative margins */
  .home-hero-section {
    margin-top: 0 !important;
    padding-top: 1.5rem !important; /* Add proper padding instead */
  }
  
  /* Remove negative margin on text content */
  .home-hero-section .-mt-6,
  .home-hero-section .md\:-mt-8 {
    margin-top: 0 !important;
  }
  
  /* Ensure hero heading is visible */
  .home-hero-section h1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Container adjustments */
  .home-hero-section .container {
    padding-top: 0 !important;
  }
  
  /* Ensure mobile menu button works */
  #mobile-menu-toggle {
    position: relative !important;
    z-index: 10 !important;
  }
}

/* Very small screens (phones in portrait) */
@media (max-width: 480px) {
  /* Even smaller header on very small screens */
  .h-16 {
    height: 3rem !important;
  }
  
  /* Adjust hero text size for readability */
  .home-hero-section h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  .home-hero-section p {
    font-size: 1rem !important;
  }
}

/* Ensure proper z-index hierarchy */
#mobile-menu-overlay {
  z-index: 40 !important;
}

#mobile-menu-drawer {
  z-index: 50 !important;
}

header.fixed {
  z-index: 30 !important;
}