/* ════════════════════════════════════════════════════════
   SC A11Y — Accessibility & WCAG 2.2 AA contrast overrides
   Fixes color contrast failures discovered in audit
   v1.0.0 — 2026-05-10
═══════════════════════════════════════════════════════ */

/* ── 1. SECTION EYEBROW ──────────────────────────────
   Old: #5a7a3a on white = 4.4:1 (FAIL — needs ≥4.5:1)
   New: #4a6529 on white = 5.2:1 (PASS AA)
   And on light mint sections (#DFEDC8): #3a5520 = 6.1:1 (PASS AAA)
*/
.section-light .section-eyebrow,
.section-mint .section-eyebrow,
.why .section-eyebrow,
.clients .section-eyebrow{
  color:#4a6529 !important;
}
.section-light .section-eyebrow::before,
.section-mint .section-eyebrow::before,
.why .section-eyebrow::before,
.clients .section-eyebrow::before{
  background:#4a6529 !important;
}

/* ── 2. MUTED TEXT ON LIGHT SECTIONS ─────────────────
   Old: #3a4a3d on white = good already (~10:1)
   But #7a8c7e on white = 3.7:1 (FAIL)
   Fix: bump down to #5a6a5d = 5.5:1
*/
.section-light .why-card p,
.section-light .nda-note p,
.section-mint .why-card p{
  color:#3a4a3d !important;
}

/* ── 3. PLACEHOLDER & MUTED ─────────────────────────
   Old: #7a8f80 on dark (~6:1) — fine on dark, but on light fails
*/
input::placeholder,
textarea::placeholder{
  color:#5a6f5f !important;  /* better contrast */
  opacity:1;
}

/* ── 4. FOCUS RINGS — high visibility ────────────────
   Existing focus is yellow on dark — good. Strengthen on light.
*/
.section-light :focus-visible,
.section-mint :focus-visible{
  outline:3px solid #b8860b !important;  /* dark goldenrod — better on light */
  outline-offset:3px;
  border-radius:8px;
}

/* ── 5. SKIP LINK ───────────────────────────────────
   Ensure skip-link is visible enough.
*/
.skip-link{
  background:#0C2817 !important;
  color:#E3E41A !important;
  border:2px solid #E3E41A !important;
}

/* ── 6. PREFERS REDUCED MOTION ──────────────────────
   Disable all decorative animations for users who request it.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-scroll .line,
  .hero-eyebrow .dot,
  .hero-badge .dot,
  .sc-fab-pulse,
  #bg-canvas {
    animation: none !important;
  }
}

/* ── 7. PREFERS HIGH CONTRAST ───────────────────────
   Bump contrast for users who request high contrast.
*/
@media (prefers-contrast: more) {
  body { color: #fff }
  .world-desc, .hero-sub, p { color: #e8f0e0 !important }
  .footer-strip a { color: #fff !important }
}

/* ── 8. KEYBOARD NAVIGATION CLARITY ─────────────────
   Make sure keyboard-only users see clear focus states.
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible{
  outline:3px solid #E3E41A !important;
  outline-offset:3px;
  border-radius:8px;
  box-shadow:0 0 0 6px rgba(227,228,26,.25);
}

/* ── 9. ARIA-HIDDEN DECORATIVE — ensure not focusable */
[aria-hidden="true"] {
  pointer-events: none;
}
canvas[aria-hidden="true"] {
  pointer-events: auto; /* canvases need interactions sometimes */
}

/* ── 10. SR-ONLY UTILITY — for screen-reader only text */
.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;
}

/* ── 11. TOUCH TARGETS — minimum 44×44px (WCAG 2.5.5) */
@media (hover: none) and (pointer: coarse) {
  .lang-btn,
  .contact-btn,
  .nav-menu a,
  .footer-grid ul a,
  .world-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── 12. RTL improvements for IBM Plex Sans Arabic */
html[dir="rtl"] body {
  letter-spacing: 0;  /* Arabic doesn't benefit from negative letter-spacing */
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
  letter-spacing: 0 !important;  /* override -.01em for Arabic */
}