/* GENCORE IT - Mobile Responsive Fixes */

/* Prevent horizontal scroll on all screens */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* =====================
   SMALL MOBILE (< 480px)
   ===================== */
@media (max-width: 479px) {

  /* Fix fixed-width elements that overflow */
  [class*="w-[420px]"],
  [class*="w-[400px]"],
  [class*="w-[380px]"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Min-width overrides for very small screens */
  [class*="min-w-[50%]"] {
    min-width: 100% !important;
  }

  /* Hero section */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Typography scaling */
  h1, .text-5xl, .text-6xl {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }

  h2, .text-4xl {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  h3, .text-3xl {
    font-size: 1.375rem !important;
  }

  h4, .text-2xl {
    font-size: 1.125rem !important;
  }

  /* Buttons - touch friendly minimum size */
  button, a[class*="rounded-full"], a[class*="cta-button"], .cta-button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Padding adjustments for sections */
  section, [class*="py-20"], [class*="py-16"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Stats / counters */
  [class*="grid-cols-4"],
  [class*="lg:grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Blog cards, industry cards */
  [class*="grid-cols-3"],
  [class*="lg:grid-cols-3"] {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* Two-col grids that should stack */
  [class*="grid-cols-2"] {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* Images */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Card padding */
  [class*="p-8"] {
    padding: 1.25rem !important;
  }

  [class*="p-6"] {
    padding: 1rem !important;
  }

  /* Contact form full width */
  [class*="lg:w-1/2"],
  [class*="lg:flex-1"] {
    width: 100% !important;
    flex: none !important;
  }
}

/* =====================
   TABLET (480px - 767px)
   ===================== */
@media (min-width: 480px) and (max-width: 767px) {

  html, body {
    overflow-x: hidden;
  }

  [class*="w-[420px]"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  h1, .text-5xl, .text-6xl {
    font-size: 2.5rem !important;
    line-height: 1.15 !important;
  }

  h2, .text-4xl {
    font-size: 2rem !important;
  }

  /* Stats row: 2 per row on tablet */
  [class*="lg:grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Blog / cards: 2 per row on tablet */
  [class*="lg:grid-cols-3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  section, [class*="py-20"] {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}

/* =====================
   NAVIGATION MOBILE
   ===================== */
@media (max-width: 767px) {

  /* Ensure mobile hamburger is visible */
  .md\:hidden {
    display: flex !important;
  }

  /* Ensure desktop nav is hidden */
  .hidden.md\:flex,
  .hidden.md\:block {
    display: none !important;
  }

  /* Mobile menu overlay full width */
  [class*="fixed"][class*="top-0"][class*="left-0"][class*="right-0"] nav {
    width: 100%;
  }

  /* Prevent body scroll when menu open */
  body.menu-open {
    overflow: hidden;
  }
}

/* =====================
   FORMS - MOBILE
   ===================== */
@media (max-width: 767px) {

  input, textarea, select {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
    width: 100% !important;
    max-width: 100% !important;
  }

  form {
    width: 100%;
  }

  /* Submit buttons full width on mobile */
  form button[type="submit"],
  form [class*="w-full"] {
    width: 100% !important;
  }
}

/* =====================
   FOOTER - MOBILE
   ===================== */
@media (max-width: 767px) {

  footer [class*="grid-cols-4"],
  footer [class*="grid-cols-3"],
  footer [class*="grid-cols-2"] {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  footer [class*="md:grid-cols-2"] {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  footer [class*="flex-row"] {
    flex-direction: column !important;
    text-align: center;
  }

  footer [class*="space-x-"] {
    gap: 1rem;
  }
}

/* =====================
   TESTIMONIALS - MOBILE
   ===================== */
@media (max-width: 767px) {
  [class*="testimonial"],
  [class*="Testimonial"] {
    padding: 1rem !important;
  }
}

/* =====================
   HERO SLIDER - MOBILE
   ===================== */
@media (max-width: 767px) {
  [class*="slide"],
  [class*="slider"],
  [class*="carousel"] {
    width: 100% !important;
    max-width: 100%;
    overflow: hidden;
  }
}

/* =====================
   TOUCH IMPROVEMENTS
   ===================== */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets */
  a, button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Remove hover effects that don't work on touch */
  *:hover {
    transition: none;
  }

  a:hover, button:hover {
    transition: background-color 0.2s ease, color 0.2s ease;
  }
}
