/* ─────────────────────────────────────────────────────────────
   Aquaspan — Responsive Overrides
   Works alongside Tailwind CDN. Uses attribute selectors to
   target the exact utility classes used across every page.
───────────────────────────────────────────────────────────── */

/* ── Tablet  ≤ 1023px ──────────────────────────────────────── */
@media (max-width: 1023px) {

  /* Section / nav / footer horizontal padding */
  [class~="px-12"] {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* Section vertical padding */
  [class~="py-24"] { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  [class~="py-20"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  [class~="pt-16"] { padding-top: 3rem !important; }
  [class~="pb-20"] { padding-bottom: 3rem !important; }
  [class~="pb-24"] { padding-bottom: 4rem !important; }
  [class~="pt-16"][class~="pb-8"] { padding-top: 2.5rem !important; }

  /* Footer 4-col → 2-col */
  .grid[class*="1.5fr_1fr_1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }

  /* 5-col timeline → 3-col */
  .grid-cols-5 { grid-template-columns: repeat(3, 1fr) !important; }

  /* 4-col grids → 2-col */
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ── Mobile  ≤ 767px ───────────────────────────────────────── */
@media (max-width: 767px) {

  /* Page wrapper — tighter margin, smaller radius */
  [class~="mx-8"][class~="my-8"] {
    margin: 0.375rem !important;
    border-radius: 1.25rem !important;
  }

  /* Horizontal padding */
  [class~="px-12"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Hero headings */
  [class*="text-[5rem]"]  { font-size: 2.4rem  !important; line-height: 1     !important; }
  [class*="text-[4rem]"]  { font-size: 2.1rem  !important; line-height: 1     !important; }
  [class*="text-[3.5rem]"]{ font-size: 1.9rem  !important; line-height: 1.05  !important; }
  [class*="text-[3rem]"]  { font-size: 1.75rem !important; line-height: 1.05  !important; }
  [class*="text-[2.8rem]"]{ font-size: 1.6rem  !important; line-height: 1.1   !important; }
  [class*="text-[2.4rem]"]{ font-size: 1.5rem  !important; }
  [class*="text-[2rem]"]  { font-size: 1.35rem !important; }

  /* All grid layouts → single column */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5 {
    grid-template-columns: 1fr !important;
  }

  /* Arbitrary grids (hero split, services, contact, FAQ sidebar) */
  .grid[class*="grid-cols-[2"]  { grid-template-columns: 1fr !important; }
  .grid[class*="grid-cols-[3fr"]{ grid-template-columns: 1fr !important; }
  .grid[class*="grid-cols-[55%"]{ grid-template-columns: 1fr !important; }
  .grid[class*="grid-cols-[60%"]{ grid-template-columns: 1fr !important; }
  .grid[class*="grid-cols-[280"]{ grid-template-columns: 1fr !important; }
  .grid[class*="grid-cols-[240"]{ grid-template-columns: 1fr !important; }
  .grid[class*="1.5fr_1fr_1fr"] { grid-template-columns: 1fr !important; }

  /* Hero grid: right column order (stats/image) goes below */
  .grid[class*="grid-cols-[55%"] > :last-child,
  .grid[class*="grid-cols-[2"]   > :last-child { order: 2; }

  /* Services detail — stack thumbnails */
  .grid-cols-3[class*="gap-3"] { grid-template-columns: repeat(3, 1fr) !important; }

  /* Gap reductions */
  [class~="gap-14"] { gap: 2rem !important; }
  [class~="gap-12"] { gap: 1.5rem !important; }
  [class~="gap-16"] { gap: 2rem !important; }

  /* Vertical section padding */
  [class~="py-24"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  [class~="py-20"] { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  [class~="pt-16"] { padding-top: 2rem !important; }
  [class~="pb-20"] { padding-bottom: 2.5rem !important; }
  [class~="pb-24"] { padding-bottom: 3rem !important; }

  /* Mobile menu overlay nav text */
  #mobile-menu nav a { font-size: 2.5rem !important; }

  /* FAQ sidebar → horizontal scrolling pill list */
  .sticky[class~="h-fit"] ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  .sticky[class~="h-fit"] ul a {
    background: #f3f4f6 !important;
    border-radius: 99px !important;
    padding: 0.35rem 0.9rem !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
  }
  .sticky[class~="h-fit"] {
    position: static !important;
    margin-bottom: 1.5rem !important;
  }

  /* Forms — single column grid */
  .grid.grid-cols-2[class*="gap-5"] {
    grid-template-columns: 1fr !important;
  }

  /* Quote form radio/checkbox grid → 2-col */
  .grid.grid-cols-3[class*="gap-4"],
  .grid.grid-cols-3[class*="gap-3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Ticker / services bar */
  [class*="animate-marquee"] { animation-duration: 20s !important; }

  /* Hero image heights — reduce on mobile */
  [class*="h-[520px]"] { height: 280px !important; }
  [class*="h-[500px]"] { height: 260px !important; }
  [class*="h-[480px]"] { height: 240px !important; }
  [class*="h-[340px]"] { height: 220px !important; }

  /* CTA button groups — stack */
  .flex[class*="items-center"][class*="gap-4"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .flex[class*="items-center"][class*="gap-4"] a {
    text-align: center !important;
  }
}


/* ── Small mobile  ≤ 479px ─────────────────────────────────── */
@media (max-width: 479px) {
  [class*="text-[5rem]"]  { font-size: 2rem   !important; }
  [class*="text-[3.5rem]"]{ font-size: 1.6rem !important; }
  [class*="text-[3rem]"]  { font-size: 1.5rem !important; }
  [class*="text-[2.8rem]"]{ font-size: 1.4rem !important; }

  /* Quote form radio grid → single column */
  .grid.grid-cols-3[class*="gap-4"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer brand description hidden on tiny screens */
  [class~="max-w-[240px]"] { max-width: 100% !important; }
}