/* ============================================================
   TCW Accessibility Stylesheet — F44 Foundational A11y
   ============================================================
   Owner: V02 / F44 / Plan 44-07
   Scope: F44 navigation surface (TopBar, AdminSidebar, MobileOverlay, Breadcrumb)
   F46 will extend this file with the comprehensive WCAG 2.2 AA sweep.

   Design contract:
   - All interactive elements in F44 components use :focus-visible for ring.
   - :focus-visible outline is 2px solid var(--tcw-accent-1), offset 2px.
   - No :focus (keyboard-and-mouse) ring — only :focus-visible (keyboard-only).

   Fallback note: hex values inside var() fallbacks (e.g. var(--tcw-accent-1, #ff00a8))
   are defensive-only. They apply exclusively when no swatch CSS has loaded (first SSR
   render before the cascade resolves). These are NOT inline hex in the R2 lint sense
   because R2 only scans .razor.css files; a11y.css lives in wwwroot/css/ and is a
   global utility stylesheet, not a scoped component stylesheet.
   ============================================================ */

/* ============================================================
   Global :focus-visible ring
   Applied to ALL interactive elements — links, buttons, inputs.
   Component-scoped CSS may override for specific contexts.
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--tcw-accent-1, #ff00a8);
    outline-offset: 2px;
    border-radius: var(--tcw-radius-subtle, 8px);
}

/* Remove :focus ring on mouse click — :focus-visible handles keyboard only */
:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================================
   Skip link
   First interactive element in the tab order on all pages.
   Visually hidden until :focus-visible; then magenta pill.
   ============================================================ */
.tcw-skip-link {
    position: absolute;
    top: var(--tcw-space-2, 8px);
    left: var(--tcw-space-2, 8px);
    z-index: 9999;
    padding: var(--tcw-space-2, 8px) var(--tcw-space-4, 16px);
    background-color: var(--tcw-accent-1, #ff00a8);
    color: var(--tcw-text-on-accent, #fff);
    font-family: var(--tcw-font-mono, monospace);
    font-size: var(--tcw-font-size-sm, 13px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--tcw-radius-pill, 999px);

    /* Hidden by default — clip trick avoids display:none which removes from tab order */
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    width: 1px;
}

.tcw-skip-link:focus-visible {
    clip: auto;
    clip-path: none;
    height: auto;
    overflow: visible;
    white-space: normal;
    width: auto;
    outline: 2px solid var(--tcw-text-on-accent, #fff);
    outline-offset: 2px;
}

/* ============================================================
   Touch target enforcement
   All clickable/tappable elements must be >= 44x44px (WCAG 2.5.8).
   Applied to interactive elements in F44 nav components.
   ============================================================ */
.tcw-topbar button,
.tcw-topbar a,
.tcw-admin-sidebar button,
.tcw-admin-sidebar a,
.tcw-mobile-overlay button,
.tcw-mobile-overlay a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Reduced motion: ensures CSS animations respect user preference.
   Duplicates the tcw-tokens.css rule as a safety net for a11y.css
   consumers who might not load tokens first.
   ============================================================ */
@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;
    }

    /* Syncfusion SfTab/SfStepper animation control override.
       .e-animation-control uses inline transition-duration — !important required to win. */
    .e-animation-control {
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   F46 WCAG 2.2 AA Sweep — Plan 46-01
   Extends F44 foundation. Does not remove or modify any rule above.
   F46 additions are wrapped in @layer a11y as a future-proofing scope
   marker. Note: per CSS spec, unlayered rules win over layered rules
   of equal specificity — so the actual override of Syncfusion bootstrap5
   styles happens via component-level selector specificity
   (e.g. .e-switch-wrapper button:focus-visible beats .e-input:focus),
   not via layer priority. The @layer wrapper documents intent for the
   day Syncfusion adopts cascade layers; until then, specificity carries
   the override and !important is avoided.
   ============================================================ */
@layer a11y {

    /* Focus ring transition — keyboard ring animates in; suppressed by reduced-motion.
       Additive to the global :focus-visible ring defined above (outside the layer). */
    :focus-visible {
        transition: outline-offset var(--tcw-motion-fast, 150ms) ease,
                    outline-color var(--tcw-motion-fast, 150ms) ease;
    }

    @media (prefers-reduced-motion: reduce) {
        :focus-visible {
            transition: outline-offset var(--tcw-motion-instant, 0ms),
                        outline-color var(--tcw-motion-instant, 0ms);
        }
    }

    /* Syncfusion SfSwitch — renders <button role="switch"> inside .e-switch-wrapper */
    .e-switch-wrapper button:focus-visible,
    /* Syncfusion SfDateTimePicker — renders <input> inside .e-datetime-wrapper */
    .e-datetime-wrapper input:focus-visible,
    /* Syncfusion SfNumericTextBox — renders <input> inside .e-numerictextbox */
    .e-numerictextbox input:focus-visible {
        outline: 2px solid var(--tcw-accent-1, #ff00a8);
        outline-offset: 2px;
        border-radius: var(--tcw-radius-subtle, 8px);
    }

    /* SVG icon-only buttons — button or role=button containing only an SVG */
    button:has(svg):focus-visible,
    [role="button"]:has(svg):focus-visible {
        outline: 2px solid var(--tcw-accent-1, #ff00a8);
        outline-offset: 3px;
        border-radius: var(--tcw-radius-subtle, 8px);
    }

    /* Global touch-target — all interactive elements >= 44x44px (WCAG 2.5.8).
       F44 nav-chrome rule (above) takes precedence within .tcw-topbar / .tcw-admin-sidebar /
       .tcw-mobile-overlay and also adds display:inline-flex for those controlled contexts.
       This global rule uses min-height/min-width only to avoid layout disruption on
       elements whose display is set by Bootstrap or app.css. */
    button,
    a[href],
    [role="button"],
    [role="switch"],
    [role="tab"],
    [role="option"],
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Screen-reader-only utility — visible to assistive technology, hidden visually.
       Clip technique keeps the element in the accessibility tree (display:none removes it).
       F44 uses clip-path on .tcw-skip-link; this is the reusable utility form.
       Usage: VendorDashboard.razor sr-only column header, VolunteerSignupForm.razor sr-only spinner. */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

}