/**
 * Skip Links
 *
 * Two plugin-owned "skip" links (Skip to content, Skip to footer) rendered as
 * the first focusable elements on every page. Depends on design-tokens.css.
 *
 * Visibility model: each link is clipped off-screen (the .epsd-visually-hidden
 * technique) at rest, and un-clips to a visible pill anchored top-left when
 * focused. Clipping (not a single negative `top`) is used so the two stacked
 * links don't fight over one offset — whichever is focused paints in place.
 *
 * z-index 10001 — one above the scroll-to-top button's documented skip-link
 * reference (10000), keeping "the skip link is the top-most control" invariant.
 * If you change this, update assets/css/scroll-to-top.css and ARCHITECTURE.md.
 *
 * Astra suppression: Astra hardcodes its own `<a class="skip-link">` in
 * header.php with no hook to remove it. `display:none` here pulls it out of
 * the a11y tree and tab order entirely; its label is also blanked via the
 * `astra_default_strings` filter in includes/skip-links.php (belt-and-braces).
 */

/* Remove Astra's native, now-redundant skip link network-wide.
   !important is required — Astra ships inline dynamic CSS for `.skip-link`
   that survives wp_dequeue_style. */
.skip-link {
  display: none !important;
}

.epsd-skip-links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10001;
}

.epsd-skip-link {
  /*
   * Hidden off-screen at rest via transform — NOT the 1px/clip technique.
   * Safari excludes an <a> from the keyboard tab order when its rendered box
   * is collapsed to 1px with clip:rect(0,0,0,0)+overflow:hidden, so the link
   * could never receive the first Tab that is supposed to reveal it (it has
   * no size to focus). Keeping a real, full-size box and pushing it above the
   * viewport with translateY keeps it tabbable in every engine; on focus we
   * slide it back into view. (Pattern: GOV.UK / a11y-project skip link.)
   */
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--epsd-space-xs) var(--epsd-space-md);
  transform: translateY(-100%);
  transition: transform var(--epsd-transition-fast);
  white-space: nowrap;
  border: 0;

  font-family: var(--epsd-font-display);
  font-weight: var(--epsd-font-weight-semibold);
  color: var(--epsd-interactive-primary-text);
  background-color: var(--epsd-interactive-primary);
  text-decoration: none;
  border-radius: 0 0 var(--epsd-radius-sm) 0;
}

/* On focus, slide the pill into view at the top-left corner. Pair :focus
   with :focus-visible so the gold ring (from design-tokens.css :focus-visible)
   shows for keyboard users. Whichever link is focused paints in the same
   anchored spot — one at a time, no layout shift between them. */
.epsd-skip-link:focus,
.epsd-skip-link:focus-visible {
  transform: translateY(0);
}

/* Honor reduced-motion: no slide animation, just appear/disappear. */
@media (prefers-reduced-motion: reduce) {
  .epsd-skip-link {
    transition: none;
  }
}