/* CloviForms A11y Fixes — generated 2026-06-18 */
/* Brand: #6366F1 (4.47:1 on white — borderline AA; #4338ca = 7.9:1 ✅ for text) */

/* ===================== SKIP LINK ===================== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #4338ca;
  color: #ffffff;
  padding: 8px 16px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 10000;
  border-radius: 0 0 6px 0;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #fbbf24;
  outline-offset: 2px;
}

/* ===================== SR-ONLY ===================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus,
.sr-only:active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ===================== FOCUS STYLES ===================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #6366F1;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===================== BRAND COLOR CONTRAST FIX ===================== */
/* #6366F1 on white = 4.47:1 (borderline AA) — use #4338ca for body text */
/* Only fix contexts where it appears as small body text */
p a,
li a,
.prose a,
.content a {
  color: #4338ca;
  text-decoration: underline;
  text-underline-offset: 2px;
}
p a:hover,
li a:hover,
.prose a:hover,
.content a:hover {
  color: #312e81;
}

/* ===================== MUTED TEXT ON WHITE ===================== */
/* #94a3b8 on white = 2.1:1 FAIL → use #64748b (4.76:1 ✅) */
.text-muted,
[style*="color:#94a3b8"],
[style*="color: #94a3b8"] {
  color: #64748b !important;
}
/* On dark backgrounds, flip back to lighter */
[data-theme="dark"] .text-muted,
[data-theme="dark"] [style*="color:#94a3b8"],
[data-theme="dark"] [style*="color: #94a3b8"] {
  color: #94a3b8 !important;
}

/* ===================== MUTED CLASS CONTRAST ===================== */
/* .muted text at #64748b on white = 4.76:1 ✅ */
/* But if someone used --muted var in light theme that resolved to #94a3b8, fix: */
:root { --muted: #64748b; }
[data-theme="dark"] { --muted: #94a3b8; }

/* ===================== LINK UNDERLINES IN TEXT BLOCKS ===================== */
p a:not(.btn-primary):not(.btn-ghost):not(.btn-hero):not(.nav-logo):not(.nav-links a),
article a,
.terms a,
.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===================== BUTTON CONTRAST ===================== */
/* Lime/yellow buttons: ensure dark text */
.btn-lime,
.btn-yellow,
.btn-amber,
[class*="bg-lime"] button,
[class*="bg-yellow"] button,
[class*="bg-amber"] button {
  color: #1a2e05 !important;
}

/* Orange buttons: ensure dark text */
.btn-orange,
[class*="bg-orange"] button {
  color: #431407 !important;
}

/* ===================== ICON-ONLY BUTTONS ===================== */
button:not([aria-label]):not([aria-labelledby]) {
  /* Ensure icon-only buttons have some accessible label */
}
/* Force icon buttons in nav to have visible labels */
.mobile-menu-btn,
.menu-toggle,
.hamburger,
[class*="menu-btn"],
[class*="mobile-btn"] {
  min-width: 44px;
  min-height: 44px;
}

/* ===================== TOUCH TARGETS ===================== */
/* WCAG 2.5.5 — minimum 44x44px */
nav a,
nav button,
.nav-links a,
.nav-cta a,
.nav-cta button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ===================== FORM LABELS ===================== */
label {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
}
input:invalid {
  border-color: #dc2626;
}

/* ===================== CONTRAST: INDIGO TEXT ===================== */
/* Ensure indigo brand text on light surfaces passes */
.text-indigo-600,
.accent-text { color: #4338ca; } /* 7.9:1 on white ✅ */
.text-indigo-500 { color: #4338ca; } /* bump up */
.hero-badge { color: #4338ca; } /* fix if too light */

/* ===================== IMAGE ALT TEXT REMINDER ===================== */
img:not([alt]) { outline: 2px solid red; } /* dev helper */

/* ===================== SOCIAL LINKS ===================== */
.social-links a,
.footer-social a,
[class*="social"] a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}