/* ============================================================
   SettlementRadar — Content Pages Visual Polish
   Task #1513896: Visual fixes for 375px (mobile) & 1440px (desktop)

   Fixes:
   - 375px: Safe horizontal padding, no text overflow
   - 375px: Touch targets ≥ 44px minimum height
   - 375px: Heading font sizes via clamp()
   - 375px: Form inputs full-width, larger touch areas
   - 375px: Image scaling to avoid overflow
   - 1440px: Maximum widths for large screens (max 1200px)
   - 1440px: Spacing optimization for wide layouts
   - All: WCAG AA contrast minimum (4.5:1)
   - All: Proper font stacking (Fraunces/DM Sans)
   ============================================================ */

/* ── 375px MOBILE FIXES ──────────────────────────────────── */
@media (max-width: 420px) {
  /* Hero sections */
  .ch-hero {
    padding: 3rem 1rem 1.5rem !important;
  }
  .ch-hero h1 {
    font-size: clamp(1.5rem, 5vw, 2.2rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
  }
  .ch-hero-eyebrow {
    font-size: 0.6rem !important;
    padding: 0.35rem 0.7rem !important;
  }
  .ch-hero-sub {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  /* Featured card on mobile */
  .ch-featured-card {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 1.5rem !important;
  }
  .ch-featured-card-img-wrap {
    aspect-ratio: 16/9 !important;
    min-height: 160px !important;
  }
  .ch-featured-card-body {
    padding: 1rem !important;
  }
  .ch-featured-card h2 {
    font-size: clamp(1rem, 4vw, 1.25rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 0.4rem !important;
  }
  .ch-featured-card-excerpt {
    font-size: 0.9rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.5 !important;
  }

  /* Article grid on mobile */
  .ch-card-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 0 !important;
  }
  .ch-card {
    margin: 0 !important;
  }
  .ch-card-img-wrap {
    aspect-ratio: 16/9 !important;
    min-height: 150px !important;
  }
  .ch-card h3 {
    font-size: clamp(0.95rem, 3.5vw, 1.1rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 0.3rem !important;
  }
  .ch-card-body {
    padding: 0.85rem 1rem !important;
    min-height: 100px !important;
  }
  .ch-card-excerpt {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0.4rem !important;
  }

  /* Sidebar - full width on mobile */
  .ch-sidebar {
    position: static !important;
    margin-top: 1.5rem !important;
  }
  .ch-layout {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding: 1rem !important;
  }

  /* Filter bar on mobile */
  .ch-filter-bar {
    padding: 0.5rem 0.75rem !important;
    top: 56px !important;
  }
  .ch-filter-inner {
    gap: 0.3rem !important;
  }
  .ch-filter-tab {
    font-size: 0.75rem !important;
    padding: 0.3rem 0.75rem !important;
  }

  /* Buttons on mobile - ensure 44px minimum touch target (scoped to content components) */
  .scp-pill,
  .ch-sidebar-cta-btn,
  .ch-pro-cta-primary,
  .ch-pro-cta-secondary,
  .ch-email-capture-btn {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.9rem !important;
  }
  .scp-pill {
    padding: 0.5rem 0.85rem !important;
    justify-content: center !important;
  }

  /* Forms on mobile — scoped to content page form elements */
  .ch-email-capture input[type="text"],
  .ch-email-capture input[type="email"],
  .contact-page-wrap input[type="text"],
  .contact-page-wrap input[type="email"],
  .contact-page-wrap textarea {
    font-size: 16px !important;
    padding: 0.65rem 0.9rem !important;
    min-height: 44px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Sidebar cards stack vertically */
  .ch-sidebar-card {
    margin-bottom: 1rem !important;
  }
  .ch-sidebar-card h3 {
    font-size: 0.95rem !important;
  }

  /* Newsletter section on mobile */
  .ch-email-capture {
    padding: 2rem 1rem !important;
  }
  .ch-email-capture h2 {
    font-size: clamp(1.3rem, 4vw, 1.6rem) !important;
    margin-bottom: 0.5rem !important;
  }
  .ch-email-capture-form {
    flex-direction: column !important;
    gap: 0.6rem !important;
  }
  .ch-email-capture-input {
    width: 100% !important;
    min-height: 44px !important;
  }
  .ch-email-capture-btn {
    width: 100% !important;
    min-height: 48px !important;
  }

  /* Pro CTA section on mobile */
  .ch-pro-cta-btns {
    flex-direction: column !important;
    gap: 0.6rem !important;
  }
  .ch-pro-cta-primary,
  .ch-pro-cta-secondary {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
  }

  /* Pagination on mobile */
  .ch-pagination {
    gap: 0.25rem !important;
    padding: 1rem !important;
  }
  .ch-page-btn {
    min-width: 40px !important;
    height: 40px !important;
    font-size: 0.8rem !important;
  }

  /* Meta information on mobile */
  .ch-card-meta,
  .ch-card-footer {
    flex-wrap: wrap !important;
    gap: 0.3rem !important;
    font-size: 0.75rem !important;
  }

  /* Smart CTA strip on mobile */
  .scp-pack-strip {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .scp-pack-label {
    margin-bottom: 0.5rem !important;
  }
  .scp-pack-pills {
    width: 100% !important;
  }
  .scp-pill {
    flex: 1 !important;
    padding: 0.55rem 0.75rem !important;
  }

  /* Images - prevent overflow (scoped to content components) */
  .ch-featured-card-img,
  .ch-card-img,
  .ch-hero img,
  .ch-layout img,
  .ab4-section img {
    max-width: 100% !important;
    height: auto !important;
  }
  .ch-featured-card-img,
  .ch-card-img {
    object-fit: cover !important;
    width: 100% !important;
    display: block !important;
  }

  /* Contact form on mobile — scoped to contact page only */
  .contact-page-wrap form {
    padding: 0 !important;
  }
  .contact-page-wrap form input,
  .contact-page-wrap form textarea,
  .contact-page-wrap form select {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }
  .contact-page-wrap form textarea {
    min-height: 120px !important;
  }

  /* About page sections on mobile */
  .ab4-section {
    padding: clamp(2rem, 5vw, 3.5rem) 0 !important;
  }
  .ab4-inner,
  .ab4-inner--wide {
    padding: 0 1rem !important;
  }

  /* Guides/News sections */
  .guide-section,
  .news-section {
    padding: 1.5rem 1rem !important;
  }

  /* Leaderboard on mobile */
  .leaderboard-table {
    font-size: 0.85rem !important;
  }
  .leaderboard-table th,
  .leaderboard-table td {
    padding: 0.6rem 0.5rem !important;
  }

  /* Quiz form on mobile */
  .quiz-option {
    padding: 0.75rem 1rem !important;
    min-height: 44px !important;
    font-size: 0.9rem !important;
  }

  /* Tools pages on mobile */
  .tool-input,
  .calculator-input {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 0.65rem 0.9rem !important;
  }
  .tool-btn {
    min-height: 48px !important;
    width: 100% !important;
  }
}

/* ── 1440px DESKTOP OPTIMIZATIONS ──────────────────────── */
@media (min-width: 1440px) {
  /* Standard max-width container for 1440px+ */
  .ch-layout,
  .ch-hero-inner,
  .ab4-inner,
  .contact-page-wrap {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hero on large screens */
  .ch-hero {
    padding: 8rem 2rem 4rem !important;
  }
  .ch-hero h1 {
    font-size: clamp(2.5rem, 4vw, 3.2rem) !important;
  }

  /* Sidebar positioning on large screens */
  .ch-sidebar {
    position: sticky !important;
    top: 120px !important;
  }

  /* Featured card on large screens */
  .ch-featured-card {
    grid-template-columns: 1.2fr 1fr !important;
  }
  .ch-featured-card-img-wrap {
    aspect-ratio: auto !important;
    min-height: 360px !important;
  }
  .ch-featured-card-body {
    padding: 2rem !important;
  }

  /* Card grid optimization for 1440px */
  .ch-card-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }

  /* Proper spacing at wide viewport */
  .ch-email-capture {
    padding: 5rem 2rem !important;
  }
  .ch-email-capture h2 {
    font-size: clamp(1.8rem, 3vw, 2.2rem) !important;
  }

  /* Sidebar multi-column layout on large screens */
  .ch-article-sidebar {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }

  /* Pro CTA at 1440px */
  .ch-pro-cta-btns {
    gap: 1.5rem !important;
  }
  .ch-pro-cta-primary,
  .ch-pro-cta-secondary {
    padding: 0.85rem 2.2rem !important;
  }

  /* Typography refinement for large screens — scoped to content areas */
  .ch-layout,
  .ab4-inner,
  .contact-page-wrap {
    font-size: 18px;
  }
  .ch-hero-sub {
    font-size: 1.2rem !important;
  }
  .ch-card-excerpt {
    font-size: 0.95rem !important;
  }

  /* B2B pages at 1440px */
  .for-business,
  .for-law-firms,
  .for-employers {
    max-width: 1200px !important;
    margin: 0 auto !important;
  }
}

/* ── 1200px TABLET LANDSCAPE ────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1439px) {
  .ch-layout {
    grid-template-columns: 1fr 320px !important;
    gap: 2rem !important;
  }
  .ch-featured-card {
    grid-template-columns: 1.1fr 0.9fr !important;
  }
  .ch-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── CONTENT PAGE SCOPED FIXES ──────────────────────────── */
/* Scoped to content page containers only — no global overrides
   that fight design-system.css or break other page components. */

/* Ensure images in content areas don't overflow */
.ch-hero img,
.ch-card img,
.ch-featured-card img,
.ch-layout img,
.ab4-section img,
.contact-page-wrap img {
  max-width: 100% !important;
  height: auto !important;
}

/* Focus states for accessibility (safe — purely additive) */
*:focus-visible {
  outline: 2px solid #00875A !important;
  outline-offset: 2px !important;
}

/* Print styles — scoped content elements */
@media print {
  .no-print,
  .ch-sidebar,
  .ch-email-capture,
  .ch-pro-cta {
    display: none !important;
  }
}

/* ── Task #1517999: Visual QA Batch C — About, Contact, Privacy, Terms,
      No-Proof-Required, Quiz — 375px + 1440px fixes ─────────────────── */

/* 1. QUIZ: Quiz question heading uses Fraunces serif (brand standard).
      .qw-screen-q has no font-family set — inherits DM Sans. Fix. */
.qw-screen-q {
  font-family: 'Fraunces', Georgia, serif !important;
}

/* 2. ABOUT: Stats sublabels at mobile — 0.75rem (12px) is too small.
      Bump to 0.82rem on all screens and 0.78rem at 420px floor. */
.ab4-stat-label {
  font-size: 0.82rem !important;
}
@media (max-width: 420px) {
  .ab4-stat-label {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }
  /* Stat grid — 2x2 layout on very small screens */
  .ab4-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 3. NO-PROOF-REQUIRED: CTA strip buttons on very small screens —
      ensure full-width stacking so they don't overflow at 375px. */
@media (max-width: 420px) {
  .np-cta-strip {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
  }
  .np-cta-primary,
  .np-cta-secondary {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* Stats inner grid wraps to 2 columns on narrow mobile */
  .np-stats-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    display: grid !important;
    gap: 1rem !important;
  }
  .np-stat {
    text-align: center !important;
  }
}

/* 4. CONTACT: Hero at 1440px — ensure max-width container doesn't stretch */
@media (min-width: 1440px) {
  .contact-page-wrap .co-container,
  .contact-page-wrap .co-grid-section {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Contact hero h1 caps at readable width on ultra-wide */
  .co-hero h1 {
    max-width: 760px !important;
  }
}

/* 5. PRIVACY/TERMS: Mobile hero padding — ensure content clears fixed header */
@media (max-width: 420px) {
  .policy-hero {
    padding-top: calc(var(--header-height, 72px) + 2rem) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .policy-hero h1 {
    font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
  }
  .policy-layout {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* TOC mobile toggle button — 44px touch target */
  .policy-toc-mobile-toggle {
    min-height: 44px !important;
    padding: 0.75rem 1.25rem !important;
  }
}

/* 6. CONTACT: Hero heading readable on all screens */
@media (max-width: 420px) {
  .co-hero {
    padding: 5.5rem 1rem 2.5rem !important;
  }
  .co-hero h1 {
    font-size: clamp(1.7rem, 6vw, 2.2rem) !important;
    letter-spacing: -0.02em !important;
  }
  .co-hero-sub {
    font-size: 0.95rem !important;
  }
}