/* Minimal Mobile Fix for NewinnoLearn */
/* Applied: July 5, 2025 - Minimal and targeted mobile fixes */

/* Only apply minimal mobile fixes without breaking the React app */
@media (max-width: 768px) {
  /* Prevent horizontal scrolling */
  body {
    overflow-x: hidden;
  }
  
  /* Ensure mobile menu button is visible */
  .md\:hidden {
    display: flex !important;
  }
  
  /* Hide desktop menu on mobile */
  .hidden.md\:flex {
    display: none !important;
  }
  
  /* Fix container padding on mobile */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Fix text sizes for mobile readability */
  .text-6xl {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
  
  .text-5xl {
    font-size: 2rem !important;
    line-height: 1.1 !important;
  }
  
  .text-4xl {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
  
  /* Fix excessive padding on mobile */
  .py-20 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  .py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Fix grid layouts to single column */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .md\:grid-cols-2,
  .md\:grid-cols-3,
  .md\:grid-cols-4,
  .lg\:grid-cols-3,
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  
  /* Fix button sizes */
  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Fix margins for mobile */
  .mb-16 {
    margin-bottom: 2rem !important;
  }
  
  .mb-12 {
    margin-bottom: 1.5rem !important;
  }
  
  .mt-16 {
    margin-top: 2rem !important;
  }
  
  .mt-12 {
    margin-top: 1.5rem !important;
  }
}

/* Small mobile screens */
@media (max-width: 640px) {
  .px-4 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  .text-3xl {
    font-size: 1.5rem !important;
  }
  
  .text-2xl {
    font-size: 1.25rem !important;
  }
}