/* A11y utilities (nested SCSS) */
/* Visually hidden content that stays accessible to screen readers */
.sr-only, .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
  /* Add .focusable when this should reveal on keyboard focus (e.g., skip link) */
}
.sr-only.focusable:not(:focus):not(:focus-visible):not(:active), .visually-hidden.focusable:not(:focus):not(:focus-visible):not(:active) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
}
.sr-only.focusable, .visually-hidden.focusable {
  /* Reveal position and styling on focus/activation */
}
.sr-only.focusable:focus, .sr-only.focusable:focus-visible, .sr-only.focusable:active, .visually-hidden.focusable:focus, .visually-hidden.focusable:focus-visible, .visually-hidden.focusable:active {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
  left: calc(env(safe-area-inset-left, 0px) + 1rem);
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1rem;
  overflow: visible;
  clip: auto;
  -webkit-clip-path: none;
          clip-path: none;
  white-space: normal;
  background: #000;
  color: #fff;
  text-decoration: none;
  z-index: 100000;
}

/* Dedicated skip link (same behavior as .visually-hidden.focusable) */
.skip-link {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus, .skip-link:focus-visible, .skip-link:active {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 1rem);
  left: calc(env(safe-area-inset-left, 0px) + 1rem);
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1rem;
  overflow: visible;
  clip: auto;
  -webkit-clip-path: none;
          clip-path: none;
  white-space: normal;
  background: #000;
  color: #fff;
  text-decoration: none;
  z-index: 100000;
}

/* Elements hidden visually but revealed for keyboard users on focus */
.a11y-kb-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
}
.a11y-kb-only:focus-visible, .a11y-kb-only:active {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  -webkit-clip-path: none;
          clip-path: none;
  white-space: normal;
}

/* Prevent anchors from landing under sticky headers */
:target {
  scroll-margin-top: var(--skip-link-offset, 72px);
}

/* Windows High Contrast / forced colors support */
@media (forced-colors: active) {
  .visually-hidden.focusable:focus, .visually-hidden.focusable:focus-visible, .visually-hidden.focusable:active,
  .skip-link:focus,
  .skip-link:focus-visible,
  .skip-link:active {
    background: Canvas;
    color: CanvasText;
    }
}
