/* =========================================================
   Site-wide accessibility helpers.
   - Skip-to-content link (visible on focus only)
   - Visually-hidden text helper (.screen-reader-text)
   - :focus-visible rings everywhere
   ========================================================= */

/* Visually-hidden text — same as wp-core's .screen-reader-text. */
.screen-reader-text,
.screen-reader-text span {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Skip link — hidden until keyboard-focused. */
.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 1000;
}
.skip-link:focus {
  position: fixed;
  left: 8px;
  top: 8px;
  width: auto;
  height: auto;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  outline: 2px solid var(--sunrise);
  outline-offset: 2px;
}

/* Make programmatic focus on <main> not show a permanent outline. */
main[tabindex="-1"]:focus { outline: none; }

/* Global focus-visible — sunrise outline so users can always see where they are. */
*:focus-visible {
  outline: 2px solid var(--sunrise);
  outline-offset: 2px;
  border-radius: 2px;
}
.dock-btn:focus-visible,
.filters .f:focus-visible,
.primer-button:focus-visible,
.primer-fab:focus-visible {
  outline: 2px solid var(--sunrise);
  outline-offset: 3px;
}
/* Inputs already have border-color focus styles; keep them but add a halo. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--sunrise);
  outline-offset: 1px;
}

/* Buttons that look like spans (filter chips) — give them a real button reset. */
button.f {
  font: inherit;
  cursor: pointer;
  background: var(--bg);
  color: var(--fg-2);
}
button.f:hover { background: var(--bg-2); }