/* WCAG 2.4.7 Focus Visible.
   Link this file last so it beats the "outline: none" rules in main.css,
   Style.5.css, Site.8.css and EverestWeb.13.css.
   :focus-visible keeps mouse clicks unstyled. */

:root {
    --a11y-focus: #3f7fd6;
    --a11y-glow: rgba(63, 127, 214, 0.35);
}

/* Ring for elements with no border of their own.
   .item-tool and .btn-file ring a parent, .icon-info a child; see below. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.item-tool:focus-within,
.btn-file:focus-within,
a:focus-visible > .icon-info {
    outline: none !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--a11y-focus) !important;
    border-radius: 4px;
}

/* Fields already have a border, so tint it and add a soft glow instead. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none !important;
    border-color: var(--a11y-focus) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 3px var(--a11y-glow) !important;
}

a:focus-visible > .icon-info {
    border-radius: 50%;
}

/* These three are the wrong box to ring, so the rules above ring a relative
   instead and these suppress the original:
     .item-tool a   inline <a> around a block, its shadow breaks apart
     file input     visually hidden behind its label
     .icon-info's a holds only an absolute icon, so its box collapses to zero
   :has() is unsupported in IE11. There the help link keeps the generic ring,
   which looks worse but stays visible. */
.item-tool a:focus-visible,
.btn-file input[type="file"]:focus-visible,
a:focus-visible:has(> .icon-info) {
    box-shadow: none !important;
}

/* Same rules for browsers without :focus-visible. */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    summary:focus,
    [tabindex]:focus,
    [role="button"]:focus,
    .btn:focus,
    a:focus > .icon-info {
        outline: none !important;
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--a11y-focus) !important;
        border-radius: 4px;
    }

    input:focus,
    select:focus,
    textarea:focus {
        outline: none !important;
        border-color: var(--a11y-focus) !important;
        border-radius: 4px !important;
        box-shadow: 0 0 0 3px var(--a11y-glow) !important;
    }

    a:focus > .icon-info {
        border-radius: 50%;
    }

    .item-tool a:focus,
    .btn-file input[type="file"]:focus,
    a:focus:has(> .icon-info) {
        box-shadow: none !important;
    }
}