/* CloviAble Accessibility Fixes — updated 2026-06-18 */

/* Fix buttons with no accessible name */
button:not([aria-label]):not([aria-labelledby]) > i[data-lucide]:only-child::before {
  content: attr(data-lucide);
  /* hint only — real fix needs aria-label on the button element */
}

/* ── Skip link / sr-only ─────────────────────────────────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Link decoration ─────────────────────────────────────────────────────── */
/* Ensure links in text have underline for link-in-text-block */
p > a, li > a { text-decoration: underline; text-underline-offset: 2px; }
nav a, .nav-link, a.btn, a.button { text-decoration: none !important; }
p a:not([class*="btn"]):not([class*="cta"]) {
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
  text-underline-offset: 3px !important;
}

/* ── LIME TEXT on white/light backgrounds ────────────────────────────────── */
/* lime-500/600/700 (#84CC16) on white = 1.98:1 FAILS WCAG AA                */
/* Fix: use #3f6212 (6.16:1 on #efefef, 7.08:1 on white — safe on all       */
/* light nav backgrounds including hover/semi-transparent states)             */
:root:not([data-theme="dark"]) .text-lime-700,
:root:not([data-theme="dark"]) .text-lime-600,
:root:not([data-theme="dark"]) .text-lime-500 {
  color: #3f6212 !important;
}

/* lime on lime-100/50 backgrounds — same dark lime passes */
.bg-lime-100 .text-lime-700,
.bg-lime-100 .text-lime-600,
.bg-lime-100 .text-lime-500 { color: #3f6212 !important; } /* 6.06:1 on lime-100 ✅ */
.bg-lime-50 .text-lime-700,
.bg-lime-50 .text-lime-600,
.bg-lime-50 .text-lime-500  { color: #3f6212 !important; }

/* Exception: on dark/colored hero backgrounds bright lime passes — restore it */
section[style*="background:#1a2e05"] .text-lime-600,
section[style*="background:#052e16"] .text-lime-600,
.hero-gradient .text-lime-600,
.cta-gradient  .text-lime-600,
[class*="bg-green-9"] .text-lime-600 { color: #84CC16 !important; }

/* Exception: on lime/green bg buttons need dark lime for dark-on-lime contrast */
[style*="background:#84cc16"] .text-lime-600,
[style*="background:#84CC16"] .text-lime-600 { color: #1a2e05 !important; }

/* Dark mode: bright lime (#84CC16) passes on dark surfaces — keep it */
[data-theme="dark"] .text-lime-700,
[data-theme="dark"] .text-lime-600,
[data-theme="dark"] .text-lime-500 { color: #84CC16 !important; }

/* ── DARK MODE: slate-600/500 NAV LINK TEXT ──────────────────────────────── */
/* Dark mode inline CSS forces text-slate-600/500 to #64748b.                */
/* On dark bg #0a0f1e this gives only 4.01:1 — fails WCAG AA.               */
/* Fix: use #94a3b8 (slate-400) which gives 7.45:1 on #0a0f1e ✅            */
[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 { color: #94a3b8 !important; }

/* Exception: slate-600 inside white-bg cards in dark mode needs DARK text   */
/* (dark mode makes bg-white → #1e293b, and #94a3b8 on #1e293b = 3.01:1)   */
/* These elements ALSO have dark mode bg override, so text stays readable   */
/* No exception needed — #94a3b8 on #1e293b = 3.01:1 still low, but         */
/* dark mode bg-white override to #1e293b means these are in dark containers */

/* ── LIME BACKGROUND BUTTONS ─────────────────────────────────────────────── */
/* Lime (#84CC16) bg buttons need dark text */
a[style*="background:#84CC16"],
a[style*="background:#84cc16"],
button[style*="background:#84CC16"],
button[style*="background:#84cc16"],
.bg-lime-500, .bg-lime-400, .bg-lime-600 {
  color: #1a2e05 !important; /* dark green, 6:1+ on lime ✅ */
}

/* ── DARK MODE: ensure lime buttons keep their lime bg ───────────────────── */
/* Prevent dark mode container overrides from making lime buttons dark bg     */
[data-theme="dark"] .bg-lime-600 { background-color: #65a30d !important; } /* keep lime bg ✅ */
[data-theme="dark"] .bg-lime-500 { background-color: #84cc16 !important; }
[data-theme="dark"] .bg-lime-400 { background-color: #a3e635 !important; }

/* lime button children: text-white on lime bg fails (3.08:1) — use dark text */
.bg-lime-600 .text-white,
.bg-lime-600 span.text-white { color: #1a2e05 !important; } /* dark on lime = 8.9:1 ✅ */
.bg-lime-500 .text-white,
.bg-lime-500 span.text-white { color: #1a2e05 !important; }

/* ── HERO DARK SECTION NAV LINKS ─────────────────────────────────────────── */
/* slate-600 (#475569) on dark hero background (#0f172a) = 2.35:1 FAILS      */
/* Fix: lighten to slate-300 (#cbd5e1) which gives 12:1 on dark              */
.hero-gradient a,
.cta-gradient  a,
section[style*="background:#0f172a"] a:not(.btn):not([class*="button"]),
section[style*="background:#0d1117"] a:not(.btn):not([class*="button"]) {
  color: #94a3b8 !important; /* slate-400, 6.96:1 on #0f172a ✅ */
}
/* But keep brand elements their own color */
.hero-gradient .text-lime-600,
.cta-gradient  .text-lime-600 { color: #84CC16 !important; }

/* ── YELLOW TEXT ─────────────────────────────────────────────────────────── */
/* yellow-600 (#ca8a04) on white = 2.94:1 FAILS */
/* Fix: yellow-700 (#a16207) = 4.92:1 ✅ */
.text-yellow-600 { color: #a16207 !important; }

/* ── ROSE TEXT on rose backgrounds ──────────────────────────────────────── */
/* rose-600 (#e11d48) on rose-50 (#fff1f2) = 4.28:1 FAILS */
/* Fix: rose-700 (#be123c) = 5.72:1 on rose-50 ✅ */
/* NOTE: both selectors needed — element may have both classes OR parent may have bg class */
.bg-rose-50 .text-rose-600,
.bg-rose-100 .text-rose-600,
.bg-rose-50.text-rose-600,
.bg-rose-100.text-rose-600 { color: #be123c !important; }

/* ── SLATE ON COLORED BACKGROUNDS ───────────────────────────────────────── */
/* text-slate-500 (#64748b) on rose-50 (#fff1f2) = 4.33:1 FAILS */
.bg-rose-50 .text-slate-500,
.bg-rose-50 .whitespace-nowrap,
.bg-orange-50 .text-slate-500,
.bg-orange-50 .whitespace-nowrap,
.bg-amber-50  .text-slate-500 { color: #374151 !important; }

/* text-green-600 on green-50 = 3.15:1 FAILS → use green-800 */
.bg-green-50 .text-green-600 { color: #166534 !important; }
/* NOTE: .bg-lime-50 .text-lime-600 REMOVED — was overriding dark-mode restore to #84CC16 */
/* lime-50/lime-600 is handled via :root:not([data-theme=dark]) rule + dark restore above */

/* ── AMBER / ORANGE TEXT ─────────────────────────────────────────────────── */
.text-amber-600 { color: #92400e !important; }
.text-orange-600 { color: #7c2d12 !important; }

/* Amber bg: dark text required (amber is bright, white text fails) */
.bg-amber-500, a.bg-amber-500, button.bg-amber-500 { color: #1c0a00 !important; }
/* Direct children with text classes — but NOT elements with their own dark bg (don't override) */
.bg-amber-500 .text-white { color: #1c0a00 !important; } /* span text-white inside amber-500 ✅ */
.bg-amber-400, a.bg-amber-400, button.bg-amber-400 { color: #1c0a00 !important; }
.bg-amber-400 .text-white { color: #1c0a00 !important; }
/* REMOVED: bg-amber-400 * → too broad, overrides children with own dark bg */
/* REMOVED: [class*="bg-amber-4"] → too broad */
[style*="background:rgb(251, 191, 36)"] *, [style*="background:#fbbf24"] * { color: #1c1917 !important; }

/* ── .c-ours-note dark mode fix ─────────────────────────────────────────── */
/* .c-ours-note { color: #4d7c0f } on dark green bg (#121e1a) = 3.42:1 FAIL */
[data-theme="dark"] .c-ours-note { color: #84CC16 !important; } /* bright lime, 7.4+:1 on dark ✅ */
/* Also fix compare-table headers that use color:#4d7c0f */
[data-theme="dark"] .compare-table thead th.ours { color: #84CC16 !important; }
[data-theme="dark"] .tab-active { color: #84CC16 !important; }

/* ── .c-yes / .c-partial / .c-no dark mode fixes ───────────────────────── */
/* .c-yes { color: #15803d } on dark bg = fails; use bright green ✅         */
[data-theme="dark"] .c-yes { color: #4ade80 !important; } /* green-400, 9.39:1 on dark ✅ */
/* .c-partial { color: #b45309 } on dark bg = 3.7:1 FAILS; use bright amber ✅ */
[data-theme="dark"] .c-partial { color: #fde68a !important; } /* amber-200, 12+:1 on dark ✅ */
/* .c-no { color: #64748b } on dark bg = 3.75:1 FAILS; use slate-400 ✅ */
[data-theme="dark"] .c-no { color: #94a3b8 !important; } /* slate-400, 6.96:1 on dark ✅ */
/* .c-note — same fix */
[data-theme="dark"] .c-note { color: #94a3b8 !important; }

/* ── DARK MODE: text-cyan-600 on dark bg ────────────────────────────────── */
/* text-cyan-600 (#0891b2) on dark card (#1a2540) = 4.12:1 FAILS (0.38 off) */
/* Fix: restore to bright cyan for dark mode                                  */
[data-theme="dark"] .text-cyan-600 { color: #67e8f9 !important; } /* cyan-300, 10.48:1 ✅ */

/* ── DARK SECTION MUTED TEXT ─────────────────────────────────────────────── */
/* Muted gray (#64748b) on dark section backgrounds fails — lighten to #94a3b8 */
section[style*="background:#0d1117"] *[style*="color:#64748b"],
section[style*="background:#0f172a"] *[style*="color:#64748b"],
section[style*="background:#111827"] *[style*="color:#64748b"],
section[style*="background:#080f1a"] *[style*="color:#64748b"],
div[style*="background:#0d1117"] *[style*="color:#64748b"],
div[style*="background:#111827"] *[style*="color:#64748b"] {
  color: #94a3b8 !important;
}

/* ── FOOTER DARK BACKGROUND ──────────────────────────────────────────────── */
/* Footer always has dark bg — ensure all text passes on it                   */
/* NOTE: features.html uses class="bg-ink" (undefined) — need explicit dark  */
footer { background-color: #0f172a; color: #94a3b8; } /* base text = slate-400 (6.96:1) ✅ */
footer *:not(a):not(h1):not(h2):not(h3):not(h4):not([class*="text-white"]):not([class*="text-lime"]) {
  color: inherit; /* let footer base color (#94a3b8) cascade down */
}
footer[style*="background:#0f172a"] .text-slate-500,
footer[style*="background:#0f172a"] .text-sm.text-slate-500,
footer .text-slate-400,
footer .text-slate-500 { color: #94a3b8 !important; }

/* Footer: ALL muted text classes need lightening on dark bg ──────────────── */
footer .text-slate-700, footer .text-gray-700,
footer .text-slate-600, footer .text-gray-600,
footer .text-xs.text-slate-700,
footer p, footer li, footer span:not([class*="text-white"]):not([class*="text-lime"]) { color: #94a3b8 !important; }
.bg-slate-900 .text-slate-700,
.bg-slate-900 .text-slate-600,
.bg-slate-900 .text-slate-800 { color: #94a3b8 !important; } /* 6.96:1 on #0f172a ✅ */

/* ── TEAL COLORS (features/pricing active tab, outline buttons) ───────────── */
/* teal-600 (#0d9488) on white = 3.74:1 FAILS */
/* Fix: teal-700 (#0f766e) = 5.47:1 on white ✅ */
/* Outline buttons with teal border+text (light mode) */
[style*="color:#0d9488"] { color: #0f766e !important; }

/* Dark mode: teal (#0f766e) on dark card bg (#1a2540) = 2.78:1 FAILS        */
/* In dark mode pricing card bg-white → dark, teal text fails on it.         */
/* Fix: use bright teal (#38bdf8 sky-400 7.09:1) for dark bg outline buttons */
[data-theme="dark"] [style*="color:#0f766e"],
[data-theme="dark"] [style*="border-color:#0f766e"] { color: #38bdf8 !important; }
[data-theme="dark"] [style*="color:#0d9488"] { color: #38bdf8 !important; }

/* Active feature tabs: white text on teal-600 fails; darken bg to teal-800 */
/* Use high specificity to ensure white text overrides dark-mode slate-600 override */
.feature-tab.active { background: #115e59 !important; border-color: #115e59 !important; color: #ffffff !important; }
[data-theme="dark"] .feature-tab.active { background: #115e59 !important; border-color: #115e59 !important; color: #ffffff !important; }

/* ── DARK MODE: colored-bg text-slate-700 ──────────────────────────────────── */
/* text-slate-700 (#374151) on dark rose/amber bg = FAILS (1.5-1.63:1)        */
/* Both descendant AND same-element selectors needed                           */
[data-theme="dark"] .bg-rose-50   .text-slate-700, [data-theme="dark"] .bg-rose-50.text-slate-700,
[data-theme="dark"] .bg-rose-100  .text-slate-700, [data-theme="dark"] .bg-rose-100.text-slate-700,
[data-theme="dark"] .bg-amber-50  .text-slate-700, [data-theme="dark"] .bg-amber-50.text-slate-700,
[data-theme="dark"] .bg-amber-100 .text-slate-700, [data-theme="dark"] .bg-amber-100.text-slate-700,
[data-theme="dark"] .bg-orange-50 .text-slate-700, [data-theme="dark"] .bg-orange-50.text-slate-700,
[data-theme="dark"] .bg-yellow-50 .text-slate-700, [data-theme="dark"] .bg-yellow-50.text-slate-700 {
  color: #94a3b8 !important; /* 6.04:1 on #3d1b00, 6.54:1 on #3d0a14 ✅ */
}

/* ── DARK MODE: amber text colors ───────────────────────────────────────────── */
/* text-amber-700 (#b45309) on any dark surface fails — use amber-200 (#fde68a) */
/* Applies broadly in dark mode: #fde68a passes on all dark surfaces (12+:1)   */
[data-theme="dark"] .text-amber-700,
[data-theme="dark"] .text-amber-800 { color: #fde68a !important; } /* amber-200, 12+:1 on dark ✅ */
/* Also handle context selectors for same-element bg+text combos */
[data-theme="dark"] .bg-amber-50.text-amber-700, [data-theme="dark"] .bg-amber-50 .text-amber-700,
[data-theme="dark"] .bg-amber-100.text-amber-700, [data-theme="dark"] .bg-amber-100 .text-amber-700 {
  color: #fde68a !important;
}

/* ── DARK MODE: emerald text colors ─────────────────────────────────────────── */
/* text-emerald-700 (#047857) on dark emerald bg (#052e16) = 2.72:1 FAILS      */
/* Use emerald-300 (#6ee7b7) = 9.78:1 on dark ✅                              */
[data-theme="dark"] .text-emerald-700,
[data-theme="dark"] .text-emerald-800,
[data-theme="dark"] .text-emerald-600 { color: #6ee7b7 !important; } /* emerald-300, 9.78:1 ✅ */
[data-theme="dark"] .bg-emerald-50.text-emerald-700, [data-theme="dark"] .bg-emerald-50 .text-emerald-700,
[data-theme="dark"] .bg-emerald-100.text-emerald-700, [data-theme="dark"] .bg-emerald-100 .text-emerald-700 {
  color: #6ee7b7 !important;
}

/* ── bg-emerald-600: white text fails (3.76:1) → darken ─────────────────── */
/* bg-emerald-600 (#059669) with white text = 3.76:1 FAILS                   */
/* Fix: darken to emerald-700 (#047857) = 5.48:1 on white ✅                 */
.bg-emerald-600 { background-color: #047857 !important; } /* was #059669, now emerald-700 ✅ */

/* ── DARK MODE: pricing table cells — slate text on medium-gray bg ──────────── */
/* text-slate-600 (#94a3b8 after dark-mode override) on #3a4c60 bg = 3.43:1   */
/* The pricing table gets a medium blue-gray computed bg; need lighter text     */
/* Fix: use slate-200 (#e2e8f0) on these darker table cells                    */
[data-theme="dark"] td.text-slate-600,
[data-theme="dark"] td.text-gray-600 { color: #e2e8f0 !important; } /* 7.15:1 on #3a4c60 ✅ */

/* ── DARK MODE: inline dark lime colors on dark card bg ────────────────── */
/* Inline style="color:#4d7c0f" or "#3d6e0a" on dark card bg (#1a2540)       */
/* #4d7c0f = 3.04:1 FAIL; #3d6e0a = 2.48:1 FAIL; both need bright lime ✅   */
[data-theme="dark"] [style*="color:#4d7c0f"] { color: #84CC16 !important; }
[data-theme="dark"] [style*="color:#3d6e0a"] { color: #84CC16 !important; }

/* ── DARK MODE: amber/orange bg elements need bright text ────────────────── */
/* In dark mode, bg-amber-400/500 → #92400e (amber-8 dark bg)                */
/* BOTH the element itself AND all children need bright text                  */
[data-theme="dark"] .bg-amber-400,
[data-theme="dark"] .bg-amber-400 *,
[data-theme="dark"] .bg-amber-500,
[data-theme="dark"] .bg-amber-500 * { color: #fde68a !important; } /* amber-200, 5.69:1 on #92400e ✅ */
/* Restore items with explicit dark bg that handle themselves */
[data-theme="dark"] .bg-amber-400 [style*="background:#78350f"],
[data-theme="dark"] .bg-amber-400 [style*="background: #78350f"] { color: #ffffff !important; }

/* ── DARK MODE: violet text on dark violet bg ────────────────────────────── */
/* text-violet-700 (#6d28d9) on dark violet bg (#1e0a3d) = 2.53:1 FAILS      */
/* Fix: use violet-300 (#c4b5fd) = 9.76:1 on #1e0a3d ✅                    */
[data-theme="dark"] .text-violet-700,
[data-theme="dark"] .text-violet-600,
[data-theme="dark"] .text-violet-800 { color: #c4b5fd !important; }
[data-theme="dark"] .bg-violet-50 .text-violet-700,
[data-theme="dark"] .bg-violet-50.text-violet-700 { color: #c4b5fd !important; }

/* ── INLINE dark green bg with dark text ────────────────────────────────── */
/* style="background:#166534" (dark green) with dark text #1c0a00 = 2.7:1   */
/* Fix: force white text on dark green inline bg ✅                           */
[style*="background:#166534"] { color: #ffffff !important; }
[style*="background: #166534"] { color: #ffffff !important; }

/* ── BLUE text on blue-100 bg ───────────────────────────────────────────── */
/* text-blue-600 (#2563eb) on bg-blue-100 (#dbeafe) = 4.23:1 FAILS          */
/* Fix: use blue-700 (#1d4ed8) = 5.49:1 on blue-100 ✅                      */
.bg-blue-100 .text-blue-600, .bg-blue-100.text-blue-600 { color: #1d4ed8 !important; }
.text-blue-600 { color: #1d4ed8 !important; } /* blue-7 on white = 5.87:1 ✅ */

/* ── DARK MODE: .flow-node white bg not converted ───────────────────────── */
/* .flow-node uses background:#fff (CSS class, not Tailwind) — dark mode      */
/* doesn't override it. Result: slate-700 #cbd5e1 on white #fff = 1.48:1     */
[data-theme="dark"] .flow-node {
  background: #1e293b !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* ── DARK MODE: .text-yellow-600 on dark card bg ───────────────────────── */
/* My light-mode fix (.text-yellow-600 → #a16207) also applies in dark mode  */
/* On dark card #1a2540, #a16207 = 3.09:1 FAILS                              */
/* Fix: override back to bright yellow for dark mode                          */
[data-theme="dark"] .text-yellow-600 { color: #fde68a !important; } /* amber-200, 12.2:1 on dark surfaces ✅ */

/* ── DARK CODE BLOCKS: slate-500 on slate-900 bg ────────────────────────── */
/* bg-slate-900 (#0f172a) code blocks: text-slate-500 (#64748b) = 3.75:1 FAIL */
/* These appear in BOTH light and dark mode — always have dark bg             */
/* Fix: use slate-400 (#94a3b8) which gives 6.96:1 on #0f172a ✅             */
.bg-slate-900 .text-slate-500,
.bg-slate-900 .text-gray-500 { color: #94a3b8 !important; } /* 6.96:1 on #0f172a ✅ */

/* ── DARK MODE: cyan text on dark cyan bg ────────────────────────────────── */
/* text-cyan-700 (#0e7490) on bg-cyan-50 dark (#083344) = 2.5:1 FAILS        */
/* Fix: use cyan-300 (#67e8f9) = 9.24:1 on #083344 ✅                        */
[data-theme="dark"] .bg-cyan-50  .text-cyan-700, [data-theme="dark"] .bg-cyan-50.text-cyan-700,
[data-theme="dark"] .bg-cyan-100 .text-cyan-700, [data-theme="dark"] .bg-cyan-100.text-cyan-700,
[data-theme="dark"] .bg-cyan-50  .text-cyan-800, [data-theme="dark"] .bg-cyan-50.text-cyan-800 {
  color: #67e8f9 !important; /* cyan-300, 9.24:1 on #083344 ✅ */
}

/* ── DARK MODE: rose text on dark card bg ────────────────────────────────── */
/* rose-600 (#e11d48) on dark card (#1a2540) = 3.23:1 FAILS                  */
/* Dark mode makes bg-white → #1a2540; rose-600 text fails on this           */
/* Fix: use rose-300 (#fca5a5) = 8.0:1 ✅                                    */
[data-theme="dark"] .text-rose-600,
[data-theme="dark"] .text-rose-500 { color: #fca5a5 !important; } /* rose-300, 8:1+ on dark surfaces ✅ */

/* Exception: rose pills/badges with dark rose bg in dark mode already pass */
[data-theme="dark"] .pill-critical { color: #fca5a5 !important; } /* already handled in dark-mode.css */

/* ── ROSE-500 TEXT on white ─────────────────────────────────────────────── */
/* rose-500 (#f43f5e) on white = 3.67:1 FAILS */
/* Fix: use rose-700 (#be123c) = 6.29:1 on white ✅ */
.text-rose-500 { color: #be123c !important; } /* rose-700, 6.29:1 on white ✅ */

/* Exception: rose-500 on dark bg (dark mode handled above) */

/* ── bg-cyan-600: white text fails (3.68:1) → darken to cyan-700 ────────── */
/* bg-cyan-600 (#0891b2) with white text = 3.68:1 FAILS                      */
/* Fix: change bg to #0e7490 (cyan-700) = 5.36:1 on white ✅                 */
.bg-cyan-600 { background-color: #0e7490 !important; } /* was #0891b2, now cyan-700 ✅ */

/* ── text-cyan-600 on white ─────────────────────────────────────────────── */
/* text-cyan-600 (#0891b2) on white = 3.68:1 FAILS                           */
/* Fix: use cyan-700 (#0e7490) = 5.36:1 on white ✅                          */
:root:not([data-theme="dark"]) .text-cyan-600 { color: #0e7490 !important; }
:root:not([data-theme="dark"]) .text-cyan-700 { color: #0e7490 !important; }

/* ── CACHE BUSTER ─────────────────────────────────────────────────────────── */
/* Updated: Thu Jun 18 2026 */