/*
 * GMPF accessibility utilities
 * ----------------------------
 * Patterns that components rely on to meet WCAG 2.2 AA. Avoid styling
 * non-visual concerns elsewhere - centralising them here makes audits
 * easier.
 */

/*
 * Visually-hidden but available to assistive technology. Use for skip
 * links, icon-only button labels, and form labels that the design
 * intentionally hides.
 */
.visually-hidden,
.gmpf-visually-hidden {
  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;
}

/*
 * Skip-to-main-content link. Hidden until focused, then pinned to the
 * top-left and styled as a high-contrast button. Used by the global
 * Header (Phase 1.1).
 */
.gmpf-skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: var(--z-skip-link);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-focus-ring);
  color: var(--color-neutral-black);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.gmpf-skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--color-neutral-black);
  outline-offset: 2px;
}

/*
 * Default focus ring. Components should NOT remove the outline; if a
 * custom focus state is needed, override with another visible
 * indicator (box-shadow + outline-offset) that meets 3:1 contrast.
 */
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--color-focus-ring-shadow);
  border-radius: var(--radius-sm);
}

/*
 * Some interactive elements (buttons, links) may want a tighter ring
 * that still meets 3:1 contrast against their own background. They can
 * opt in with this class.
 */
.gmpf-focus-ring-tight:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-focus-ring-shadow);
}