/* ─────────────────────────────────────────────────────────────────────────
 * Dream Home Fund — accessibility helpers
 *
 * Shared rules for skip-to-content, focus-visible rings, and the
 * visually-hidden (.sr-only) helper. Loaded on every page so keyboard
 * users and screen-reader users get consistent behavior.
 * ──────────────────────────────────────────────────────────────────────── */

/* Skip-to-content link
 * Hidden off-screen by default, becomes visible at the top of the
 * viewport when focused (keyboard tab from page load). Activating
 * the link moves focus to the #main anchor immediately after <nav>,
 * letting keyboard users bypass the menu. */
.skip-to-content {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--green-dark, #1a3320);
  color: var(--cream, #faf8f3);
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: top 0.2s ease;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  top: 1rem;
  outline: 3px solid var(--green-dark, #1a3320);
  outline-offset: 2px;
}

/* Global focus-visible ring
 * Modern :focus-visible only paints the ring for keyboard navigation,
 * not mouse clicks. Dual-tone ring (dark-green outline + gold-light
 * halo via box-shadow) keeps the indicator visible on both cream
 * page backgrounds and dark-green hero / footer backgrounds, meeting
 * WCAG 2.1 SC 1.4.11 (Non-text Contrast) on either context. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--green-dark, #1a3320);
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 5px rgba(212, 168, 75, 0.55);
}
/* Inputs and selects that already have a custom focus state should
 * keep theirs (their own padding makes the outline look better
 * inside the field), so we lift the global rule's specificity only
 * for the bare elements. The page-level focus styles will win where
 * they exist. */

/* The #main skip target should not be focusable in tab order
 * (tabindex="-1" in HTML), but when programmatically focused via
 * the skip link, it shouldn't show a stray outline. */
#main:focus { outline: none; }

/* Visually-hidden helper for screen-reader-only labels */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}