/*
 * Focus on text (docs/FOCUS.md, "Text that receives focus").
 *
 * Some things move focus to content that is not a control, because the user
 * did something: the skip link moves it to #content, a popup moves it to the
 * person's name, a form moves it to its status or thank-you message. Those
 * targets have tabindex="-1" (#content only while it holds focus; see
 * assets/js/ee-regions.js), so they take focus without joining the Tab order,
 * and this rule shows where focus landed. An outline only: no fill,
 * no shadow, no change to the text's size, weight or color, so the content
 * does not start to look like a button or a link. :focus-visible, so it shows
 * after a keyboard action and not after a mouse click. An element that merely
 * has tabindex="-1" and is never focused looks exactly as before.
 *
 * Brand blue is 9.8:1 on white and 8.5:1 on light grey; on the blue
 * newsletter band the outline is white (9.8:1).
 */
[tabindex="-1"]:focus-visible {
    outline: 3px solid var(--ee-blue);
    outline-offset: 4px;
}

/* The h1 a page focuses on load (ee-regions.js) hugs its text while it holds
   focus, rather than spanning its column; every h1 is left-aligned, so
   nothing moves. Its outline shows only for keyboard users: after a pointer,
   the script adds .ee-quiet-focus until the next key press. A visually
   hidden h1 (the home page's) keeps its 1px box: at fit-content it ran past
   the right edge, and iOS let the whole page drag sideways. */
#main h1[tabindex="-1"]:not(.visuallyhidden) {
    width: fit-content;
}

#main h1.ee-quiet-focus:focus-visible {
    outline: none;
}

/* #content spans the page, so draw the outline just inside its edge. */
#content:focus-visible {
    outline-offset: -3px;
}

#mc_embed_signup [tabindex="-1"]:focus-visible {
    outline-color: #fff;
}

/* In a popup the name sits right on top of the role line, so a wide gap would
   draw the outline across the role. */
dialog [tabindex="-1"]:focus-visible {
    outline-offset: 1px;
}

/*
 * Focus ring for a page region reached with F6 (assets/js/ee-regions.js) when
 * it has nothing focusable inside, so the region itself takes focus.
 * data-ee-region is only present while it does. Same specificity as the rule
 * above and later in the file, so a region keeps its inset ring.
 */

[data-ee-region]:focus {
    outline: 3px solid var(--ee-blue); /* one focus color site-wide */
    outline-offset: -3px;
}

/* On wide screens the table of contents runs the full height of the post;
   ring the visible box instead of that whole column. */
#ee-toc[data-ee-region]:focus {
    outline: none;
}

#ee-toc[data-ee-region]:focus .ee-toc__box {
    box-shadow: var(--focus-border);
}