/**
 * NDIS Theme — accessibility.css
 * WCAG 2.1 AA compliance layer.
 * Loaded after theme.css. Only accessibility-specific rules here.
 */

/* ==========================================================================
   1. SKIP LINK — WCAG 2.4.1
   ========================================================================== */

.skip-link {
   position:   absolute;
   top:        var(--space-2);
   left:       var(--space-2);
   z-index:    9999;
   padding:    var(--space-2) var(--space-4);
   background: var(--clr-primary);
   color:      var(--clr-white);
   font-weight: var(--fw-semibold);
   border-radius: var(--border-radius);
   text-decoration: none;

   /* Hidden until focused */
   transform: translateY(-200%);
   transition: transform 0.2s ease;
}

.skip-link:focus {
   transform: translateY(0);
   outline:   3px solid var(--clr-accent);
   outline-offset: 2px;
}


/* ==========================================================================
   2. FOCUS RING — WCAG 2.4.7
   WCAG requires visible focus on ALL interactive elements.
   Bootstrap's default is insufficient — this replaces it.
   ========================================================================== */

:focus-visible {
   outline:        3px solid var(--clr-accent);
   outline-offset: 2px;
   border-radius:  var(--border-radius);
}

/* Remove the browser default only when our custom ring is active */
:focus:not(:focus-visible) {
   outline: none;
}

/* Ensure links inside dark backgrounds get a light focus ring */
.site-header :focus-visible,
.main-nav :focus-visible,
.site-footer :focus-visible {
   outline: 3px solid var(--clr-white);
   outline-offset: 2px;
}


/* ==========================================================================
   3. COLOUR CONTRAST OVERRIDES
   Verify all combinations at https://webaim.org/resources/contrastchecker/
   Minimum ratio: 4.5:1 for normal text, 3:1 for large text (WCAG 1.4.3)
   ========================================================================== */

/* Muted text must still pass 4.5:1 on white background.
   var(--clr-grey-600) = #6C757D on white = 4.48:1 — borderline.
   If brand colours shift the background, re-check and update here. */
.text-muted,
.article-info,
.search-result-desc {
   color: var(--clr-grey-600);
   /* VERIFY: check contrast against actual background colour */
}


/* ==========================================================================
   4. MOTION PREFERENCES — WCAG 2.3.3 (AAA, but good practice)
   ========================================================================== */

@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;
   }
}


/* ==========================================================================
   5. TEXT RESIZE — WCAG 1.4.4
   All layout must remain functional at 200% browser zoom.
   Use em/rem everywhere; no px-locked heights on text containers.
   ========================================================================== */

/* Prevent text truncation in nav items at large zoom levels */
.main-nav .nav-menu a {
   white-space: normal;
   word-break:  break-word;
}


/* ==========================================================================
   6. IMAGES — WCAG 1.1.1
   Decorative images must have alt="" and role="presentation".
   This rule catches CMS-inserted images that lack alt text (editorial reminder
   only — the CMS must enforce this in the editor workflow).
   ========================================================================== */

img:not([alt]) {
   outline: 3px solid var(--clr-danger);
}


/* ==========================================================================
   7. FORM ACCESSIBILITY
   ========================================================================== */

/* Labels must always be visible — never rely on placeholder alone */
label {
   display:     block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--space-1);
}

/* Required field indicator */
label .required,
label abbr[title="required"] {
   color:       var(--clr-danger);
   margin-left: var(--space-1);
}

/* Error state */
.field-invalid input,
.field-invalid select,
.field-invalid textarea {
   border-color: var(--clr-danger);
}

.field-invalid .invalid-message {
   color:       var(--clr-danger);
   font-size:   var(--text-sm);
   margin-top:  var(--space-1);
}

/* Ensure all form controls have sufficient size for touch targets (WCAG 2.5.5) */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
   min-height:    2.75rem; /* 44px touch target */
   font-size:     var(--text-base);
   border:        var(--border-width) solid var(--clr-grey-400);
   border-radius: var(--border-radius);
   padding:       var(--space-2) var(--space-3);
   width:         100%;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
   outline:        3px solid var(--clr-accent);
   outline-offset: 0;
   border-color:   var(--clr-accent);
}

/* Buttons — minimum 44x44px touch target (WCAG 2.5.5) */
button,
[role="button"],
.btn {
   min-height: 2.75rem;
   min-width:  2.75rem;
}


/* ==========================================================================
   8. SCREEN READER UTILITIES
   ========================================================================== */

.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;
}


/* ==========================================================================
   9. LANGUAGE SWITCHER — WCAG 3.1.2
   Each language option must identify the language it represents,
   both visually and to screen readers.
   ========================================================================== */

.lang-switcher [lang] {
   /* Screen readers will announce the lang attribute automatically */
}

.lang-switcher a[aria-current="true"] {
   font-weight: var(--fw-bold);
   text-decoration: none;
   pointer-events: none;
}