/* Mobile Responsiveness Fixes for Wizard Wash */

/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove empty space above the purple banner */
#root > div,
#root > div:first-child,
#root > div.min-h-screen {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Fix: The Sonner toast notification section takes up space at the top - make it not affect layout */
#root > section[aria-label],
#root > section[aria-live] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
  z-index: 9999 !important;
  pointer-events: none;
}

/* Ensure the root container doesn't overflow */
#root {
  overflow-x: hidden;
  max-width: 100vw;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Remove any safe-area or status bar padding at the top */
html {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Mobile-specific fixes */
@media (max-width: 768px) {
  /* Fix the oversized logo on mobile */
  nav img {
    max-height: 68px !important;
    width: auto !important;
    max-width: 260px !important;
  }
  
  /* Keep the nav container at fixed height even when menu is open */
  nav > div:first-child {
    height: 76px !important;
    position: relative !important;
  }

  /* FIX: Phone icon and X button stay fixed at top of nav container */
  /* The phone icon uses absolute left-4 top-1/2 -translate-y-1/2 */
  /* The X/hamburger button uses absolute right-4 top-1/2 -translate-y-1/2 */
  /* These are inside the container div which has h-14, so top-1/2 = 28px */
  /* Our CSS override makes the container 76px, so top-1/2 = 38px */
  /* The issue is these elements are positioned relative to the nav, not the container */
  /* Force them to stay at the top */
  nav a[aria-label="Call Wizard Wash"] {
    position: absolute !important;
    top: 38px !important;
    transform: translateY(-50%) !important;
    left: 1rem !important;
    z-index: 60 !important;
  }
  
  nav > div:first-child > button:last-of-type,
  nav button[class*="md:hidden"][class*="absolute"][class*="right-4"] {
    position: absolute !important;
    top: 38px !important;
    transform: translateY(-50%) !important;
    right: 1rem !important;
    z-index: 60 !important;
  }

  /* CRITICAL FIX: Reduce the hero section height on mobile to close the gap */
  .hero-section {
    min-height: 60vh !important;
    align-items: flex-start !important;
    padding-top: 2rem !important;
  }
  
  /* Reduce hero container padding */
  .hero-section .container {
    padding-top: 1rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Fix the marquee/scrolling banner speed on mobile */
  .marquee-track {
    animation-duration: 15s;
  }
  
  /* Ensure all sections don't overflow */
  section {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  /* Reduce section padding on mobile */
  section:not(.hero-section) {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  /* Fix the comparison table on mobile - ensure it doesn't overflow */
  table {
    font-size: 0.8rem;
    table-layout: fixed;
    width: 100%;
  }
  
  table td, table th {
    padding: 0.5rem 0.4rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Fix footer grid on mobile - stack columns */
  footer .container > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  
  /* Fix the contact form name/phone grid on small screens */
  .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  
  /* Fix the contact section layout */
  #contact .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Fix the pricing cards to not overflow */
  .glow-card {
    max-width: 100%;
    overflow: hidden;
  }
  
  /* Fix any elements with fixed widths that might overflow */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Fix the CTA section buttons */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Fix nav elements */
  nav {
    overflow-x: hidden;
  }
}

@media (max-width: 480px) {
  /* Extra small mobile - even smaller hero */
  .hero-section {
    min-height: auto !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1rem !important;
  }
  
  .hero-section .container {
    padding-top: 0.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  /* Extra small mobile fixes */
  table {
    font-size: 0.7rem;
  }
  
  table td, table th {
    padding: 0.4rem 0.2rem;
  }
  
  /* Fix the stats row */
  .grid-cols-2 {
    gap: 0.5rem;
  }
  
  /* Ensure text doesn't overflow */
  h1, h2, h3, h4, h5, h6, p, span, a, button {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* Fix for the contact form grid specifically at md breakpoint */
@media (min-width: 768px) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}