/* First Focus */
.page-f1 {
  display: block;
  text-align: center;
  position: fixed;
  z-index: 999;
  top: 0; left: 50%;
  transform: translateX(-50%);
  padding: .5rem 1.5rem;
  opacity: 0;
  pointer-events: none;
  &:focus {
    opacity: 1;
    pointer-events: auto;
  }
}

/* no-as-scroll support */
.sr-only.as-focus-to {
  position: fixed;
  top: 0; left: 0;
}
/* rytm-wcag (linksFix.ts) injects a `visually-hidden` (Bootstrap-5 name) notice
  span on every target="_blank" link. The project's hide utility is Tailwind's
  `sr-only`, so alias the two — without this the notice renders visibly. */
.visually-hidden {
  @apply sr-only;
}

/* focus */
a, button, .btn, input, select, textarea, h2 {
  &:active {
    box-shadow: none !important;
  }
  &:focus {
    box-shadow: none;
    outline: none;
  }
}

html {
  &.wcag-using-tab {
    a, button, .btn, input, select, textarea, h2 {
      &:focus {
        outline: 4px solid var(--color-wcag-focus-outline) !important;
      }
    }
  }
}