/* ════════════════════════════════════════════════════════════════════
   MOBILE UX AUDIT FIXES — Task #759340
   Comprehensive fixes for 375px and 414px viewports across all pages.
   Loaded LAST to override external CSS (but not page-level inline styles).
   ════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   1. SECONDARY PAGE HERO (sp-hero)
      - clamp(5rem, 8vw, 7rem) evaluates to ~5rem = 80px at 375px.
      - Header is fixed at 52px, so content starts ~132px from top.
      - Reduce to give users more of their viewport for content.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .sp-hero {
    padding: clamp(4rem, 8vw, 5.5rem) 1.25rem clamp(2rem, 4vw, 2.75rem) !important;
  }
}

@media (max-width: 480px) {
  .sp-hero {
    padding: 4rem 1rem 2rem !important;
  }
  .sp-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2.1rem) !important;
    line-height: 1.2 !important;
  }
  .sp-hero .sp-hero-sub {
    font-size: clamp(0.88rem, 3.5vw, 1rem) !important;
  }
}

@media (max-width: 375px) {
  .sp-hero {
    padding: calc(var(--header-height, 52px) + 0.875rem) 0.875rem 1.75rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   2. BUTTON TAP TARGETS — WCAG 2.5.5 minimum 44×44px
      - .sp-btn base is ~47px (OK)
      - .sp-btn--sm is only ~37px (FAIL)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .sp-btn--sm {
    min-height: 44px !important;
    padding: 0.7rem 1.1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Auth tabs — 40px, just below 44px threshold */
  .sp-auth-tab {
    min-height: 44px !important;
    padding: 0.8rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   3. BILLING TOGGLE — 28px visual height is too small to tap
      Scale up the toggle to 32px height on mobile, keep proportions.
      Also ensure the wrap row is at least 48px for easy tapping.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  .sp-billing-toggle-wrap {
    min-height: 52px !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  /* Scale up toggle from 52×28px → 56×32px */
  .sp-billing-toggle {
    width: 56px !important;
    height: 32px !important;
  }
  .sp-billing-slider {
    border-radius: 32px !important;
  }
  /* Scale up handle from 22×22px → 24×24px, adjust position */
  .sp-billing-slider:before {
    width: 24px !important;
    height: 24px !important;
    top: 4px !important;
    left: 4px !important;
  }
  /* translateX stays at 24px: 56 - 4(right margin) - 24(handle) - 4(left) = 24 */
  .sp-billing-toggle input:checked + .sp-billing-slider:before {
    transform: translateX(24px) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   4. PRICING CARD PADDING — reduces to fit 375px without overflow
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {
  .sp-pricing-card {
    padding: 1.5rem 1.25rem 1.25rem !important;
  }
  .sp-pricing-badge {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.65rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   5. CONTAINER PADDING — too wide at 320–380px (uses 1.5rem=24px)
      Left + right: 48px total from 320px = only 272px content.
      Reduce to 14px each side for comfortable layout.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {
  .sp-container,
  .sp-container--narrow,
  .sp-container--article {
    padding: 0 0.875rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   6. AUTH CARD — very cramped at 320–380px
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {
  .sp-auth-card {
    padding: 1.75rem 1rem !important;
    border-radius: 16px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   7. QUIZ OPTIONS — ensure they're large enough on mobile
      .sp-quiz-option at 0.9rem padding is ~49px — that's actually fine.
      But add explicit min-height as a safety net.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .sp-quiz-option {
    min-height: 48px !important;
    padding: 0.9rem 1rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   8. SETTLEMENT DETAIL PAGE — readability at 375px
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 414px) {
  /* Title shouldn't overflow at 375px */
  .sd-title,
  .settlement-title {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  /* Meta info (badges, tags) should wrap */
  .sd-meta,
  .settlement-meta {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   9. MY CLAIMS PAGE — table/list horizontal overflow
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 414px) {
  /* Any table on the my-claims page must scroll horizontally */
  .my-claims-table-wrap,
  .claims-table-wrap,
  [class*="claims-table"],
  [class*="tracker-table"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   10. GUIDES INDEX — card grid at narrow viewports
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 414px) {
  .guides-grid,
  .guide-cards-grid,
  .guides-card-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .guide-card,
  .guides-card {
    padding: 1.25rem !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   11. FOOTER NAV — links need adequate tap targets on mobile
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .sr-ft-nav a {
    padding: 0.4rem 0.35rem !important;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
}


/* ══════════════════════════════════════════════════════════════════
   12. OVERFLOW PROTECTION — global safety net for 375px
       Prevent any fixed-width elements from causing horizontal scroll.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Images: never overflow container */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Embedded media */
  .embed-responsive,
  .video-wrap,
  .iframe-wrap {
    max-width: 100% !important;
    overflow: hidden !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   13. PRICING PAGE — one-time card layout at 375px
       .onetime-card uses flex row but has long text and a price.
       Stack vertically on smallest screens.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 414px) {
  .onetime-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  .onetime-price {
    align-self: flex-start !important;
  }
  .onetime-link {
    width: 100% !important;
    text-align: center !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   14. ROI BANNER — long text wraps awkwardly on mobile
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* The inline-styled ROI banner on pricing.ejs */
  [style*="background:var(--sp-accent-subtle)"] p,
  [style*="background: var(--sp-accent-subtle)"] p {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   15. DISMISS BUTTONS — all toast/banner dismiss buttons need 44px tap area
       - .announce-bar-dismiss: already 44px in inline style (good)
       - .rvb-dismiss (returning visitor banner): only 28×28px (too small)
   ══════════════════════════════════════════════════════════════════ */

.announce-bar-dismiss {
  min-width: 44px !important;
  min-height: 44px !important;
}

.rvb-dismiss {
  min-width: 44px !important;
  min-height: 44px !important;
}