/* ============================================================================
   Kalix — keyboard focus ring
   ----------------------------------------------------------------------------
   One focus style for the whole site, per the Component Sheet. Its own file so
   the MkDocs pages (mkdocs.yml extra_css) and the bespoke landing page
   (index.html) load the same rule; consumes --kx-* tokens from tokens.css.
   ========================================================================== */

/* Every link, button, summary and focusable scroll region (Material makes an
   overflowing code block and the search results focusable), so new components
   get the ring without being listed. The solid outline is what the eye finds:
   the --kx-focus-ring halo alone is about 1.6:1 against the page, under the 3:1
   that WCAG 1.4.11 asks of a focus indicator. Forced-colors mode drops the
   box-shadow and repaints the outline in a system colour. The class selectors
   match Material's own focus rules, which outrank a bare a:focus-visible. Not
   covered: Material's content-tab labels and option toggles (focus sits on a
   hidden input; neither is used on the site yet). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex="0"]:focus-visible,
.md-typeset a:focus-visible,
.md-typeset summary:focus-visible,
.md-nav__link:focus-visible,
.md-pagination__link:focus-visible {
  outline: 2px solid var(--kx-primary-600);
  outline-offset: 0;
  box-shadow: var(--kx-focus-ring);
}

/* Both footers are dark, where the primary blue would not show. The second
   selector outranks .md-typeset a above: Material's footer is .md-typeset. */
footer :is(a, button):focus-visible,
.md-footer .md-typeset a:focus-visible { outline-color: var(--kx-text-inverse); }

/* Sidebar and drawer links sit flush against containers that clip, so their
   outline is drawn inside the link's box and the halo is dropped. */
.md-nav__link:focus-visible {
  outline-offset: -2px;
  box-shadow: none;
}

/* Soften the ring's corners on links with no radius of their own (header text
   links, inline links); :where() keeps this below any component's own radius. */
:where(a:focus-visible) { border-radius: var(--kx-radius-xs); }

/* Timeline rows: ring the whole row, including the step dot outside the link
   box. The link keeps a transparent outline for forced-colors mode. */
.md-typeset a.kx-tl-item:focus-visible {
  outline-color: transparent;
  box-shadow: none;
}
.md-typeset a.kx-tl-item:focus-visible::before {
  content: "";
  position: absolute;
  inset: 2px -10px 2px -52px;
  border-radius: var(--kx-radius-md);
  outline: 2px solid var(--kx-primary-600);
  box-shadow: var(--kx-focus-ring);
  pointer-events: none;
}