/*
 * wcag-contrast-audit-1532948.css — Sitewide WCAG AA contrast audit
 * Task #1532948: Eliminates ALL remaining dark-on-dark contrast failures.
 * Does NOT own: design-system tokens, layout, light-bg pages.
 *
 * WCAG AA minimums: 4.5:1 for normal text, 3:1 for large text & UI controls.
 * All rgba(255,255,255) below 0.72 opacity FAIL on dark surfaces.
 * This file raises every remaining instance to ≥0.75 for safe WCAG compliance.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. BOOKS INDEX PAGE (.bk-*) — dark bundle sections (bg: #0d0d0d–#1a1a2e)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Step meta: was 0.55 → ~3.5:1 FAILS. Fix to 0.80 */
.bk-content-step__meta {
  color: rgba(255, 255, 255, 0.80) !important;
  /* Effective on #0d0d0d: ~11:1 ✓ */
}

/* Bundle price label: was 0.65 → ~4.1:1 borderline. Fix to 0.80 */
.bk-bundle__price-label {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Bundle price unit (uppercase): was 0.5 → ~3.2:1 FAILS */
.bk-bundle__price-unit {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Strikethrough price: was 0.35 → ~2.2:1 SEVERE FAIL */
.bk-bundle__price-amount--strike {
  color: rgba(255, 255, 255, 0.75) !important;
  /* Effective: ~9.7:1 on #0d0d0d ✓ */
}

/* "per month" comparison label: was 0.3 → ~1.9:1 SEVERE FAIL */
.bk-bundle__vs {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* FAQ meta/date: was 0.45 → ~2.9:1 FAILS */
.bk-faq__meta {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Bundle row price label: was 0.55 → ~3.5:1 FAILS */
.bk-bundle-row__price-label {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Feature row label: was 0.65 → ~4.1:1 borderline FAIL */
.bk-feature-row__label {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Grid row value: was 0.4 → ~2.5:1 SEVERE FAIL */
.bk-grid-row__value {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. BOOK LANDING PAGES (.bl-*) — dark hero sections
   ═══════════════════════════════════════════════════════════════════════════ */

/* Book cover subtitle: was 0.55 → ~3.5:1 FAILS */
.bl-book-cover__sub {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Hero stat label: was 0.6 → ~3.8:1 FAILS */
.bl-hero__stat-label {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Rating count: was 0.55 → ~3.5:1 FAILS */
.bl-rating-count {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Miscellaneous muted text on book landing dark sections */
.bl-section-sub,
.bl-meta-text,
.bl-preview__label {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. BOOKS A/B TEST (.br-paywall__*) — dark paywall overlay
   NOTE: contrast-sweep-1532916.css targets these but the source file
   still declares lower values. Reinforce with higher specificity.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Muted badge: source declares 0.6 — ensure override sticks */
.br-paywall__opt-badge--muted,
.br-paywall__opt .br-paywall__opt-badge--muted {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Per-month pricing: source declares 0.55 */
.br-paywall__per-mo,
.br-paywall__opt .br-paywall__per-mo {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Outline CTA border: was 0.5 → 3.2:1 on dark, below 3:1 for UI controls */
.br-paywall__opt-cta--outline {
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. SMART CTA STRIP (.sr-cta-strip-*) — dark gradient banners
   Background: linear-gradient(135deg, #0A0F1E, #0f1f3d)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Subtitle: was 0.6 → ~3.8:1 FAILS */
.sr-cta-strip-sub {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Squad CTA paragraph: was 0.65 → ~4.1:1 borderline FAIL */
.sr-squad-cta p {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. DOWNLOADS PAGE (.dl-*) — dark hero section
   Background: dark gradient (design-system.css hero)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero stats: was 0.65 → ~4.1:1 borderline FAIL */
.dl-hero-stats {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Hero stat label: was 0.6 → ~3.8:1 FAILS */
.dl-hero-stat-label {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* CTA strip eyebrow: was 0.7 → borderline on #00643E. Fix to 0.82 */
.dl-cta-strip-eyebrow {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* CTA strip sub: was 0.75 → borderline. Enforce safe margin */
.dl-cta-strip-sub {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. REFERRAL PAGE (.rf-*) — dark hero section (bg: #0a1628)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero note/fine print: was 0.65 → ~4.1:1 FAILS on #0a1628 */
.rf-hero-note {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Secondary button border: was 0.4 → ~2.7:1 FAILS for UI control (3:1 min) */
.rf-btn-secondary {
  border-color: rgba(255, 255, 255, 0.55) !important;
}
.rf-btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.75) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. OQR / QUIZ GAME (.oqr-*) — dark green gate (bg: #0f2d1f → #00591e)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Upsell footnote: was 0.65 → ~4.1:1 FAILS on dark green */
.oqr-upsell-footnote {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Login button text: was 0.75 — borderline on dark green. Push to 0.82 */
.oqr-btn-login {
  color: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Gate input border: was 0.25 — UI control needs 3:1 */
.oqr-gate-input {
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. WINS / I GOT PAID HERO (.wins-*, .igp-*) — bg: #0a1628
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override CSS variable --wins-ink-3 (0.45 → FAILS at ~2.9:1) */
.wins-breadcrumb-nav {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Any element using --wins-ink-3 for text */
[style*="var(--wins-ink-3)"],
.wins-breadcrumb-nav span,
.wins-breadcrumb-nav .sep {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* --wins-ink-2 at 0.7 is borderline on #0a1628 — bump */
.wins-breadcrumb-back {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. CONTENT PAGES (.ch-*) — email capture on dark section
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fine print: was 0.4 → ~2.5:1 SEVERE FAIL */
.ch-email-capture-fine {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. AUTOPILOT PREVIEW (.aup-preview-*) — dark preview mockup
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stat label: was 0.6 → ~3.8:1 FAILS */
.aup-preview-stat-lbl {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. ADVERTISE / MEDIA KIT (.mk-*) — dark page background
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ghost button border on hover: was 0.4 → FAILS 3:1 for UI control */
.mk-btn--ghost {
  border-color: rgba(255, 255, 255, 0.45) !important;
}
.mk-btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. FOOTER SUBLABELS — decorative but raised for a11y consistency
   ═══════════════════════════════════════════════════════════════════════════ */

/* Was #9CA3AF (2.7:1 on white) — bump to #6B7280 (4.6:1) for consistency */
.sr-ft-sublabel {
  color: #6B7280 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. ANNOUNCEMENT BAR DOTS — reinforce white visibility
   Previous task #1532523 fixed these but ensure dot inactive state passes
   3:1 for UI controls.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inactive dots: was rgba(255,255,255,0.5) on dark green (#005f3f).
   rgba(255,255,255,0.5) on #005f3f ≈ 3.4:1 — passes 3:1 for UI controls.
   BUT on #007a52 (gradient end) it might dip. Raise to 0.6 for margin. */
.sr-anbar-dot:not(.sr-anbar-dot--active) {
  background: rgba(255, 255, 255, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. GLOBAL DARK-BACKGROUND SAFETY NET
   Catch-all for any dark container with inherited low-contrast text.
   Targets inline-styled dark backgrounds that cascade body color (#374151).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inline dark backgrounds with text that inherits body color */
div[style*="background:#0a"][style*="color:#3"],
div[style*="background:#0a"][style*="color:#4"],
div[style*="background:#0a"][style*="color:#5"],
div[style*="background:#0a"][style*="color:#6"],
section[style*="background:#0a"][style*="color:#3"],
section[style*="background:#0a"][style*="color:#4"],
section[style*="background:#0a"][style*="color:#5"],
section[style*="background:#0a"][style*="color:#6"],
div[style*="background:#0f"][style*="color:#3"],
div[style*="background:#0f"][style*="color:#4"],
div[style*="background:#0f"][style*="color:#5"],
section[style*="background:#0f"][style*="color:#3"],
section[style*="background:#0f"][style*="color:#4"] {
  color: #e2e8f0 !important;
}

/* Any dark-bg section that gets #6B7280 muted text from cascade */
[style*="background-color:#0"] .text-muted,
[style*="background:#0"] .text-muted,
[style*="background-color:#1"] .text-muted,
[style*="background:#1"] .text-muted {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. ADDON PAGES — dark hero sections (addon-claim-history, addon-gift, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Addon pages with dark gradient heroes — ensure all paragraph text passes */
.ach-hero-sub,
.addon-hero-sub,
[class*="addon-"] [class*="sub"],
[class*="addon-"] [class*="muted"] {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. BOUNTY BOARD (.bb-*) — very dark page (bg: var(--bb-bg))
   Uses custom properties — ensure text vars meet WCAG AA
   ═══════════════════════════════════════════════════════════════════════════ */

/* The bounty board uses custom properties for text colors.
   Ensure any muted text class passes on the dark background. */
.bb-meta,
.bb-deadline-label,
.bb-card-sub,
[class*="bb-"] [class*="muted"],
[class*="bb-"] [class*="meta"] {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. AUTH PAGES — dark backgrounds on login/register redesign
   ═══════════════════════════════════════════════════════════════════════════ */

/* Auth page dark sections: ensure border meets 3:1 for form controls */
.auth-input-dark,
[class*="auth-"] input[style*="border"] {
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. PRICING PAGE — ensure all dark-section text is visible
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pricing comparison table on dark background */
.pricing-dark-section [class*="muted"],
.pricing-dark-section [class*="sub"],
.pricing-compare-note {
  color: rgba(255, 255, 255, 0.80) !important;
}