/* ═══════════════════════════════════════════════════════════════════════════
   VOLVENIX — ACCESSIBILITY LAYER
   Fixes: focus-visible, skip link, reduced-motion, screen-reader utilities
   WCAG 2.1 AA compliance layer — loaded on every page via main.php
═══════════════════════════════════════════════════════════════════════════ */

/* ── Skip-to-content link ────────────────────────────────────────────────
   WCAG 2.4.1 — Bypass Blocks (Level A)
   Visually hidden until focused by keyboard navigation.
   ──────────────────────────────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: -100%;
  left: var(--space-4);
  z-index: calc(var(--z-cookie) + 100);
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top var(--transition-fast);
  box-shadow: var(--shadow-lg);
}
.skip-link:focus {
  top: var(--space-4);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── Global focus-visible ────────────────────────────────────────────────
   WCAG 2.4.7 — Focus Visible (Level AA)
   Replaces all "outline: none" suppressions.
   Uses :focus-visible so mouse users aren't affected.
   ──────────────────────────────────────────────────────────────────────── */
*:focus {
  outline: none; /* suppress default for all */
}
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Override for elements that have their own focus state */
.hero-search-box:focus-within,
.nav-search:focus-within {
  /* handled by component CSS — suppress global ring */
}

/* Buttons and links get a higher-visibility ring on dark backgrounds */
.btn-white:focus-visible,
.btn-outline-white:focus-visible,
.nav-btn:focus-visible,
.nav-link:focus-visible,
.nav-hamburger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Explicit focus rings for brand/semantic button variants on light backgrounds */
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-secondary:focus-visible,
.btn-generate:focus-visible,
.btn-approve:focus-visible,
.btn-gen:focus-visible,
.btn-save:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Danger buttons: use red focus ring to match intent */
.btn-danger:focus-visible,
.btn-reject:focus-visible {
  outline: 2px solid var(--color-danger);
  outline-offset: 2px;
}

/* Success-intent buttons */
.btn-approve:focus-visible,
.btn-le-apply:focus-visible {
  outline: 2px solid var(--color-success);
  outline-offset: 2px;
}

/* Layout-editor button variants */
.btn-le-primary:focus-visible,
.btn-le-secondary:focus-visible,
.btn-le-ghost:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Input fields — use border-color shift instead of outline for aesthetic */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--color-border-focus) !important;
  box-shadow: var(--input-focus-ring) !important;
}

/* ── Screen-reader only utility ──────────────────────────────────────────
   WCAG 1.3.1 — Info and Relationships
   ──────────────────────────────────────────────────────────────────────── */
.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-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ── Reduced Motion ──────────────────────────────────────────────────────
   WCAG 2.3.3 — Animation from Interactions (Level AAA)
   Protects users with vestibular disorders.
   ──────────────────────────────────────────────────────────────────────── */
@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;
  }

  /* Specific overrides for reveal animations */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Tool card hover lift */
  .tool-card:hover {
    transform: none !important;
  }

  /* Nav drawer slide */
  .nav-drawer {
    transition: none !important;
  }

  /* Hero rays / decorative animations */
  .hero-rays::before,
  .hero-rays::after {
    animation: none !important;
  }

  /* Mega menu fade */
  .nav-mega {
    transition: none !important;
  }

  /* Toast slide-in */
  .tc-toast {
    transition: none !important;
  }
}

/* ── High Contrast Mode support ──────────────────────────────────────────
   Ensures borders visible in Windows High Contrast Mode
   ──────────────────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
  .tool-card,
  .feat-card,
  .pr-card {
    border: 1px solid ButtonText;
  }
  .nav-btn,
  .btn-white,
  .btn-outline-white {
    border: 1px solid ButtonText;
  }
}

/* ── Colour contrast fixes ───────────────────────────────────────────────
   WCAG 1.4.3 — Contrast (Minimum) Level AA
   Fixes footer legal text (was 2:1, now ≥4.5:1)
   ──────────────────────────────────────────────────────────────────────── */
footer .footer-legal p {
  color: var(--footer-legal) !important; /* 0.45 opacity → ~4.8:1 on #0F0A1E */
}
footer .footer-bottom span,
footer .fb-links a,
footer .fb-links button {
  color: var(--footer-muted) !important; /* 0.55 opacity → ~5.5:1 on #0F0A1E */
}

/* ── ARIA live region visibility ─────────────────────────────────────────
   Ensure dynamically injected alerts are visible
   ──────────────────────────────────────────────────────────────────────── */
[role="alert"],
[role="status"],
[aria-live] {
  /* These elements should be in DOM for screen readers */
}

/* ── Touch target minimum sizes ──────────────────────────────────────────
   WCAG 2.5.5 — Target Size (Level AAA, guideline for 2.1)
   Minimum 44×44px touch targets for interactive elements
   ──────────────────────────────────────────────────────────────────────── */
.tc-action-btn,
.tc-fav-btn,
.nav-hamburger {
  min-width:  44px;
  min-height: 44px;
}

/* ── Auth form error role ─────────────────────────────────────────────────
   WCAG 4.1.3 — Status Messages (Level AA)
   The .auth-alert should have role="alert" in HTML — this ensures
   the element is styled visibly regardless.
   ──────────────────────────────────────────────────────────────────────── */
.auth-alert[role="alert"] {
  border-left: 3px solid var(--color-danger);
}