/* Accessibility helpers
   WCAG 2.4.1 Bypass Blocks (A) */

/* Screen-reader-only text.
   Bootstrap 4 and Font Awesome both define these classes, but not every master
   with a skip link loads either one, so the rules are repeated here. They match
   Font Awesome's, so masters loading both behave the same.
   Link this file from every master that renders #SkipLink.

   Never use display:none or visibility:hidden here, both remove the element
   from the tab order and make the skip link unreachable by keyboard. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

/* Make the skip link legible once focus reveals it. Scoped to #SkipLink so the
   sr-only classes keep their stock behaviour everywhere else.

   position:fixed rather than the static position the sr-only-focusable rule
   above gives it: static would put the link in the normal flow and push the
   whole header down on focus. Fixed pins it to the top-left corner and leaves
   the page layout untouched. The declarations repeat the sr-only-focusable
   reset because the link must win over that rule regardless of source order. */
#SkipLink:active,
#SkipLink:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    padding: 12px 20px;
    background: #ffffff;
    color: #00529b;
    border: 2px solid #00529b;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: underline;
    outline: 3px solid #e7b927;
    outline-offset: 2px;
}

/* The skip target takes focus programmatically via tabindex="-1".
   Suppress the focus ring there, the user asked to move, not to land on a
   control. */
#SkipTarget:focus {
    outline: none;
}