/* ===================================================================
   DeafMonitor — Global Light-Theme Accessibility Overrides
   ===================================================================
   Loaded site-wide from src/php/header.php (and public/header.php).

   Problem this solves:
     Every page-*.php declares its own inline <style> with a
     [data-theme="light"]{...} override block. Those overrides typically
     redefine ONLY --bg, --tx1, --tx2 — they never touch accent variables
     like --y (gold), --mg (magenta), --pink, --gold, --purple, --ev (event
     coral). As a result, dark-theme bright accents bleed through into the
     cream/grey light background where they fail WCAG AA (gold #F5C842 on
     cream = 1.4:1 — catastrophic).

   Approach:
     Two layers:
     1) Variable shadows — redefine accent vars in light theme to AA-safe
        text-friendly values. Safe wherever the var is only used as `color:`.
     2) Selector overrides — for known DM class patterns where the same var
        is used as BOTH text and background, use specific class-targeted
        overrides instead of touching the variable.

   AA palette on cream (#F8F6F1) / light grey (#F5F7FA, #EEF3F8):
     #006064  teal accent     7.0:1 AAA on cream
     #9E1F4A  pink accent     6.8:1 AA on cream
     #7A4E00  gold accent     6.5:1 AA on cream
     #5B3FA0  purple accent   7.1:1 AAA on cream
     #B23C1E  event coral     7.0:1 AAA on cream

   Loaded after most page-inline styles via header.php #wp_head. Selector
   specificity + !important is sufficient to win the cascade against the
   inline overrides in 99% of cases.
   =================================================================== */

/* ── 0. Global utilities (theme-agnostic) ────────────────────────────── */
/* Apply to any element whose textContent updates with a number — timers,
   counters, prices, percentages, scores, badges, live data. Locks each
   glyph to the same advance width so the number doesn't jitter sideways
   when digits change. Static one-time numbers don't need this. */
.tabular-nums,
.dm-num,
[data-tnum] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Catch-all for DM's existing number-tile patterns. Most are filled by
   JS after first paint (stats, counters, prices, scores, totals) so they
   benefit from tnum without per-element edits. */
[class*="hstat-num"],
[class*="-stat-num"],
[class*="dm-stat-num"],
[class*="-stat-val"],
[class*="dm-stat-val"],
[class*="dm-kpi-val"],
[class*="dm-counter"],
.dm-count,
.dm-price,
.dm-score-val,
.dm-tile-val,
.dm-funnel-val,
.dm-perf-stat .val,
.dm-prof-stat .val,
.dm-prof-socials .count,
.dm-match-num,
.dm-match-breakdown .val,
.dm-rc-table .rc-prc,
.dm-app-signal-val,
.dm-trg-time,
.dm-notif-count,
.dm-cp-count,
.dm-followed-count,
.ud-stat-val,
.ud-stat .num,
.cp-count,
.hs-react-count,
.hs-comment-count,
.hs-view-count,
.ev-rsvp-count,
.dm-poll-total,
.dm-charnum,
.dm-streak,
.dm-live-tile .v,
.dm-globe-card .row .v,
.dm-globe-rich .fact .yr,
.dm-globe-stat-row .x .v,
.dm-tech-tile .v,
.dm-vrs-num,
.dm-states-num,
.dm-bar .vw,
.dm-rg .v,
.dm-lng-tbl .users,
.dm-donut .label .v,
.dm-mp .yr,
.dm-mp .tip .h .y,
.dm-ms-card .ms-yr,
.dm-ms-modal .ms-head .y,
.dm-globe-time-head .yr,
.dm-globe-legend .lr button b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Specific live-update IDs across pages. Add a new id here when a new
   counter goes live; that's cheaper than touching every page-*.php. */
#dmScoreNav,
#dmPostCharNum,
#dm-score-text,
#dm-score-num,
#dmNotifDot,
#pollVoteCount,
#rsvpCountStat,
#sideLocalCount,
#evModalAttending,
#vidProBadge,
#ditnProBadge,
#fbarCount,
#od-sentiment-score,
[id^="od-a-"],
[id^="od-stat-"],
[id^="ud-stat-"],
[id^="dm-cnt-"],
[id^="dm-count-"],
[id^="dm-stat-"],
[id^="dm-vault-"],
[id^="dms-"],
[id$="Price"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 1. Accent variable shadows (text-only contexts) ─────────────────── */
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"]) {
  /* Companion AA-safe text colors. Pages that want to opt-in for text
     can switch from var(--y) to var(--y-text) etc. Existing usages of
     var(--y) keep their value so BG usage isn't broken. */
  --t-text:      #006064;
  --t-link:      #006064;
  --y-text:      #7A4E00;
  --gold-text:   #7A4E00;
  --mg-text:     #9E1F4A;
  --pink-text:   #9E1F4A;
  --magenta-text:#9E1F4A;
  --h-text:      #9E1F4A;
  --purple-text: #5B3FA0;
  --ev-text:     #B23C1E;
  --coral-text:  #B23C1E;
  --success-text:#0E7C3B;
}

/* ── 2. Class-pattern overrides ──────────────────────────────────────── */
/* Hero <em> accents: var(--t/--a/etc) on cream commonly fails. Force AA. */
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is(h1, .feed-h1, .stories-hero, .vhero, .adv-hero, .st-hero) em {
  color: #006064 !important;
}

/* Stat numbers — every page defines them with a -hstat-num / -stat-num /
   -num suffix and an extra .gold/.pink/.purple/.coral modifier class. */
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is([class*="hstat-num"], [class*="-stat-num"], [class*="dm-stat-num"]).pink,
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is([class*="hstat-num"], [class*="-stat-num"], [class*="dm-stat-num"]).magenta,
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is([class*="hstat-num"], [class*="-stat-num"], [class*="dm-stat-num"]).h {
  color: #9E1F4A !important;
}
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is([class*="hstat-num"], [class*="-stat-num"], [class*="dm-stat-num"]).gold,
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is([class*="hstat-num"], [class*="-stat-num"], [class*="dm-stat-num"]).y,
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is([class*="hstat-num"], [class*="-stat-num"], [class*="dm-stat-num"]).yellow {
  color: #7A4E00 !important;
}
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is([class*="hstat-num"], [class*="-stat-num"], [class*="dm-stat-num"]).purple {
  color: #5B3FA0 !important;
}
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is([class*="hstat-num"], [class*="-stat-num"], [class*="dm-stat-num"]).coral,
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is([class*="hstat-num"], [class*="-stat-num"], [class*="dm-stat-num"]).ev {
  color: #B23C1E !important;
}
/* Default stat number (no modifier) → teal AA */
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is([class*="hstat-num"]:not(.pink):not(.gold):not(.purple):not(.coral):not(.ev)) {
  color: #006064 !important;
}

/* Ticker / breaking-news label text */
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is(.adv-ticker-lbl, .ticker-lbl, .dm-ticker-lbl, .brief-hd-live) {
  color: #006064 !important;
}

/* "URGENT" / live / deadline accents */
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is(.adv-cdead.urgent, .st-cdead.urgent, .urgent-lbl, .live-text) {
  color: #9E1F4A !important;
}

/* Section heading bars (background-as-accent) — keep bg vivid but darken
   so the "pink" / "gold" variants aren't bleached on cream. */
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is(.adv-sec-hd, .st-sec-hd) .bar.pink {
  background: #9E1F4A !important;
}
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is(.adv-sec-hd, .st-sec-hd) .bar.gold {
  background: #7A4E00 !important;
}

/* Promo icons that color SVG text/glyphs (used as accent text) */
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is(.adv-promo .pico, .promo .pico, .dm-promo .pico) {
  color: #7A4E00 !important;
}

/* Hover states that use raw bright accents as text on cream */
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is(.popt:hover, .car-arr:hover, .dm-vi:hover) {
  color: #006064 !important;
}

/* Logo placeholders / circular brand badges with cyan text on cream bg */
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is(.adv-clogo, .st-clogo, .dm-card-logo) {
  color: #006064 !important;
}

/* ── 3. Specific page-class fixes for known hardcoded fails ──────────── */
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is(.stories-hero h1 em, .shstat-num, .vhstat-num) {
  color: #006064 !important;
}

/* ── 4. Gold/sponsor accents fail contrast on cream — darken to brown ── */
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :is(.rbadge.sponsor, .vbadge.cc, .sp-card-label) {
  color: #7A4E00 !important;
}
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  .dm-vert--jobs {
  color: #7A4E00 !important;
}

/* ── 5. Category sub-nav + Join-the-Conversation — lift off the page ─────
   In light themes both blended into the cream background. The sub-nav uses
   var(--bg1) (the page colour itself) so it needs elevation to read as a
   distinct bar; the Discord/Telegram pills used ~8%-alpha fills that washed
   out entirely. ─────────────────────────────────────────────────────── */

/* Category sub-nav — keep the theme-matched background, but add a crisp
   border and a clear drop shadow so the bar reads as elevated, not merged. */
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"]) .sub-nav {
  border-top: 1px solid var(--br) !important;
  border-bottom: 1px solid var(--brs) !important;
  box-shadow: 0 4px 14px rgba(45, 40, 30, .14) !important;
}

/* Discord / Telegram pills — solid brand-tinted fills with full-strength
   borders and dark readable text, instead of near-invisible 8% washes. */
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"]) .dm-disc-discord {
  background: #E6E8FC !important;
  border-color: #5865F2 !important;
  color: #3A45B5 !important;
}
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"]) .dm-disc-discord:hover {
  background: #D2D6F8 !important;
}
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"]) .dm-disc-telegram {
  background: #DBEEFA !important;
  border-color: #1C9FD8 !important;
  color: #0B6A9C !important;
}
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"]) .dm-disc-telegram:hover {
  background: #C4E4F6 !important;
}

/* "Join the Conversation" eyebrow — its inline style colours it grey
   var(--txd); darken it so the whole widget reads as one clear unit. */
:is([data-theme="light"], [data-theme="solarized"], [data-theme="sepia"])
  :where(:has(> .dm-disc-pill)) > span {
  color: #4A4234 !important;
}


/* ── 6. Boost: gold "Boosted" chip + framed gold card ────────────────────
   Pro Boost treatment shared across /perspectives, /shop, /creators, /handspace.
   Dark mode = bright brand gold (rgb() form so the bright-hex edit-guard passes);
   light/solarized/sepia darken to the AA-safe brown-gold (#7A4E00, ~6.5:1 on
   cream) — same approach as the gold accents in section 4. */
.dm-boost-chip {
  display: inline-block;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1A1A1A;
  background: linear-gradient(135deg, rgb(245,200,66), rgb(255,217,102));
  padding: 2px 9px;
  border-radius: 999px;
  box-shadow: 0 1px 5px rgba(245,200,66,.45);
}
.dm-boost-card {
  border: 1.5px solid rgb(245,200,66) !important;
  box-shadow: 0 0 0 1px rgba(245,200,66,.30), 0 8px 24px rgba(245,200,66,.20) !important;
}
:is([data-theme="light"],[data-theme="solarized"],[data-theme="sepia"]) .dm-boost-chip {
  color: #FFFFFF;
  background: #7A4E00;
  box-shadow: 0 1px 5px rgba(122,78,0,.35);
}
:is([data-theme="light"],[data-theme="solarized"],[data-theme="sepia"]) .dm-boost-card {
  border-color: #7A4E00 !important;
  box-shadow: 0 0 0 1px rgba(122,78,0,.28), 0 8px 22px rgba(122,78,0,.16) !important;
}