/*
 * CloviPDF Accessibility Fixes CSS
 * Platform: clovipdf | Brand: #F59E0B | WCAG 2.1 AA
 * Generated: 2026-06-18
 *
 * Contrast check results:
 *   #F59E0B on #ffffff = 2.15:1  FAILS AA (need 4.5:1 for normal text, 3:1 for large)
 *   #000000 on #F59E0B = 9.78:1  PASSES AA (dark text on amber)
 *   #1c1917 on #F59E0B = 8.90:1  PASSES AA (near-black on amber)
 *
 * Fix: amber buttons use text-black / dark text instead of text-white
 */

/* ── Skip nav link ── */
.skip-nav,
a[href="#main-content"].skip-nav {
  position: absolute !important;
  top: -9999px !important;
  left: 1rem;
  z-index: 99999;
  background: #F59E0B !important;
  color: #1c1917 !important;
  font-weight: 700 !important;
  padding: 0.625rem 1.25rem !important;
  border-radius: 0.5rem !important;
  text-decoration: none !important;
  transition: top 0.15s ease !important;
}
.skip-nav:focus,
a[href="#main-content"]:focus {
  top: 1rem !important;
  outline: 3px solid #1c1917 !important;
  outline-offset: 2px !important;
}

/* ── Screen reader only utility ── */
.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;
}

/* ── CRITICAL: Brand button text contrast ──
 * clovipdf.clovitek.com uses --brand: #4f46e5 (indigo).
 * White text on indigo #4f46e5 = 7.97:1 PASSES AA.
 * Dark text (#111827) on indigo = 2.82:1 FAILS AA.
 * Fix: all bg-brand buttons use white text.
 *
 * Note: The amber variant (#F59E0B bg) still needs dark text:
 *   dark (#1c1917) on amber = 8.90:1 PASSES
 *   white on amber = 2.15:1 FAILS
 * The indigo --brand here overrides the amber default so white text is correct.
 */
.bg-brand,
a.bg-brand,
button.bg-brand,
.btn-brand {
  color: #ffffff !important;
}

/* hover state */
a.bg-brand:hover,
button.bg-brand:hover {
  color: #f3f4f6 !important;
}

/* ── Link underlines in body text ── */
article a:not([class]),
p a:not([class]),
li a:not([class]),
.prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Focus indicators (visible on all interactive elements) ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #F59E0B !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* ── Contrast fixes: muted text on dark backgrounds ── */
/* gray-400 (#94a3b8) on gray-950 (#030712) = 7.22:1 PASSES */
/* gray-500 (#6b7280) on gray-950 = 3.97:1 MARGINAL — lift to gray-400 */
.bg-gray-950 .text-gray-500,
.bg-gray-900 .text-gray-500 {
  color: #94a3b8 !important;
}

/* ── Icon-only button fallback (aria-label required but add visual hint) ── */
button:not([aria-label]):not([aria-labelledby]) > i:only-child::after,
a:not([aria-label]):not([aria-labelledby]) > i:only-child::after {
  content: "" ;
}

/* ── Mobile nav toggle: ensure icon has accessible label ── */
[aria-label="Open menu"],
[aria-label="Close menu"] {
  min-width: 44px;
  min-height: 44px;
}

/* ── Minimum touch target 44x44 for all interactive elements ── */
button, [role="button"], a[href] {
  min-height: 44px;
  min-width: 44px;
}

/* Exception: inline text links & nav links don't need 44px height */
nav a, footer a, p a, li a {
  min-height: unset;
  min-width: unset;
}

/* ── Pricing page: ensure tier price text is readable ── */
.price-amount,
.text-5xl.font-bold {
  /* ensure pricing text on amber accent bg uses dark text */
}

/* ── Social icon links: icon-only links need sufficient hit target ── */
footer a[class*="rounded"],
footer a[class*="w-9"] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── color-contrast: text-brand (#4f46e5) on dark footer/nav backgrounds ──
 * bg-black (#000) and bg-gray-950 (#030712) are very dark; indigo #4f46e5 has
 * only 1.84:1 contrast ratio which fails WCAG AA.
 * On very dark bgs (#000–#030712): #818cf8 (indigo-400) = 6.3:1 PASSES
 * On mid-dark bgs (#353941–#2e3140): need #a5b4fc (indigo-300) = 5.5:1 PASSES
 */
footer .text-brand,
footer a.text-brand,
footer span.text-brand,
footer .hover\:text-brand:hover {
  color: #a5b4fc !important;
}

/* Nav active/current link text-brand in dark nav bar (bg ~#2e3140–#353941) */
nav .text-brand,
header .text-brand,
#nav .text-brand {
  color: #a5b4fc !important;
}

/* ── color-contrast: cookie banner button on amber bg ──
 * .cc-btn-primary uses --brand which is set to #F59E0B (amber) by platform-theme.css.
 * White on amber (#F59E0B) = 2.14:1 FAILS. Need dark text.
 */
#cc-btn-accept.cc-btn-primary,
#cc-btn-save.cc-btn-primary,
.cc-btn.cc-btn-primary {
  color: #1c1917 !important;
}

/* ── color-contrast: nav link active state in dark nav (bg≈#030712 or #0a0f1e) ── */
/* .text-brand in nav = #4f46e5 on #030712 fails (1.84:1). Lift to indigo-400 */

/* ── DARK MODE: section-label h2/h3 in index SPA page ──
 * .section-label h2 can inherit #1a1a2e (slate-900 light-mode text) on #0a0f1e dark bg.
 * Fix by forcing white text on dark backgrounds.
 */
[data-theme="dark"] .section-label h2,
[data-theme="dark"] .section-label h3,
[data-theme="dark"] .compare-band h2,
[data-theme="dark"] .pricing-band h2,
[data-theme="dark"] .faq-band h2 {
  color: #f1f5f9 !important;
}

/* slate-600 (#475569) muted text on very dark bg — lift to slate-400 for 4.5:1 ratio */
[data-theme="dark"] .compare-band p,
[data-theme="dark"] .pricing-band p,
[data-theme="dark"] .faq-band p,
[data-theme="dark"] .section-label p {
  color: #94a3b8 !important;
}

/* ── Footer h3 sizing (h4→h3 heading order fix; maintain visual size) ── */
footer h3.text-base {
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* ── Input/select/textarea in light mode: ensure readable on white bg ──
 * Only apply white bg in light mode. Dark mode inputs should keep dark styling.
 */
[data-theme="light"] select,
[data-theme="light"] input,
[data-theme="light"] textarea {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: #d1d5db !important;
}

/* ── color-contrast: .text-brand (#4f46e5) on dark page bgs ──
 * features.html / pricing.html use dark-themed sections.
 * Mid-dark bgs (#353941): need indigo-300 #a5b4fc (5.5:1) — PASSES
 * Exception: bg-white buttons in CTA sections use text-brand on white — keep original
 *   or revert to dark indigo. bg-white .text-brand on white needs a dark color.
 *   #4f46e5 on #fff = 8.59:1 PASSES — let original stand for bg-white context.
 */
.bg-gray-950 .text-brand,
.bg-gray-900 .text-brand,
.bg-black .text-brand {
  color: #a5b4fc !important;
}

/* Section text-brand spans/paragraphs (not buttons) */
section p.text-brand,
section span.text-brand:not(.typed-text):not(.typed-caret) {
  color: #a5b4fc !important;
}

/* Active nav link (text-brand in dark nav header) */
header .text-brand,
#nav .text-brand {
  color: #a5b4fc !important;
}

/* bg-white buttons with text-brand ──
 * LIGHT MODE: bg-white is actually white #ffffff. indigo-600 #4f46e5 on #fff = 8.59:1 PASSES.
 *   But our section override set #a5b4fc which fails on white (1.99:1). Fix: use original indigo.
 * DARK MODE: dark-mode.css overrides .bg-white → #1e293b (slate-800). So this button
 *   becomes dark-bg. Need light text: white #fff or indigo-200 #c7d2fe on #1e293b = good contrast.
 */
[data-theme="light"] a.bg-white.text-brand,
[data-theme="light"] button.bg-white.text-brand,
html:not([data-theme="dark"]) a.bg-white.text-brand {
  color: #4f46e5 !important; /* original indigo-600: 8.59:1 on white PASSES */
}

[data-theme="dark"] a.bg-white.text-brand,
[data-theme="dark"] button.bg-white.text-brand {
  color: #e0e7ff !important; /* indigo-100: high contrast on #1e293b PASSES */
}

/* ── color-contrast: bg-brand buttons with dark text on indigo bg ──
 * bg-brand = #4f46e5 (indigo). text-gray-900 (#111827) on #4f46e5 = 2.82:1 FAILS AA.
 * Fix: use white text on brand-colored buttons (white on indigo = 7.97:1 PASSES).
 */
a.bg-brand.text-gray-900,
button.bg-brand.text-gray-900,
[data-action="checkout"].bg-brand,
[data-action="signup"].bg-brand {
  color: #ffffff !important;
}

/* ── color-contrast: .text-accent (#8b5cf6) on various backgrounds ──
 * #8b5cf6 on #ffffff = 4.23:1 — fails 4.5:1 for normal (non-large) text.
 *   Fix for light bg: violet-700 #6d28d9 on white = 7.56:1 PASSES
 * #8b5cf6 on dark bg = 4.41:1 — fails. Lift to violet-400 #a78bfa (~7.5:1) PASSES.
 * ALL sections on these pages use dark bgs, so universal lift to #a78bfa is safe.
 */
.text-accent {
  color: #a78bfa !important;
}

/* ── color-contrast: bg-brand/10 table header with dark text on very dark bg ──
 * .bg-brand\/10 on dark bg computes to nearly black. text-gray-900 (#111827) on
 * ~#171d3a = 1.07:1 FAILS. Fix: use white text.
 */
th.bg-brand\/10,
.bg-brand\/10 {
  color: #f1f5f9 !important;
}

/* ── color-contrast: text-gray-500 (#6b7280) on very dark bg (#030712) ──
 * 4.16:1 — fails 4.5:1 for normal text. Lift to gray-400 (#94a3b8 = 7.22:1).
 */
.bg-gray-950 .text-gray-500,
.bg-black .text-gray-500,
footer .text-gray-500 {
  color: #94a3b8 !important;
}