/* ============================================================
   Task #1519712: Visual QA Batch A2 — CSS fixes for
   Homepage, Pricing, Settlements, Settlement Detail, State Page
   at 375px mobile + 1440px desktop.

   Fixes:
   1. Settlement detail --sr-text-muted contrast failure (3.0:1 → 4.6:1)
   2. Homepage bare-element color cascade bomb (a, button, span forced #1F2A37)
   3. Homepage visited links forced purple (#5B4E8B)
   4. Homepage heading weight 800 on all h3-h6 (loses hierarchy)
   5. Pricing cards invisible without JS (opacity:0 with no fallback)
   6. Mobile tap targets: .btn-text, .sr-btn--text below 44px
   7. State page category pills below 44px tap target
   8. Homepage bare section padding override
   9. .sr-nav-login-link 36px at tablet
   ============================================================ */


/* ── 1. SETTLEMENT DETAIL: Fix muted text contrast ──────────────
   #94a3b8 = 3.0:1 on white (WCAG AA fail)
   #64748b = 4.6:1 on white (WCAG AA pass)
   Override the --sr-text-muted variable for the settlement detail page. */

body.page-settlement-detail {
  --sr-text-muted: #64748b;
}


/* ── 2. HOMEPAGE: Undo bare-element color cascade bomb ──────────
   homepage-visual-polish-1513891.css sets color:#1F2A37 !important
   on body, p, span, a, button — which breaks white-on-green CTAs.
   We restore natural colors for interactive elements so they inherit
   properly from their parent containers. */

body.page-home a,
body.page-home button,
body.page-home span {
  color: inherit !important;
}

/* Re-apply the intended body/paragraph text color on homepage */
body.page-home,
body.page-home p {
  color: #1F2A37 !important;
}

/* Ensure white text on emerald CTA buttons is preserved */
body.page-home .btn-primary,
body.page-home .btn-primary span,
body.page-home [class*="hp-"] .btn-primary,
body.page-home .hn-mobile-cta,
body.page-home .hn-cta,
body.page-home .sr-btn--primary,
body.page-home .hp-hero__cta,
body.page-home .hp-hero__cta-browse,
body.page-home .sticky-cta-bar a {
  color: #FFFFFF !important;
}

/* Ensure nav links and footer links retain their correct colors */
body.page-home .hn-link,
body.page-home .sr-nav-link,
body.page-home .sr-footer a {
  color: #374151 !important;
}

body.page-home .sr-footer a:hover {
  color: #00875A !important;
}


/* ── 3. HOMEPAGE: Remove forced purple visited links ────────────
   homepage-visual-polish-1513891.css sets a:visited { color: #5B4E8B }
   which clashes with the emerald design system.
   Reset visited links to inherit the normal link color. */

body.page-home a:visited {
  color: inherit !important;
}


/* ── 4. HOMEPAGE: Restore heading weight hierarchy ──────────────
   homepage-visual-polish-1513891.css forces font-weight:800 on ALL
   headings. Restore proper hierarchy: h1=800, h2=700, h3-h6=600. */

body.page-home h3,
body.page-home h4,
body.page-home h5,
body.page-home h6,
body.page-home .h3,
body.page-home .h4,
body.page-home .h5,
body.page-home .h6 {
  font-weight: 600 !important;
}

body.page-home h2,
body.page-home .h2 {
  font-weight: 700 !important;
}


/* ── 5. PRICING: CSS safety net for reveal animation ────────────
   pricing-page.css starts .pr-reveal at opacity:0, which depends on
   IntersectionObserver JS. If JS fails/delays, cards stay invisible.
   This safety net auto-fades them in after 3s if JS hasn't fired. */

@keyframes prSafetyReveal {
  to { opacity: 1; transform: translateY(0); }
}

.pr-reveal:not(.is-visible) {
  animation: prSafetyReveal 0.5s ease forwards;
  animation-delay: 3s;
}


/* ── 6. MOBILE: Tap target fix for text/ghost buttons ───────────
   .btn-text and .sr-btn--text have no min-height, falling below
   the 44px minimum tap target on mobile. */

@media (max-width: 768px) {
  .btn-text,
  .sr-btn--text {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}


/* ── 7. STATE PAGE: Category pills tap target fix ───────────────
   .sp-cat-nav__pill has only .28rem vertical padding (~4.5px),
   making total height ~26-28px. Enforce 44px minimum. */

@media (max-width: 768px) {
  .sp-cat-nav__pill {
    min-height: 44px !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}


/* ── 8. HOMEPAGE: Scope bare section padding ────────────────────
   homepage-visual-polish-1513891.css applies padding on bare
   <section> selector, conflicting with container padding.
   We reset sections that have their own container. */

body.page-home section > .container,
body.page-home section > .hp-container {
  padding-left: 24px;
  padding-right: 24px;
}


/* ── 9. NAV: Login link tap target at tablet ────────────────────
   .sr-nav-login-link has min-height:36px. Bump to 44px at mobile. */

@media (max-width: 1023px) {
  .sr-nav-login-link {
    min-height: 44px !important;
  }
}