/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS FIXES — QA Pass 3 (Task #1031191)
   Comprehensive mobile/tablet audit overrides across all pages.
   Loaded LAST in layout-head.ejs to safely override inline + earlier styles.
   Breakpoints tested: 375px (iPhone SE), 390px (iPhone 14), 768px (iPad), 1024px (iPad landscape)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────────
   1. GLOBAL OVERFLOW PREVENTION
   ────────────────────────────────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden;
}
img, video, iframe, embed, object, svg {
  max-width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────────────────────────────────────
   2. PRO UPSELL MODAL — Mobile fixes (pricing.ejs inline styles)
   ────────────────────────────────────────────────────────────────────────────── */

/* Make modal scrollable when content overflows viewport */
#proUpgradeModal > div {
  overflow-y: auto !important;
  max-height: 90vh;
  max-height: 90dvh;
}

/* Enlarge close button touch target (was 28px → 44px) */
#proUpgradeModal button[aria-label="Close"] {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  top: 8px !important;
  right: 8px !important;
}

@media (max-width: 480px) {
  /* Reduce modal padding on small phones */
  #proUpgradeModal {
    padding: 0.5rem !important;
  }
  #proUpgradeModal > div {
    border-radius: 14px !important;
    max-height: 92vh;
    max-height: 92dvh;
  }
  /* Reduce internal header padding */
  #proUpgradeModal > div > div:first-child {
    padding: 1rem 1.15rem 0.85rem !important;
  }
  /* Reduce table section padding */
  #proUpgradeModal > div > div:nth-child(2) {
    padding: 1rem 1rem 0 !important;
  }
  /* Reduce feature table font */
  #proUpgradeModal table {
    font-size: 0.78rem !important;
  }
  /* Increase secondary CTA button touch target */
  #proUpgradeModal .proModalSkip,
  #proUpgradeModal button[style*="transparent"] {
    min-height: 44px !important;
    padding: 12px 16px !important;
  }
}

@media (max-width: 375px) {
  #proUpgradeModal > div > div:first-child h2 {
    font-size: 1.1rem !important;
  }
  #proUpgradeModal > div > div:first-child p {
    font-size: 0.78rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   3. HOMEPAGE — Quiz category grid fix (home.ejs inline styles)
   ────────────────────────────────────────────────────────────────────────────── */

/* Current: 2→1 at 360px. Fix: 2→1 at 480px for better touch targets */
@media (max-width: 480px) {
  .wayo-cats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   4. HOMEPAGE — CAS stats grid earlier single-column transition
   ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .cas-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   5. ABOUT PAGE — Email form input iOS zoom prevention
   ────────────────────────────────────────────────────────────────────────────── */

.ab-email-form input {
  font-size: 1rem !important; /* 16px prevents iOS auto-zoom on focus */
}

/* About page email form: stack button below input on small screens */
@media (max-width: 480px) {
  .ab-email-form {
    flex-direction: column !important;
  }
  .ab-email-form input {
    width: 100% !important;
    border-radius: 12px !important;
  }
  .ab-email-form button {
    width: 100% !important;
    border-radius: 12px !important;
    white-space: normal !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   6. SETTLEMENT DETAIL — Urgency banner overflow fix
   ────────────────────────────────────────────────────────────────────────────── */

#urgentDeadlineBanner .udb-msg {
  min-width: 0 !important;
}

/* Settlement detail trust badges — ensure proper wrap */
.sp-cta-urgency-strip {
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .sp-cta-urgency-strip {
    padding: 0.55rem 0.75rem !important;
  }
  .sp-cta-item {
    font-size: 0.77rem !important;
  }
  /* Settlement detail stat cards stacking */
  .detail-stats {
    flex-direction: column !important;
  }
  .above-fold-cta-strip {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .above-fold-cta-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    min-height: 48px !important;
    align-items: center !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   7. SEO BRAND LANDING PAGES — Missing mobile breakpoints
      (seo-class-action-landing.ejs inline styles)
   ────────────────────────────────────────────────────────────────────────────── */

/* Countdown timer: 4→2 columns on tablets, 2 columns on phones */
@media (max-width: 768px) {
  .ca-countdown-wrap {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .ca-hero {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .ca-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
  }
  .ca-hero-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 480px) {
  /* Payout grid: force single column */
  .ca-payout-grid {
    grid-template-columns: 1fr !important;
  }
  /* Related settlements: single column */
  .ca-related-grid {
    grid-template-columns: 1fr !important;
  }
  /* Reduce section padding */
  .ca-section {
    padding: 2rem 1rem !important;
  }
  /* FAQ: tighter padding */
  .ca-faq-question {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 375px) {
  .ca-hero h1 {
    font-size: 1.4rem !important;
  }
  .ca-countdown-num {
    font-size: 1.5rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   8. FOR LAW FIRMS PAGE — Missing mobile breakpoints
      (for-law-firms.ejs inline styles)
   ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Stats row: wrap and center */
  .lf-stats-row,
  [class*="lf-stats"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1rem !important;
  }
  /* Feature grids: 2 columns */
  .lf-features-grid,
  [class*="lf-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  /* Pricing cards: stack vertically */
  .lf-pricing-grid,
  [class*="lf-pricing"] {
    grid-template-columns: 1fr !important;
    max-width: 480px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Section padding */
  .lf-section,
  [class*="lf-section"] {
    padding: 3rem 1.25rem !important;
  }
}

@media (max-width: 480px) {
  .lf-hero {
    padding: 4rem 1rem 2.5rem !important;
  }
  .lf-hero h1 {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
  }
  .lf-hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .lf-hero-ctas a,
  .lf-hero-ctas button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  /* Feature grids: single column on phones */
  .lf-features-grid,
  [class*="lf-grid"] {
    grid-template-columns: 1fr !important;
  }
  /* Stats: stack vertically */
  .lf-stats-row,
  [class*="lf-stats"] {
    flex-direction: column !important;
    align-items: center !important;
  }
}

@media (max-width: 375px) {
  .lf-hero h1 {
    font-size: 1.5rem !important;
  }
  .lf-section,
  [class*="lf-section"] {
    padding: 2rem 1rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   9. CATEGORY PAGES — Missing sub-880px breakpoints
      (settlement-category-page.ejs inline styles)
   ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .scp-hero {
    padding: 1.5rem 1rem !important;
  }
  .scp-h1 {
    font-size: 1.75rem !important;
  }
}

@media (max-width: 640px) {
  .scp-stats {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  .scp-stat {
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .scp-hero {
    padding: 1.25rem 0.75rem !important;
  }
  .scp-h1 {
    font-size: 1.45rem !important;
  }
  .scp-sub {
    font-size: 0.85rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   10. SEO GUIDE PAGES — Image overflow & table improvements
   ────────────────────────────────────────────────────────────────────────────── */

.sg-section-body img {
  max-width: 100%;
  height: auto;
}

/* Ensure table scroll affordance even without JS */
.sg-section-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ──────────────────────────────────────────────────────────────────────────────
   11. STICKY BARS — Prevent overlap with each other
   ────────────────────────────────────────────────────────────────────────────── */

/* When filing bar is visible, push mobile CTA bar up to avoid overlap */
.sticky-filing-bar ~ #sr-mobile-cta-bar,
body:has(.sticky-filing-bar[style*="display: flex"]) #sr-mobile-cta-bar,
body:has(.sticky-filing-bar:not([style*="display: none"])) #sr-mobile-cta-bar {
  display: none !important;
}

/* Ensure bottom-fixed elements don't overlap each other */
@media (max-width: 768px) {
  .sticky-filing-bar {
    flex-wrap: wrap;
    text-align: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }
  .sticky-filing-bar .bar-text {
    font-size: 0.8rem;
    flex: 1 1 100%;
  }
  .sticky-filing-bar .bar-cta {
    padding: 10px 20px;
    font-size: 14px;
    width: 100%;
    justify-content: center;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   12. HOMEPAGE — Filing explainer section overflow fix
   ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  /* Force filing explainer columns to stack */
  [style*="min-width:260px"],
  [style*="min-width:220px"] {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   13. GENERAL MOBILE TOUCH TARGETS
   ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Ensure all close/dismiss buttons meet 44px minimum */
  button[aria-label="Close"],
  button[aria-label="Dismiss"],
  .modal-close,
  .dialog-close {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Ensure footer links have enough touch spacing */
  footer a,
  .site-footer a {
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   14. HOMEPAGE HERO — Font size constraint on very small screens
   ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 375px) {
  .rs-hero h1,
  .hero-headline {
    font-size: clamp(1.8rem, 8vw, 2.8rem) !important;
  }
  /* Reduce stats bar padding */
  .rs-stats-bar {
    padding: 12px 8px !important;
  }
  .rs-stat-num {
    font-size: 1.2rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   15. FOOTER — Ensure proper stacking on mobile
   ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .site-footer .footer-grid,
  .site-footer-grid,
  .footer-cols {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   16. CAUGHT RED-HANDED TICKER — Smooth animation guarantee
   ────────────────────────────────────────────────────────────────────────────── */

.crh-ticker-inner {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (max-width: 480px) {
  .crh-ticker {
    font-size: 0.85rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   17. FORMS — Keyboard clearance on mobile
   ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* When input is focused, ensure it's not obscured by fixed bottom bars */
  input:focus,
  select:focus,
  textarea:focus {
    scroll-margin-bottom: 120px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   18. PRICING PAGE — Card grid refinements
   ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .prc-grid {
    padding: 0 0.75rem !important;
  }
  .prc-card {
    padding: 1.5rem 1rem 1.25rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   19. SETTLEMENT LISTING — Card grid overflow prevention
   ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .settlement-grid,
  .settlements-grid,
  [class*="settlement-grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   20. MEGA MENU — Mobile toggle refinements
   ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Ensure mega menu panels don't overflow viewport */
  .mega-panel,
  .nav-mobile-menu {
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 600px) {
  .mega-panel,
  .nav-mobile-menu {
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   21. TOAST NOTIFICATIONS — Prevent overflow on narrow screens
   ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  #saveSignInPrompt,
  #subscribeConfirmedToast {
    right: 0.75rem !important;
    left: 0.75rem !important;
    max-width: none !important;
    width: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   22. BACK-TO-TOP BUTTON — Avoid overlap with bottom-fixed bars
   ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  #sr-back-to-top {
    bottom: 4.5rem !important; /* Clear mobile CTA bar height */
  }
  .sr-mobile-cta-visible #sr-back-to-top {
    bottom: 5.5rem !important;
  }
}