/* ============================================================
   AZRC Mobile Responsive Stylesheet
   Applies to all screens ≤ 767px (below Tailwind's md breakpoint)
   ============================================================ */

/* ── 1. Global box model & overflow prevention ── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: clip; /* 'clip' (unlike 'hidden') does NOT create a new scroll container,
                       so position:sticky on the nav keeps working correctly */
  max-width: 100%;
  width: 100%;
}

/* Minimum tap target for footer links */
footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

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

/* ── 2. Mobile-only overrides ── */
@media (max-width: 767px) {

  /* ── Container padding: shrink from px-8 (2rem) to px-4 (1rem) ── */
  .max-w-screen-2xl,
  .max-w-screen-xl,
  .max-w-4xl,
  .max-w-3xl,
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
  }

  /* ── Section vertical spacing ── */
  .py-24 { padding-top: 3rem !important;   padding-bottom: 3rem !important; }
  .py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .py-16 { padding-top: 2rem !important;   padding-bottom: 2rem !important; }
  .pt-24 { padding-top: 3rem !important; }
  .pb-24 { padding-bottom: 3rem !important; }

  /* ── Hero top padding (nav clearance) ── */
  .pt-32 { padding-top: 5rem !important; }
  .pb-20 { padding-bottom: 2rem !important; }
  .md\:pt-48 { padding-top: 5rem; } /* prevent huge gap before md kicks in */

  /* ── Heading font sizes ── */
  .text-7xl,
  .md\:text-7xl { font-size: 2.25rem !important; line-height: 1.15 !important; }

  .text-6xl,
  .md\:text-6xl { font-size: 2rem !important; line-height: 1.15 !important; }

  .text-5xl { font-size: 2rem !important; line-height: 1.2 !important; }

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

  .text-3xl { font-size: 1.35rem !important; line-height: 1.3 !important; }

  .text-2xl { font-size: 1.15rem !important; }

  /* ── Card & block padding ── */
  .p-12 { padding: 1.5rem !important; }
  .p-10 { padding: 1.25rem !important; }
  .p-8  { padding: 1.25rem !important; }

  /* ── Gap / spacing reductions ── */
  .gap-12 { gap: 1.5rem !important; }
  .gap-16 { gap: 1.5rem !important; }
  .mb-16  { margin-bottom: 2rem !important; }
  .mb-12  { margin-bottom: 1.5rem !important; }

  /* ── Stat band (gap-10 / gap-16 in locations) ── */
  .gap-10 { gap: 1rem !important; }

  /* ── CTA buttons: stack vertically & go full-width ── */
  .flex-wrap > a,
  .flex-wrap > button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* ── Hero section image height cap ── */
  .h-\[500px\],
  .h-\[600px\],
  .h-\[620px\] {
    min-height: 260px !important;
    height: auto !important;
  }

  /* ── Prevent bento / stat cards from having huge fixed heights ── */
  .h-\[280px\] { height: 200px !important; }

  /* ── Reduce oversized stat numbers ── */
  .text-6xl.font-headline { font-size: 2.5rem !important; }

  /* ── Locations: stat band flex wrap ── */
  .flex.items-center.justify-center.gap-10 {
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
  }
  /* iOS 14.0 Safari didn't support gap on flex containers (added in 14.1).
     Fall back to margins for the small % of users still on older iOS. */
  @supports not (gap: 1rem) {
    .flex.items-center.justify-center.gap-10 > * + * {
      margin-top: 1.5rem;
    }
  }

  /* ── Contact / Services: two-column grids that lack md: prefix ── */
  .grid-cols-2 { grid-template-columns: 1fr !important; }

  /* ── Locations service network 3-col panel stacking ── */
  .lg\:grid-cols-3 { grid-template-columns: 1fr !important; }

  /* Remove right borders used as column dividers when stacked */
  .lg\:border-r { border-right: none !important; }

  /* ── Future Expansion cards ── */
  .sm\:grid-cols-2 { grid-template-columns: 1fr !important; }

  /* ── Providers grid (if any) ── */
  .md\:grid-cols-3 { grid-template-columns: 1fr !important; }
  .md\:grid-cols-4 { grid-template-columns: 1fr 1fr !important; }

  /* ── Max-width prose text areas ── */
  .max-w-lg,
  .max-w-2xl,
  .max-w-3xl {
    max-width: 100% !important;
  }

  /* ── Footer: stack columns ── */
  footer .flex-col.md\:flex-row,
  footer .md\:flex-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* ── Prevent negative margins from creating overflow ── */
  .-mr-32 { margin-right: 0 !important; }
  .-ml-32 { margin-left: 0 !important; }

  /* ── Overflow-hidden on hero images stays intact ── */
  section.overflow-hidden { overflow: hidden !important; }
}

/* ── 3. Small phone extra tweaks (≤ 390px) ── */
@media (max-width: 390px) {
  .text-5xl { font-size: 1.75rem !important; }
  .text-4xl { font-size: 1.5rem !important; }
  .text-3xl { font-size: 1.25rem !important; }

  .p-12, .p-10, .p-8 { padding: 1rem !important; }

  .px-8 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}