/*
 * accessibility_base.css — baseline accessibility affordances for the public site.
 *
 * Loaded unconditionally from layouts/ui/public.html.erb, independently of the
 * accessibility widget feature flag: a skip link, a screen-reader-only utility
 * and a visible keyboard focus ring are WCAG baseline, not opt-in extras.
 *
 * Specificity note: col_theme.css:8 and explore.css:44 both declare
 * `* { outline: none }`. The universal selector contributes nothing to
 * specificity, so the `:focus-visible` rules below win on specificity alone and
 * do not depend on load order or need !important.
 */

/* ---------------------------------------------------------------- skip link */

.a11y-skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 2147483001; /* above the widget panel and every site overlay */
  padding: 10px 18px;
  background: #ffffff;
  color: #111111;
  border: 2px solid #111111;
  border-radius: 0 0 6px 6px;
  font: 600 15px/1.2 sans-serif;
  text-decoration: none;
  transition: top 0.15s ease-in-out;
}

.a11y-skip-link:focus,
.a11y-skip-link:focus-visible {
  top: 0;
  color: #111111;
  text-decoration: none;
  outline: 3px solid #ffbf00;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .a11y-skip-link { transition: none; }
}

/* <main> is a new landmark wrapper in the layout; it must not introduce layout. */
#main-content:focus {
  outline: none; /* focus is moved here programmatically by the skip link */
}

/* ------------------------------------------------------- sr-only utility */

/*
 * Visually hidden but available to assistive technology. The `.a11y-sr-only-focusable`
 * variant becomes visible when focused — used by the widget's "show accessibility
 * menu" escape hatch so hiding the interface can never trap a keyboard user.
 */
.a11y-sr-only,
.a11y-sr-only-focusable:not(:focus):not(:focus-within) {
  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;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ------------------------------------------------ baseline focus visibility */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="switch"]:focus-visible,
[role="radio"]:focus-visible,
[role="option"]:focus-visible {
  outline: 3px solid #ffbf00;
  outline-offset: 2px;
}

/* --------------------------------------------- minimum target size (2.5.8) */

/* The carousel's pagination dots come from the CDN slick.css, which sizes both
   the <li> and its <button> at 20x20 — under the 24x24 CSS px that WCAG 2.2
   SC 2.5.8 (Target Size, Minimum) requires, and they sit close enough together
   that the spacing exception does not rescue them.

   Only the hit area grows: the visible dot is drawn by the button's ::before
   glyph (font-size:6px in slick.css), so this is invisible on the page and
   measurable only by pointer. Measured with: bundle exec rake wcag:probe

   The `ul` qualifier is load-bearing. slick.css arrives through an @import in the
   home page's own extra_css, so it is LATER in the cascade than this file; at the
   equal specificity of a bare `.slick-dots li` the CDN rule wins and nothing
   changes. Qualifying with the element type outranks it without !important. */
ul.slick-dots li,
ul.slick-dots li button {
  width: 24px;
  height: 24px;
}

/* ------------------------------------------------- links in body copy (1.4.1) */

/* WCAG 2.2 SC 1.4.1 Use of Colour: a link inside a block of text must be
   distinguishable by something other than colour. The audit found
   <a href="/about?ref=getStarted">digital badges</a> inside a paragraph
   identified by colour alone, and six rules across the public CSS set
   `text-decoration: none` on links.

   Deliberately scoped to PROSE only — paragraphs, list-item text in content,
   quotes, definitions and captions. Navigation, buttons and the Explore result
   cards are excluded, because 1.4.1 is about text where a link is embedded in a
   sentence; underlining a nav bar or a whole card would be a design change with no
   conformance benefit. .button/.btn are excluded for the same reason: their shape
   already distinguishes them.

   The widget's "highlight links" adjuster does this on demand, which does NOT
   satisfy 1.4.1 — the default presentation is what is judged. */
#main-content p > a:not(.button):not(.btn),
#main-content blockquote a:not(.button):not(.btn),
#main-content dd > a:not(.button):not(.btn),
#main-content figcaption a:not(.button):not(.btn) {
  text-decoration: underline;
}