/*
 * Accessibility additions over The7 / WPBakery, at every width. Not on live
 * (Tim, 2026-10-15). Nothing here changes how a page looks to a mouse or
 * touch user; see src/a11y.ts for the markup side.
 */

/* A visible keyboard focus ring. The theme removes outlines everywhere
   (outline:0 / outline:none, some !important). :focus-visible only, so a
   click or tap draws nothing. The gold is The7's menu decoration colour here
   (--the7-navigation-line-decoration-color; the theme's "accent" is near
   black, invisible on the dark hero and header); the dark halo keeps the
   ring visible on white sections as well. */
html body :focus-visible {
  outline: 2px solid #dd9933 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #0a0303 !important;
}

/* The menu links reach the top of the window: draw their ring inside (the
   halo stays at the link's edge, for the archives' light header). */
html body .main-nav > li > a:focus-visible {
  outline-offset: -8px !important;
}

/* A heading only assistive technology and crawlers read. */
.rt-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Headings demoted from h1 to h2 (one h1 per page, src/a11y.ts) keep the
   h1 size. The hero slider's text layers are styled by LayerSlider and come
   out the same either way; this is for the theme's own h1/h2 sizes. */
html body h2.rt-h1:not(.ls-l) {
  font-size: var(--the7-h1-font-size);
  line-height: var(--the7-h1-line-height);
}