/* ============================================================
   Dark-mode contrast pass (June 2026)
   Targets WCAG 2.1 AA failures found at 375px viewport on:
   home, tips, bonus-codes, best-betting-sites, betting-bonuses,
   review pages, promo pages, springboks-betting-guide.
   ============================================================ */

[data-theme="dark"] {

  /* ---- 1. Hardcoded black text on dark surfaces ---- */
  /* Pages with light-mode hardcoded colours (best-betting-sites,
     betting-bonuses, springboks) bleed black text into dark mode.
     Force token colour. */
  p, li, td, th, dd, dt, figcaption,
  .lede, .intro, .summary, .promo-detail-row span,
  .review-link-card p, .meta-block p {
    color: var(--color-text);
  }

  /* Common inline patterns from older hubs */
  [style*="color: #000"],
  [style*="color:#000"],
  [style*="color: rgb(0,"],
  [style*="color:rgb(0,"],
  [style*="color: black"],
  [style*="color:black"] {
    color: var(--color-text) !important;
  }

  /* ---- 2. Promo-code chip "Tap to copy" / "Not required" ---- */
  /* Springboks + betting-bonuses pages used near-black text on
     mid-dark cards. Lift to muted token. */
  .promo-code-copy,
  .promo-code-cta,
  .promo-code-cell.no-code,
  .promo-code-helper,
  .promo-chip .helper,
  button.copy-btn,
  span.copy-helper {
    color: var(--color-text-muted) !important;
  }
  .promo-code-cell.no-code,
  span.promo-code-cell[data-code-type="default"] {
    color: var(--color-text) !important;
  }

  /* ---- 3. Score badges 9.4 / 10 on green ---- */
  /* White text on light-green pill failed 1.74. Switch the pill
     to dark green so white passes AA. */
  .score-badge,
  .score-pill,
  .rating-badge,
  [class*="score-"][class*="pill"],
  [class*="rating-"][class*="badge"] {
    background: #15803d !important;   /* green-700 */
    color: #ffffff !important;
  }

  /* ---- 4. Light-blue links/badges on dark surface ---- */
  /* rgb(61,111,255) on rgb(22,27,34) = 4.05. AA wants 4.5 for
     normal text. Lift to a lighter primary. */
  a,
  .logo-tld,
  .editorial-badge,
  .promo-type-badge,
  .badge--accent {
    color: #6e9bff;
  }
  a:hover { color: #93b7ff; }

  /* Blue pills with text-inverse white on bright blue */
  button.filter-chip.is-active,
  .cta-btn,
  a.cta-btn,
  .btn-primary,
  .promo-code-copy-btn {
    background: #2952cc !important;   /* darker blue */
    color: #ffffff !important;
  }

  /* ---- 5. Footer & legal copy ---- */
  /* © 2026 Tips, 18+ legal copy were rgb(72,79,88). Lift. */
  footer span,
  footer p,
  footer small,
  .footer-legal,
  .legal-copy,
  .copyright {
    color: var(--color-text-muted) !important;
  }

  /* ---- 6. League labels on tip cards ---- */
  /* "INTERNATIONAL - FIFA WORLD CUP" was rgb(107,114,128) on
     dark = 3.58. Lift to text-muted token. */
  .league-label,
  .scope-tag,
  .competition-name,
  .fixture-meta .league {
    color: var(--color-text) !important;
    opacity: 0.85;
  }

  /* ---- 7. "ON THIS PAGE" + affiliate disclosure on guides ---- */
  /* Was rgb(72,79,88) on rgb(28,35,51) = 1.90. */
  .toc-label,
  .toc-title,
  .affiliate-disclosure,
  .disclosure-text,
  aside p,
  .springboks-guide aside p {
    color: var(--color-text) !important;
    opacity: 0.85;
  }
}

/* ---- 8. Specific high-specificity offenders found at 375px ---- */
[data-theme="dark"] {
  /* Light-mode primary leaking into dark for buried CTAs/links */
  a[href].bbf-cta,
  a[href].tcs-cta,
  a[href].sa-feature-cta-primary,
  a[href].sa-feature-cta-secondary,
  .bcz-cta,
  .bk-name-link,
  .bbt-name {
    color: #ffffff !important;
  }
  a[href].bbf-cta,
  a[href].tcs-cta {
    background: #2952cc !important;
  }

  /* See today's full slate / scorecard live links */
  .home-hero a,
  .hero-block a,
  .editorial-card a,
  a.hero-link,
  a.section-link,
  a.see-all {
    color: #93b7ff !important;
  }

  /* Pick badge variants on tips.html */
  .pick-badge--value {
    color: #93b7ff !important;
    background: rgba(61, 111, 255, 0.22) !important;
  }
  .pick-badge--league {
    color: #d3d8e0 !important;
    opacity: 1 !important;
  }
  .pick-card__sel-meta,
  .pick-card__avail-chip {
    color: #d3d8e0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  /* Author role pill */
  .author-role,
  .byline-role {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.10) !important;
  }

  /* Accumulator hero P on blue background */
  .accumulator-card p,
  .acca-feature p {
    color: #ffffff !important;
    opacity: 1 !important;
  }

  /* Brand-table cells (bbt-* and bk-*) sit on translucent surface;
     give them an opaque dark fill so the body text actually has a
     contrast partner. */
  table.bbt tbody tr,
  table.bcz tbody tr,
  .bbt-row,
  .bcz-row {
    background: var(--color-surface) !important;
  }

  /* Hero eyebrow PICKS FOR TODAY */
  .hero-eyebrow,
  .eyebrow {
    color: #93b7ff !important;
  }

  /* Section badge counts "3 legs" */
  .section-badge,
  .badge-value,
  .sa-feature-countdown {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
  }
}

/* Mobile-specific tightening: at 375px the contrast burden is
   higher because tap targets sit closer to copy. Bump muted
   tokens slightly. */
@media (max-width: 480px) {
  [data-theme="dark"] {
    --color-text-muted: #b3bccc;   /* was #9ca3b0, contrast 4.7 on surface */
    --color-text-faint: #8b95a3;   /* was #6b7280 */
  }
}