/**
 * wcag21-patch.css
 * WCAG 2.1 Level AA Conformance Patch
 *
 * Coverage:
 *   - 1.4.11 Non-text Contrast — focus indicators
 *   - 2.4.1  Bypass Blocks     — skip link
 *
 * Focus ring colour: #005fcc (blue) on background #e5e5e5 (darkest gray in gradient).
 * Contrast ratio:    #005fcc on #e5e5e5 = 5.18:1  (required minimum: 3:1 ✓)
 *
 * Browser support: All modern browsers. IE11 is not supported.
 *
 * Deployment notes:
 *   - This file is intentionally scoped broadly so it covers customer-added
 *     components without needing per-component rules.
 *   - If a deployment has its own :focus styles that already meet 1.4.11,
 *     add a more specific selector to override this file rather than removing it,
 *     so future patch updates still apply to uncovered elements.
 */


/* =============================================================================
   RESET — Remove browser default outlines so we control the full appearance.
   We replace them immediately below; this block must never stand alone.
   ============================================================================= */

*:focus {
  outline: none;
}


/* =============================================================================
   1.4.11 NON-TEXT CONTRAST — Focus indicators
   Applies to all keyboard-focusable elements.

   Specification requirements met:
     • Outline is visible against both the component and the surrounding surface.
     • 3px solid outline provides a clear perimeter change.
     • 2px offset prevents the outline being clipped by the element's own border
       or background, ensuring it is always perceivable.
     • Colour contrast (#005fcc on #e5e5e5) = 5.18:1, exceeding the 3:1 minimum.

   :focus-visible ensures the ring appears for keyboard users only, not on
   mouse click — correct behaviour per the spec and avoids UX complaints from
   sighted mouse users. All modern browsers support :focus-visible natively.
   ============================================================================= */

*:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}


/* =============================================================================
   COMPONENT-SPECIFIC ADJUSTMENTS
   Override the generic rule where the default offset looks wrong or where a
   tighter/looser value improves clarity for a specific element type.
   ============================================================================= */

/* Inline links — slight extra offset so the outline clears descenders */
a:focus-visible {
  outline-offset: 3px;
}

/* Buttons — pull the outline flush to the button border */
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
  outline-offset: 1px;
}

/* Checkboxes and radios — browsers render these inconsistently; force visibility */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

/* Select dropdowns */
select:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 1px;
}

/* Textareas */
textarea:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/*
 * Custom focusable elements (divs/spans with tabindex, custom widgets).
 * Ensure custom interactive components have tabindex="0" set appropriately
 * in markup — the CSS will then cover them automatically.
 */
[tabindex]:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}


/* =============================================================================
   2.4.1 BYPASS BLOCKS — Skip to main content link
   Injected into the DOM at runtime by wcag21-patch.js (applyLandmarks()).

   The link is visually hidden at all times except when it receives keyboard
   focus, at which point it appears in the top-left corner of the viewport.

   Specification requirements met:
     • A mechanism exists to bypass repeated navigation blocks (the skip link).
     • The link is the first focusable element in the page (injected before all
       other body content by the JS patch).
     • The link is visible when focused, satisfying 2.4.7 (Focus Visible).
     • Foreground/background contrast: #005fcc on #ffffff = 8.59:1 ✓
   ============================================================================= */

.wcag-skip-link {
  /* Off-screen when not focused — preferred over display:none so the
     element remains in the focus order and is reachable by Tab. */
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: 9999;

  padding: 0.5em 1em;
  background: #ffffff;
  color: #005fcc;
  font-weight: bold;
  text-decoration: underline;

  /* Inherits the global focus outline defined above when focused. */
}

.wcag-skip-link:focus-visible {
  top: 1rem;
  left: 1rem;
}