/* ===========================================================================
   SIMPPortal — accessibility baseline (WCAG 2.1 AA)
   ---------------------------------------------------------------------------
   Covers ToR "[NFR]: Accessibility":
     NFR 3.1  screen-reader support (visually-hidden helpers, skip link)
     NFR 3.2  keyboard navigation + visible focus indicators
   Portal-only: this file is linked from SIMPPortal/Views/Shared/_Layout.cshtml
   and the Layout=null public pages. The SIMP admin/CMS is untouched.

   Load LAST so the :focus-visible rules below win over the Midone template
   and the Kendo theme, both of which strip outlines. Everything here is
   additive — no layout or colour changes to existing components.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Screen-reader-only text
   Available to any view that needs an accessible name without visible text
   (icon-only buttons, table captions, form-group legends).
   --------------------------------------------------------------------------- */
.sr-only-a11y {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   2. Skip link — WCAG 2.4.1 Bypass Blocks
   The portal sidebar renders ~40 links before the page content, so without
   this a keyboard/screen-reader user tabs through the whole navigation on
   every single page. Hidden until focused, then pinned top-left above the
   sticky header (which sits at z-index 60).
   --------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0.5rem;
    z-index: 100;
    display: inline-block;
    padding: 0.625rem 1.25rem;
    background-color: #ffffff;
    color: #0f172a;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    border: 2px solid #0f172a;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
    transition: top 0.15s ease-in-out;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: 3px solid #0b3d91;
    outline-offset: 2px;
}

/* The skip-link target carries tabindex="-1" so the browser can move focus
   into it; that would otherwise draw a focus ring around the whole page. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

/* ---------------------------------------------------------------------------
   3. Visible focus indicators — WCAG 2.4.7 Focus Visible
   The Midone template (dist/css/app.css, css/app.tw.css, css/landing.css)
   and kendo-overrides.css set `outline: none` on interactive elements, which
   leaves keyboard users with no idea where they are. These rules restore a
   consistent indicator.

   :focus-visible (not :focus) so mouse clicks do not draw a ring — the same
   behaviour sighted mouse users have today.

   !important is deliberate and load-bearing: the rules being overridden are
   in generated/vendor stylesheets (app.css is a build artefact, the Kendo
   theme is a CDN file), so specificity alone cannot beat them reliably.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="option"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[role="switch"]:focus-visible,
[contenteditable="true"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid #0b3d91 !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

/* Kendo widgets render their own focus styling on inner wrappers rather than
   on the focusable element, so they need to be named explicitly. */
.k-focus,
.k-grid td.k-focus,
.k-grid th.k-focus,
.k-input:focus-within,
.k-picker:focus-within,
.k-button:focus-visible,
.k-list-item.k-focus,
.k-menu-item.k-focus {
    outline: 3px solid #0b3d91 !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}

/* On dark surfaces (sidebar, gov ribbon, footer) a navy ring disappears —
   switch to white there so the indicator stays visible against the ground. */
.portal-sidebar a:focus-visible,
.portal-sidebar button:focus-visible,
.gov-ribbon a:focus-visible,
.gov-ribbon button:focus-visible,
.simp-brand-footer a:focus-visible,
.simp-brand-footer button:focus-visible,
.footer a:focus-visible,
.footer button:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------------
   4. Respect prefers-reduced-motion for the skip link's slide-in.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
}