/* ==========================================================================
   Accessibility: visible keyboard focus indicator (US13643)
   ==========================================================================

   PURPOSE
   Draws a high-contrast black focus indicator on interactive controls when
   they receive focus via the keyboard. Uses :focus-visible so the indicator
   is shown during Tab / Shift+Tab navigation but not on mouse click.

   WHY THIS FILE EXISTS (do not move these rules into Site.css)
   Site.css is served by the ~/Content/css bundle, which every layout renders
   BEFORE the Kendo, Bootstrap, jQuery UI and rebrand bundles. Those sheets
   contain many `outline: 0` / `outline: none` declarations, so focus rules
   placed in Site.css can only win by using !important. This file is served by
   the ~/Content/accessibility bundle, which is rendered LAST in every layout,
   so it wins on load order and needs no !important.

   SELECTOR RULES (these are not style preferences - they are the fix for the
   defect that caused this story to be returned once already)
   1. Select controls by ROLE, never by focusability. A previous attempt used a
      bare [tabindex] selector. tabindex marks an element as focusable, not as
      interactive: Kendo puts it on .k-window and .k-window-content so dialogs
      can be focused programmatically. The result was a black outline drawn
      around entire dialog boxes.
   2. NEVER use a bare [tabindex] selector, and never use *:focus-visible.
   3. NEVER add !important by default. It is permitted only on an individual
      selector proven to be fighting an !important vendor rule, and only with a
      comment naming that rule. Global !important is what turned the previous
      selector mistake into an unfixable one.
   4. NEVER add .k-window / .k-window-content exclusions. Under these rules
      nothing should match them; an exclusion would hide a selector mistake
      rather than prevent it.
   5. Use a[href], never a bare `a` (a bare `a` matches named-target anchors).

   Any new selector must name a real, verified control, and must be checked
   against the container regression gate before the next one is added.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyboard focus indicator.
   outline is load-bearing: it is never clipped by an ancestor's overflow.
   box-shadow adds a white inner ring so the black outline stays visible on
   dark and branded surfaces; it IS clipped by `overflow: hidden` ancestors,
   so it is an enhancement rather than the primary indicator.
   -------------------------------------------------------------------------- */
button:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Fallback for browsers without :focus-visible support. Deliberately omits the
   box-shadow halo so that, on those browsers, a pointer click produces the
   lighter treatment rather than the full indicator.
   -------------------------------------------------------------------------- */
button:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Suppress the fallback for pointer users on browsers that DO support
   :focus-visible, so the indicator is reserved for keyboard navigation.
   -------------------------------------------------------------------------- */
button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}