/* ============================================================
   XUNTU — Accessibility Stylesheet
   Applied via JS when user activates accessibility modes.
   ============================================================ */

/* ── High contrast mode ──────────────────────────────────────────── */
body.a11y-high-contrast {
  --clr-primary:    #00aa55 !important;
  --clr-text-dark:  #000000 !important;
  --clr-text-muted: #000000 !important;
  --clr-border:     #000000 !important;
  --clr-off-white:  #ffffff !important;
  --clr-bg-light:   #f0f0f0 !important;

  background:  #ffffff !important;
  color:       #000000 !important;
}
body.a11y-high-contrast a                  { color: #00aa55 !important; text-decoration: underline !important; }
body.a11y-high-contrast .btn-primary,
body.a11y-high-contrast .btn-gold          { background: #000000 !important; color: #ffffff !important; border-color: #000000 !important; }
body.a11y-high-contrast .navbar,
body.a11y-high-contrast .site-header       { background: #000000 !important; }
body.a11y-high-contrast .navbar-nav .nav-link { color: #ffffff !important; }
body.a11y-high-contrast .site-footer       { background: #111 !important; }
body.a11y-high-contrast .hero-section      { background: #000 !important; }
body.a11y-high-contrast .top-bar           { background: #111 !important; }
body.a11y-high-contrast .card,
body.a11y-high-contrast .project-card,
body.a11y-high-contrast .news-card,
body.a11y-high-contrast .priority-card     { border: 2px solid #000 !important; }
body.a11y-high-contrast .badge             { border: 1px solid currentColor !important; }

/* ── Grayscale mode ──────────────────────────────────────────────── */
body.a11y-grayscale {
  filter: grayscale(100%);
}

/* ── Underline links mode ────────────────────────────────────────── */
body.a11y-underline-links a {
  text-decoration: underline !important;
}

/* ── Text size adjustments ───────────────────────────────────────── */
body.a11y-text-xl { font-size: 1.125rem; }
body.a11y-text-lg { font-size: 1.0625rem; }
body.a11y-text-sm { font-size: 0.875rem; }
body.a11y-text-xs { font-size: 0.8125rem; }

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.001ms !important;
    animation-iteration-count: 1       !important;
    transition-duration:       0.001ms !important;
    scroll-behavior:           auto    !important;
  }
  .project-card:hover,
  .news-card:hover,
  .priority-card:hover,
  .event-card:hover {
    transform: none !important;
  }
  .project-card-img img,
  .news-card-img img {
    transition: none !important;
  }
  [data-aos] {
    opacity:   1       !important;
    transform: none    !important;
    transition: none   !important;
  }
}

/* ── Focus indicators ────────────────────────────────────────────── */
:focus-visible {
  outline:        3px solid #B8740A;
  outline-offset: 3px;
  border-radius:  2px;
}

/* Enhance Bootstrap focus ring */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline:        3px solid #B8740A !important;
  outline-offset: 3px              !important;
  box-shadow:     none             !important;
}

/* ── Visible focus for keyboard nav ──────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline:        3px solid #B8740A;
  outline-offset: 3px;
}

/* ── Form validation accessible colours ─────────────────────────── */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color:  #cc0000;
  background-image: none;
}
.invalid-feedback {
  color:     #cc0000;
  font-size: .8rem;
  font-weight: 600;
}
.valid-feedback {
  color:     #006b3a;
  font-size: .8rem;
}

/* ── Screen reader only ──────────────────────────────────────────── */
.sr-only,
.visually-hidden {
  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;
}
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width:    1px      !important;
  height:   1px      !important;
  overflow: hidden   !important;
  clip:     rect(0,0,0,0) !important;
}

/* ── Skip link ───────────────────────────────────────────────────── */
.skip-link:focus {
  top:        0;
  outline:    3px solid #B8740A;
  outline-offset: 0;
  z-index:    9999;
  font-size:  1rem;
  padding:    .75rem 1.5rem;
}

/* ── ARIA live region placeholder ────────────────────────────────── */
.live-region {
  position: absolute;
  left:     -9999px;
  width:    1px;
  height:   1px;
  overflow: hidden;
}

/* ── Accessible modal ────────────────────────────────────────────── */
.modal-header .btn-close:focus-visible {
  outline:        3px solid #B8740A;
  outline-offset: 3px;
}
.modal[aria-hidden="false"] {
  display: flex !important;
  align-items: center;
}

/* ── Colour contrast helpers ─────────────────────────────────────── */
.text-contrast-gold { color: #8A5608; } /* darker gold for white bg — 4.6:1 */

/* ── No-JS fallback ──────────────────────────────────────────────── */
.no-js .accessibility-toolbar { display: none !important; }
.no-js [data-aos]              { opacity: 1 !important; transform: none !important; }
