/* ═══════════════════════════════════════════════════════════════════════
   Mobile optimizations — shared across /index-test1, /solutions/*,
   /specialties/*, /for-groups, /for-groups/schedule.
   Loaded AFTER combined-webflow-styles.css so these rules win without
   needing !important in most cases (uses specificity + source order).

   Breakpoints match the rest of the project:
     - 991px  (tablet)
     - 767px  (tablet / small tablet)
     - 479px  (mobile)

   Concerns addressed (priority order):
   1. Touch target sizes (≥ 44×44px) for nav links, tab chips, CTAs, FAQ rows
   2. Mobile menu safe-area-inset-bottom for notched phones
   3. Input fonts ≥ 16px so iOS Safari doesn't auto-zoom on focus
   4. Horizontal overflow hardening (max-width: 100vw, word-wrap, min-width: 0)
   5. Tighter section padding at 479px (the 6rem stacks eat the viewport)
   6. Safe-area-inset-top for sticky navbar
   7. Fluid typography floors for body copy on very small screens
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. Root-level safety rails ───────────────────────────────────────── */
@media (max-width: 991px) {
  html, body {
    /* Hard guard against horizontal scroll caused by any accidental
       overflow on decorative elements (grain layers, sheens, tilt cards). */
    overflow-x: clip;
  }
  /* Long unbreakable strings (emails, URLs in paragraphs) shouldn't
     push layout on phones. */
  p, li, h1, h2, h3, h4, h5, h6, a, span {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* Respect iOS notch on sticky navbar, all pages. */
.section-navbar {
  padding-top: env(safe-area-inset-top, 0) !important;
}

/* ── 1. Navbar mobile — touch targets + safe area ─────────────────────── */
@media (max-width: 991px) {
  /* Logo — tighter so it doesn't steal screen real estate on 375px */
  .navbar2_logo-link {
    width: 6.25rem !important;
  }

  /* Hamburger — already ~58×58 but enforce */
  .navbar2_menu-button {
    min-width: 48px;
    min-height: 48px;
  }

  /* Every menu link is a tap target — ≥ 48px tall (Material) and
     left-aligned with generous side padding for easier thumb reach. */
  .navbar2_menu .navbar2_link {
    min-height: 52px;
    padding: 0.875rem 1.25rem !important;
    display: flex;
    align-items: center;
    font-size: 1.0625rem !important;
    line-height: 1.3;
  }

  /* Buttons inside the collapsed menu (Login / Sign Up) */
  .navbar2_menu .navbar2_link.lp-button {
    justify-content: center;
    margin: 0.5rem 1rem;
    min-height: 48px;
  }

  /* Mobile overlay menu — honor the home-indicator safe area so the
     last link (usually Sign Up) is reachable above the gesture bar. */
  .navbar2_menu.is-page-height-tablet,
  .navbar2_menu.w--open {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0)) !important;
    /* Let the menu scroll if content exceeds the viewport on small phones */
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 2. Navbar CTAs (Login / Sign Up) ─────────────────────────────────── */
@media (max-width: 991px) {
  .lp-button.is-navbar2-button {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── 3. Tab chips — specialty/solution filters, pricing toggle ────────── */
@media (max-width: 767px) {
  .tab4_tab-link,
  .tab-link-2 {
    min-height: 44px;
    padding: 0.65rem 1.1rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem !important; /* 15px — readable without triggering zoom via form inputs */
  }

  /* Tab container — allow horizontal scroll rather than cramming chips */
  .section-tabs .tab4_tabs-menu,
  .section-tabss .tab4_tabs-menu {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem !important;
  }
}

/* ── 4. FAQ rows — tap target ≥ 44px and no letter-spacing crunch ─────── */
@media (max-width: 767px) {
  .faq4_question,
  .faq11_question,
  .sol-faq4 .faq4_accordion summary {
    min-height: 56px;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .faq4_icon-wrappper,
  .faq11_icon-wrapper {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }
}

/* ── 5. Hero — tighten sub-headline floor, center spacing ─────────────── */
@media (max-width: 479px) {
  /* The hero h2 currently uses clamp() that can dip far below 16px on
     narrow viewports. Pin a sane floor. */
  .hero-h2-sub {
    font-size: 1.0625rem !important; /* 17px — comfortable read */
    line-height: 1.5 !important;
    padding: 0 0.5rem;
    max-width: 30rem !important;
  }

  /* Hero section — reclaim vertical space so CTA appears above fold on
     small phones without excessive scroll. */
  .section-hero {
    padding-top: 1.25rem !important;
  }

  /* Primary hero CTA (homepage "Try for free" etc.) */
  .section-hero .lp-button,
  .section-hero .button {
    min-height: 52px;
    font-size: 1rem !important;
  }
}

/* ── 6. Section padding — reclaim vertical real-estate on small phones ── */
@media (max-width: 479px) {
  .padding-section-large,
  .padding-section-medium {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .padding-xhuge,
  .padding-huge,
  .padding-xxlarge {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }
  .padding-global {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .max-width-large,
  .max-width-medium {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── 7. Card grids — stack with sensible gaps; no overflow ────────────── */
@media (max-width: 767px) {
  .feature-box,
  .card-wrapper,
  .pricing32_plan,
  .sol-feat-card {
    padding: 1.25rem !important;
  }
}

@media (max-width: 479px) {
  .testimonial21_card,
  .testimonial20_card {
    padding: 1.25rem !important;
  }
  /* Kill any 3-D tilt on mobile — no mouse, just wastes GPU. */
  .testimonial21_card,
  .testimonial21_card-2 {
    transform: none !important;
  }
}

/* ── 8. Inputs — 16px floor so iOS Safari doesn't auto-zoom on focus ──── */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
  }

  button,
  .w-button,
  .lp-button {
    /* Ensure every button is at least a 44px tap target. */
    min-height: 44px;
  }
}

/* ── 9. Images — always fluid on mobile ───────────────────────────────── */
@media (max-width: 991px) {
  img,
  video {
    max-width: 100%;
    height: auto;
  }
}

/* ── 10. Mobile-only quiet-down of expensive/continuous effects ──────── */
@media (max-width: 767px) {
  /* Drop blur backdrops — these are the biggest mobile scroll killers
     (composited blur over moving content). Keep the visual by swapping
     to a higher-alpha solid fill. */
  .section-navbar.is-scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
  }

  /* Pause the marquee and any tag shimmer on mobile — preserves battery
     and keeps scroll smooth. They also add visual noise on small screens. */
  .t20-inner,
  [class*="marquee"] {
    animation-play-state: paused !important;
  }
}

/* ── 11. Scroll-progress bar — hide on very small screens (low value) ── */
@media (max-width: 479px) {
  .scroll-progress {
    display: none !important;
  }
}

/* ── 12. Safe-area-inset-bottom for any future sticky mobile CTA ─────── */
.mobile-cta-bar {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
}

/* ── 13. Body copy floor ──────────────────────────────────────────────── */
@media (max-width: 479px) {
  /* Avoid microtype. Hero lede and body paragraphs at ≥ 16px minimum. */
  .text-size-medium,
  .text-size-regular,
  p {
    font-size: max(1rem, 0.95em) !important;
    line-height: 1.55 !important;
  }
}

/* ── 14. Reduced motion passthrough ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .t20-inner,
  [class*="marquee"] {
    animation-play-state: paused !important;
  }
}