/* ═══════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS FIXES
   Addresses issues flagged by on-page SEO audit:
   - Horizontal scroll from parallax ghost-text overflow
   - Touch target minimum sizing (44×44 px)
   - Toast notification overflow on narrow screens
   - Content spacing optimisation for small viewports
   ═══════════════════════════════════════════════════════ */

/* 1. Prevent horizontal scrollbar from animated/parallax elements */
html, body {
  overflow-x: hidden !important;
}

/* 2. Ghost-text parallax elements — clip within their section */
.ghost-text {
  overflow: hidden;
  max-width: 100vw;
}

/* ── Mobile-only rules (< 640px / Tailwind sm breakpoint) ── */
@media (max-width: 639px) {

  /* 3. Toast notification container — constrain to viewport */
  ol[class*="flex-col-revers"],
  [data-sonner-toaster] {
    max-width: 100vw !important;
    width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }

  /* 4. Minimum touch target sizes for interactive elements */
  nav a,
  footer a,
  button:not([class*="w-full"]) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* 5. Mobile hamburger menu items — ensure proper tap spacing */
  .fixed.inset-0 nav a {
    min-height: 48px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* 6. Footer link spacing — prevent links from being too close */
  footer ul li {
    margin-bottom: 0.25rem;
  }
  footer ul li a {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    min-height: 44px;
  }

  /* 7. Footer bottom row — stack vertically on mobile */
  footer .flex.flex-col.sm\:flex-row {
    gap: 1rem;
  }
  footer .flex.items-center.gap-6 {
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
  }

  /* 8. CTA section — reduce excessive vertical padding */
  section .py-32 { padding-top: 4rem; padding-bottom: 4rem; }

  /* 9. Service card grid — ensure full width on mobile */
  .grid.grid-cols-1 > div {
    width: 100%;
  }

  /* 10. Hero CTA buttons — stack vertically if they don't fit */
  .flex.flex-wrap.gap-3 {
    flex-direction: column;
    width: 100%;
  }
  .flex.flex-wrap.gap-3 > a {
    width: 100%;
  }
  .flex.flex-wrap.gap-3 > a > button {
    width: 100%;
    justify-content: center;
  }

  /* 11. Portal mockup section — scale down for small screens */
  .border.border-white\/10.shadow-2xl {
    transform: scale(0.92);
    transform-origin: top center;
  }

  /* 12. Stats bar — reduce text size for 2-col grid on narrow screens */
  .grid.grid-cols-2.md\:grid-cols-4 > div {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* 13. Section headings — prevent text from being too large */
  h2 {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* 14. Images — ensure they don't overflow container */
  img {
    max-width: 100%;
    height: auto;
  }

  /* 15. Ensure all containers respect mobile padding */
  .container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* 16. FAQ accordion — larger touch targets */
  section button[type="button"] {
    min-height: 56px;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  /* 17. Social icons in footer — minimum tap size */
  footer a[aria-label] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 18. Headline scale-down — Tailwind text-4xl/5xl bases are too large
        for narrow viewports; cap h1/h2/h3 so heroes stay readable */
  h1, h1[class*="text-"] {
    font-size: clamp(1.6rem, 7.5vw, 1.85rem) !important;
    line-height: 1.15 !important;
  }
  h2, h2[class*="text-"] {
    font-size: clamp(1.3rem, 6vw, 1.5rem) !important;
    line-height: 1.25 !important;
  }
  h3[class*="text-2xl"], h3[class*="text-3xl"] {
    font-size: 1.2rem !important;
    line-height: 1.35 !important;
  }

  /* 19. Oversized decorative/stat display text (Since 2008, 65+, etc.) */
  .grid.grid-cols-2.md\:grid-cols-4 div[class*="text-3xl"],
  .grid.grid-cols-2.md\:grid-cols-4 div[class*="text-4xl"] {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }
  div[class*="text-5xl"], span[class*="text-5xl"], p[class*="text-5xl"] {
    font-size: 1.9rem !important;
    line-height: 1.2 !important;
  }
  div[class*="text-6xl"], span[class*="text-6xl"], p[class*="text-6xl"] {
    font-size: 2.1rem !important;
    line-height: 1.2 !important;
  }
  div[class*="text-7xl"], span[class*="text-7xl"],
  div[class*="text-8xl"], span[class*="text-8xl"] {
    font-size: 2.3rem !important;
    line-height: 1.2 !important;
  }

  /* 20. Breathing room below CTA buttons — buttons were sitting flush
        against the content that follows them */
  a:has(> button) {
    margin-bottom: 0.75rem;
  }
  .flex.flex-wrap.gap-3 {
    gap: 0.875rem;
    margin-bottom: 0.5rem;
  }
  form button[type="submit"] {
    margin-bottom: 0.75rem;
  }

  /* 21. Portal mockup column — child grid forces it wider than the
        viewport (395px in a 340px column); clamp it */
  .lg\:w-3\/5 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .border.border-white\/10.shadow-2xl {
    max-width: 100% !important;
  }
}

/* ── Tablet adjustments (640px - 1023px) ── */
@media (min-width: 640px) and (max-width: 1023px) {

  /* Ensure nav items have adequate spacing */
  nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Toast container — constrain width */
  ol[class*="flex-col-revers"],
  [data-sonner-toaster] {
    max-width: 420px;
  }

  /* Headline cap — md: utilities jump to text-6xl/7xl (65px+) which
     overwhelms tablet portrait; keep heroes proportional */
  h1[class*="text-"] {
    font-size: clamp(2.2rem, 5.5vw, 2.8rem) !important;
    line-height: 1.15 !important;
  }
  h2[class*="text-"] {
    font-size: clamp(1.7rem, 4.5vw, 2.2rem) !important;
    line-height: 1.25 !important;
  }

  /* Space below CTA buttons */
  a:has(> button) {
    margin-bottom: 0.75rem;
  }
}

/* ── CTA button rows (all widths) ─────────────────────────── */
/* 24. Hero sections center content with zero bottom padding, so the
      button row sits flush against the next section. Give every
      button row clear space below it. */
.flex.flex-wrap.gap-3:has(button) {
  margin-bottom: 2.5rem;
}
section[class*="min-h-"] .max-w-4xl {
  padding-bottom: 1.5rem;
}

/* ── Stats bar (all widths) ───────────────────────────────── */
/* 22. Long stat values ("4 Core Services") wrap while their siblings
      don't, breaking the row's alignment. Balance any wrap so a
      two-line value splits evenly, and keep cells top-aligned. */
.grid.grid-cols-2.md\:grid-cols-4 > div > div[class*="text-3xl"] {
  text-wrap: balance;
}

/* 23. Desktop: fluid font keeps every stat value on a single line —
      36px fixed (text-4xl) overflows a 4-up column with longer values */
@media (min-width: 1024px) {
  .grid.grid-cols-2.md\:grid-cols-4 > div > div[class*="text-3xl"] {
    font-size: clamp(1.25rem, 2vw, 2.25rem) !important;
    white-space: nowrap;
  }
}