/* ── CloviScan Accessibility Fixes ─────────────────────────────── */
/* Brand #F43F5E: 3.67:1 on white (FAILS AA), 5.2:1 on dark (passes) */

/* ── Skip link ── */
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 99999;
  background: #F43F5E;
  color: #fff !important;
  padding: .5rem 1.25rem;
  border-radius: .5rem;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: top .2s;
  outline: 3px solid transparent;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.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\:not-sr-only:focus,
.sr-only:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 99999;
  width: auto;
  height: auto;
  padding: .5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: #F43F5E;
  color: #fff;
  border-radius: .5rem;
  font-weight: 700;
  font-size: .95rem;
}

/* ── Focus visible styles ── */
:focus-visible {
  outline: 3px solid #F43F5E;
  outline-offset: 3px;
  border-radius: 3px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #F43F5E;
  outline-offset: 3px;
}

/* ── Brand color contrast fixes ── */
/* #F43F5E on white = 3.67:1 (fails). Fix: use darker rose for light bg text */
[data-theme="light"] .text-brand,
[data-theme="light"] [class*="text-rose-500"],
[data-theme="light"] [class*="text-rose-400"] {
  color: #be123c !important; /* #be123c = 5.74:1 on white - passes AA */
}

/* Brand badge: #f43f5e on rgba(244,63,94,.1) bg = 2.95:1 (fails) → use #be123c = 5.04:1 */
.brand-badge {
  color: #be123c !important; /* 5.04:1 on light badge bg - passes AA */
}
[data-theme="dark"] .brand-badge {
  color: #fb7185 !important; /* 7.5:1 on dark bg - passes AA */
}

/* Muted text on LIGHT bg — ensure minimum 4.5:1 */
/* #475569 = 6.9:1 on white and #f1f5f9 stats-bar bg — passes AA */
[data-theme="light"] .stat-label,
[data-theme="light"] .text-muted-light {
  color: #475569 !important; /* 6.9:1 on f1f5f9 - passes AA */
}
.stat-label {
  color: #475569 !important;
}

/* Muted text on DARK bg — must be light enough */
[data-theme="dark"] .stat-label,
[data-theme="dark"] .muted,
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"] {
  color: #94a3b8 !important; /* 7:1 on #0a0f1e */
}

/* ── Inline link underlines (WCAG 1.4.1) ── */
p a:not(.btn),
li a:not(.btn),
td a:not(.btn),
.prose a:not(.btn),
article a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Contrast fix for .cs-nav-links muted text ── */
[data-theme="dark"] .cs-nav-links a {
  color: #cbd5e1 !important; /* 10:1 on dark nav */
}

[data-theme="light"] .cs-nav-links a {
  color: #374151 !important; /* 9.8:1 on white nav */
}

/* ── Brand badge contrast fix ── */
/* .brand-badge on light bg uses #be123c (5.74:1) — already in main CSS */
/* On dark bg already uses var(--brand) = #F43F5E which is 5.2:1 - ok */

/* ── Fix color-contrast for .cs-logo text on light ── */
[data-theme="light"] .cs-logo {
  color: #1f2937 !important; /* near black */
}

/* ── Fix muted var() text contrast ── */
/* --muted on light = #4b5563 = 7.3:1 on white (OK) */
/* --muted on dark = #9ca3af = 6.3:1 on #0d0509 (OK) */

/* ── Button accessible states ── */
.btn:focus-visible {
  outline: 3px solid #F43F5E;
  outline-offset: 3px;
}

.btn-primary:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* ── Icon-only buttons ── */
[aria-label] {
  /* Ensure aria-label exists on icon buttons - enforced via HTML fixes */
}

/* ── Mobile menu button ── */
#mobile-menu-btn,
.mobile-menu-toggle,
[aria-expanded] {
  /* Must have visible label */
  min-width: 44px;
  min-height: 44px;
}

/* ── Landmark fix: region ── */
/* Content not in landmark regions will be fixed in HTML */

/* ── Color contrast fix for hero stats ── */
/* .stat-label uses --muted which is #4b5563 on light (OK 7.3:1) or #9ca3af on dark (OK 6.3:1) */

/* ── Layer features list items ── */
[data-theme="light"] .layer-features li {
  color: #374151 !important; /* 9.8:1 on white */
}

[data-theme="dark"] .layer-features li {
  color: #cbd5e1 !important; /* 10.3:1 on dark */
}

/* ── Demo item text ── */
[data-theme="light"] .demo-item {
  color: #1f2937 !important;
}

/* ── Score text inside dark circle ── */
.score-denom {
  fill: #94a3b8 !important;
  color: #94a3b8 !important;
}

/* ── Improved touch targets ── */
.btn, button, a {
  min-height: 44px;
  min-width: 44px;
}

.btn-sm {
  min-height: 36px;
}

/* ── Reduced motion support ── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── High contrast mode support ── */
@media (forced-colors: active) {
  .btn-primary {
    border: 2px solid ButtonText;
  }
  .cs-nav {
    border-bottom: 1px solid ButtonText;
  }
}

/* ── Layer quote border visible ── */
[data-theme="dark"] .layer-quote {
  border-left-color: #fb7185 !important;
}

/* ── Fix low-contrast muted nav links in CloviScan dark ── */
[data-theme="dark"] .cs-logo {
  color: #f1f5f9 !important;
}

/* ── Social links in footer ── */
footer a[aria-label] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* ── Fix .mm-label text to be visible ── */
[data-theme="dark"] .mm-label {
  color: rgba(255, 255, 255, 0.87) !important;
}

/* ── Fix score-num contrast ── */
.score-num {
  color: #fcd34d !important;
}

/* ── Stat label contrast fix (platform-theme.css may override --muted) ── */
/* Applied globally, not scoped to data-theme, to override any cascade */
.stat-label {
  color: #475569 !important; /* 6.9:1 on #f1f5f9, 9.4:1 on white - passes AA */
}
[data-theme="dark"] .stat-label {
  color: #9ca3af !important; /* 7.4:1 on dark bg - passes AA */
}

/* ── General muted text contrast override ── */
[data-theme="light"] .text-muted,
[data-theme="light"] .muted {
  color: #4b5563 !important;
}