/*
 * Accessibility support styles (RGAA / WCAG).
 *
 * Kept in its own stylesheet rather than folded into the theme so that an
 * upstream theme update cannot silently remove them, and so the accessibility
 * work is auditable in one place.
 */

/* ---------- Skip link (RGAA 12.7 / WCAG 2.4.1) ---------- */

/*
 * Off-screen rather than display:none. `display:none` and `visibility:hidden`
 * both remove an element from the tab order, which would make a skip link
 * unreachable by the exact users it exists for.
 */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 20px;
    background: #25ab7c;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
    left: 0;
    outline: 3px solid #111;
    outline-offset: 2px;
}

/* In RTL the link belongs on the right-hand edge. */
[dir="rtl"] .skip-to-content {
    left: auto;
    right: -9999px;
    border-radius: 0 0 0 4px;
}

[dir="rtl"] .skip-to-content:focus,
[dir="rtl"] .skip-to-content:focus-visible {
    right: 0;
    left: auto;
}

/*
 * `<main tabindex="-1">` is focusable by the skip link but must not show a
 * focus ring when reached that way — the ring would appear around the whole
 * page.
 */
main:focus {
    outline: none;
}

/* ---------- Visible focus (RGAA 10.7 / WCAG 2.4.7) ---------- */

/*
 * Many themes remove focus outlines for aesthetics, which leaves keyboard users
 * with no idea where they are. `:focus-visible` restores an indicator for
 * keyboard navigation without showing a ring on mouse clicks.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #25ab7c;
    outline-offset: 2px;
}

/* ---------- Screen-reader-only text ---------- */

/*
 * For accessible names on icon-only controls (RGAA 6.1 / WCAG 2.4.4). The
 * clip/clip-path pair covers older engines alongside current ones.
 */
.visually-hidden {
    position: absolute !important;
    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;
}