/*
 * WebsiteGarage accessibility foundation.
 *
 * This is a design-system layer, loaded after the framework reset and before
 * component styles. Components consume these tokens; they must not introduce
 * a competing focus treatment or disable a native focus indicator.
 */

:root {
  --wg-a11y-focus-inner: #ffffff;
  --wg-a11y-focus-outer: #005fcc;
  --wg-a11y-focus-width: 2px;
  --wg-a11y-focus-gap: 2px;
  --wg-a11y-target-size: 24px;
  --wg-a11y-header-offset: calc(var(--wg-header-h, 0px) + 18px);
}

/*
 * The white inner ring stays visible on dark WebsiteGarage surfaces; the blue
 * outer ring stays visible on light and white surfaces. Together they keep a
 * 3:1-or-better visual boundary regardless of the local component palette.
 */
:is(
  a[href],
  area[href],
  button:not([disabled]),
  input:not([disabled]):not([type="hidden"]),
  select:not([disabled]),
  textarea:not([disabled]),
  summary,
  [contenteditable="true"],
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: var(--wg-a11y-focus-width) solid var(--wg-a11y-focus-inner);
  outline-offset: var(--wg-a11y-focus-gap);
  box-shadow: 0 0 0 calc(var(--wg-a11y-focus-width) + var(--wg-a11y-focus-gap)) var(--wg-a11y-focus-outer);
}

/* Native controls retain the same indicator when a browser exposes :focus. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--wg-a11y-focus-outer);
}

/* In-page destinations must not disappear behind fixed/sticky application UI. */
:target,
:where(main, section, article, aside, nav, footer, header) [id] {
  scroll-margin-top: var(--wg-a11y-header-offset);
}

/* A reusable alternative to duplicate, component-local screen-reader helpers. */
.wg-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wg-sr-only--focusable:focus,
.wg-sr-only--focusable:focus-within {
  position: fixed !important;
  z-index: 100001;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* Apply the 24px minimum only where a visual control uses this shared utility. */
.wg-target {
  min-inline-size: var(--wg-a11y-target-size);
  min-block-size: var(--wg-a11y-target-size);
}

@media (forced-colors: active) {
  :is(
    a[href],
    area[href],
    button:not([disabled]),
    input:not([disabled]):not([type="hidden"]),
    select:not([disabled]),
    textarea:not([disabled]),
    summary,
    [contenteditable="true"],
    [role="button"],
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}