/*
 * SAF global accessibility chrome -- skip link + focus rings.
 *
 * This is site-wide a11y infrastructure (WCAG 2.4.1 bypass blocks +
 * 2.4.7 focus visible), NOT page styling -- so it lives in the child
 * theme per Rule 3 of .claude/rules/elementor-patterns.md (a11y chrome
 * is the theme's job; mu-plugins do not paint pages). Loaded on the
 * public frontend only (see functions.php enqueue, !is_admin gate).
 *
 * Bump SAF_CHILD_VERSION on every edit here (LiteSpeed cache discipline).
 */

/* --- Skip link: visually hidden until focused, then pinned top-left --- */
.saf-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: #7b181a; /* burgundy -- AA on linen text below */
  color: #f5f1e7; /* linen */
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}

.saf-skip-link:focus,
.saf-skip-link:focus-visible {
  left: 0;
  outline: 3px solid #ebad2e; /* goldenrod focus ring */
  outline-offset: 2px;
}

/* The main-content target must not paint a default focus outline box
 * around the whole region when the skip link sends focus to it. */
#saf-main-content:focus {
  outline: none;
}

/* --- Visible focus ring on every interactive element on the public
 *     surface. Scoped to body so it never reaches the wp-admin SPA.
 *
 * Two-tone ring so it stays visible on EVERY brand background:
 *   - goldenrod outline reads on dark bands (charcoal impact band,
 *     brick peer-CTA band, burgundy footer bar);
 *   - ink box-shadow halo reads on light surfaces (white header,
 *     linen heroes) AND around the goldenrod Donate button, where a
 *     bare goldenrod ring would vanish.
 * One of the two layers always contrasts with the surface. --- */
body:not(.wp-admin) a:focus-visible,
body:not(.wp-admin) button:focus-visible,
body:not(.wp-admin) input:focus-visible,
body:not(.wp-admin) select:focus-visible,
body:not(.wp-admin) textarea:focus-visible,
body:not(.wp-admin) [tabindex]:focus-visible,
body:not(.wp-admin) .elementor-button:focus-visible,
body:not(.wp-admin) .jet-nav-menu a:focus-visible {
  outline: 2px solid #ebad2e; /* goldenrod -- reads on dark bands */
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(28, 23, 16, 0.55); /* ink halo -- reads on light bands */
  border-radius: 2px;
}