/* state-deepdive-fix-1344949.css — Task #1344949
   P1: Fix invisible settlement name + card rendering on /states/* pages.

   Root cause: state-deep-dive.ejs inline <style> defines .sdd-* and .roundup-*
   classes with `color:` but NOT `-webkit-text-fill-color`. Global CSS from
   premium-v2.css ([class*='card-'] selector) and motion CSS (opacity:0 on
   scroll-reveal elements) override inline styles via !important + specificity.

   This file loads LAST in layout-head.ejs to guarantee cascade authority.
   All rules use !important + -webkit-text-fill-color for full override.

   Fixes:
   1. Settlement name invisible (white-on-white) in .sdd-dynamic-intro
   2. Settlement listing cards not rendering (opacity/transform stuck)
   3. Hero text contrast on light background
   4. FAQ section text contrast
   5. Intro block ("Your Rights") text contrast
*/

/* ═══════════════════════════════════════════════════════════════════════
   1. HERO SECTION — .hero-compact.roundup-hero
   Ensure all hero text is dark on the white/light background.
   ═══════════════════════════════════════════════════════════════════════ */

.hero-compact.roundup-hero,
section.hero-compact.roundup-hero {
  background: #ffffff !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}

.hero-compact .hero-inner,
.roundup-hero .hero-inner {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}

.hero-compact h1,
.roundup-hero h1 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.roundup-hero-eyebrow,
.hero-compact .roundup-hero-eyebrow {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

/* Hero sub-text and p elements */
.hero-compact .hero-sub,
.roundup-hero .hero-sub,
.hero-compact p,
.roundup-hero p:not(.state-law-note p) {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}

/* Count badge in state deep-dive hero */
.sdd-count-badge {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}
.sdd-count-number {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}
.sdd-count-label {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

/* State law note */
.state-law-note {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}
.state-law-note p {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}
.state-law-badge {
  color: #1e40af !important;
  -webkit-text-fill-color: #1e40af !important;
}

/* AG link in hero */
.state-ag-link {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}
.state-ag-link span {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}
.state-ag-anchor {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. DYNAMIC INTRO — .sdd-dynamic-intro (settlement name lives here)
   THE PRIMARY BUG: <strong> inside this section was invisible.
   Force dark text + -webkit-text-fill-color on all children.
   ═══════════════════════════════════════════════════════════════════════ */

.sdd-dynamic-intro,
.sdd-dynamic-intro *,
div.sdd-dynamic-intro,
div.sdd-dynamic-intro p,
div.sdd-dynamic-intro strong,
div.sdd-dynamic-intro span,
div.sdd-dynamic-intro a {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}

div.sdd-dynamic-intro strong,
.sdd-dynamic-intro strong,
.sdd-dynamic-intro p strong {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 700 !important;
}

/* Ensure the intro container itself is visible */
.sdd-dynamic-intro {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  animation: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. INTRO BLOCK — .sdd-intro-block ("Your Rights" / state intro text)
   ═══════════════════════════════════════════════════════════════════════ */

.sdd-intro-block {
  background: #f8fafc !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.sdd-intro-headline,
.sdd-intro-block h2 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.sdd-intro-block p,
.sdd-intro-block strong,
.sdd-intro-block span,
.sdd-intro-block li {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}

.sdd-intro-block strong {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.sdd-intro-block a,
.sdd-guide-link {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. SETTLEMENT CARDS — .settlement-card.roundup-card
   Fix: cards not rendering (opacity:0 from motion CSS, overflow:hidden
   from premium-v2 [class*='card-'] wildcard selector).
   ═══════════════════════════════════════════════════════════════════════ */

/* Force ALL settlement cards in state pages to be visible */
.roundup-grid .settlement-card,
.roundup-grid .roundup-card,
.roundup-grid a.settlement-card,
.roundup-grid a.roundup-card {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  animation: none !important;
  display: block !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.roundup-grid .settlement-card:hover,
.roundup-grid .roundup-card:hover {
  border-color: #2563eb !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.1) !important;
}

/* Card sub-elements — override [class*='card-'] from premium-v2.css */
.roundup-grid .card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 0.75rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.roundup-grid .card-category {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.roundup-grid .card-deadline {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.roundup-grid .card-deadline.urgent {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}

.roundup-grid .card-deadline.warning {
  color: #d97706 !important;
  -webkit-text-fill-color: #d97706 !important;
}

.roundup-grid .card-deadline.expired {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
}

.roundup-grid .card-title,
.roundup-grid h3.card-title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 0 0.35rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.roundup-grid .card-company,
.roundup-grid p.card-company {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  font-size: 0.85rem !important;
  margin: 0 0 0.5rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.roundup-grid .card-summary,
.roundup-grid p.card-summary {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  margin: 0 0 1rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.roundup-grid .card-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid #f1f5f9 !important;
  box-shadow: none !important;
  padding: 0.75rem 0 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.roundup-grid .card-payout {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.roundup-grid .payout-amount {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.roundup-grid .payout-label {
  color: #94a3b8 !important;
  -webkit-text-fill-color: #94a3b8 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.roundup-grid .card-meta {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.roundup-grid .no-proof-badge {
  color: #059669 !important;
  -webkit-text-fill-color: #059669 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  background: rgba(5, 150, 105, 0.08) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   5. ROUNDUP SECTION — ensure the grid container renders
   ═══════════════════════════════════════════════════════════════════════ */

.roundup-section,
section.roundup-section {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  animation: none !important;
  background: #ffffff !important;
}

.roundup-grid {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.content-with-sidebar {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Section header row */
.roundup-grid .section-header-row {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.roundup-grid .section-header-row h2 {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   6. FAQ SECTION — .roundup-faq
   Ensure readable text on light background.
   ═══════════════════════════════════════════════════════════════════════ */

.roundup-faq {
  background: #f8fafc !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.roundup-faq-inner {
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 2.5rem 1.5rem !important;
}

.roundup-faq h2,
.roundup-faq-inner h2 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin-bottom: 1.5rem !important;
}

.faq-grid {
  display: grid !important;
  gap: 1.5rem !important;
}

.faq-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 1.25rem 1.5rem !important;
}

.faq-item h3 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.75rem !important;
}

.faq-item p {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

.faq-item strong {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.faq-item a {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   7. BRAND LINKS — .sdd-brand-links
   ═══════════════════════════════════════════════════════════════════════ */

.sdd-brand-links {
  opacity: 1 !important;
  visibility: visible !important;
}

.sdd-brand-links h3 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.sdd-brand-sub {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

.sdd-brand-card {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

.sdd-brand-card:hover {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. GUIDE SECTION — .sdd-guide-section
   ═══════════════════════════════════════════════════════════════════════ */

.sdd-guide-section {
  opacity: 1 !important;
  visibility: visible !important;
}

.sdd-guide-section h3 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.sdd-guide-card strong {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.sdd-guide-card span {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   9. SIDEBAR — ensure all sidebar text is readable
   ═══════════════════════════════════════════════════════════════════════ */

.sidebar {
  opacity: 1 !important;
  visibility: visible !important;
}

.sidebar h3,
.sidebar h4 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

.sidebar p {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

.sidebar-small {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

.sidebar a {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

.sidebar-month-link span {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

.sidebar-month-link.active span {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   10. MONTHLY NAV BAR — category pills
   ═══════════════════════════════════════════════════════════════════════ */

.monthly-nav-bar {
  background: #f8fafc !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.monthly-nav-label {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

.monthly-nav-pill {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

.monthly-nav-pill:hover {
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  border-color: #2563eb !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   11. URGENT BADGE — ensure visible on light bg
   ═══════════════════════════════════════════════════════════════════════ */

.roundup-hero .urgent-badge,
.hero-compact .urgent-badge,
.sdd-count-badge .urgent-badge {
  background: #dbeafe !important;
  color: #1e40af !important;
  -webkit-text-fill-color: #1e40af !important;
  border-radius: 9999px !important;
  padding: 0.25rem 0.75rem !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   12. MOBILE OVERRIDES — ensure everything works at 375px
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .roundup-grid .settlement-card,
  .roundup-grid .roundup-card {
    padding: 1rem !important;
  }

  .roundup-grid .card-title {
    font-size: 0.95rem !important;
  }

  .roundup-grid .card-summary {
    font-size: 0.85rem !important;
  }

  .hero-compact h1,
  .roundup-hero h1 {
    font-size: 1.4rem !important;
  }

  .sdd-count-number {
    font-size: 2rem !important;
  }

  .roundup-faq-inner {
    padding: 2rem 1rem !important;
  }

  .faq-item {
    padding: 1rem 1.25rem !important;
  }
}