/* ══════════════════════════════════════════════════
   ACCESSIBILITY — Section 502A / WCAG 2.1 AA
══════════════════════════════════════════════════ */

/* ── Skip to main content link ─────────────────── */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--color-green);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-to-content:focus {
  top: 0;
}

/* ── Focus styles — visible for keyboard nav ────── */
*:focus {
  outline: 3px solid #23913c;
  outline-offset: 3px;
}
*:focus:not(:focus-visible) {
  outline: none;
}
*:focus-visible {
  outline: 3px solid #23913c;
  outline-offset: 3px;
}

/* Specific focus styles for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #23913c;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── High contrast mode support ────────────────── */
@media (forced-colors: active) {
  .btn,
  .tag,
  .pet-card,
  .board-card,
  .pb-pricing__table {
    border: 2px solid ButtonText;
  }
  .btn--primary,
  .btn--dark-green,
  .btn--purple {
    background-color: ButtonFace;
    color: ButtonText;
    border-color: ButtonText;
  }
}

/* ── Screen reader only utility ─────────────────── */
.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;
}

/* ── Links — minimum contrast ───────────────────── */
a {
  text-underline-offset: 3px;
}
/* Ensure inline links in content are distinguishable */
.pb-wysiwyg a,
.page-content a,
.single-pet__description a {
  color: #1a7230;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pb-wysiwyg a:hover,
.page-content a:hover,
.single-pet__description a:hover {
  color: #0f5b4d;
}

/* ── Form accessibility ──────────────────────────── */
/* Ensure all inputs have visible focus */
input,
select,
textarea,
button {
  font-family: var(--font-body);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #23913c;
  outline-offset: 2px;
}

/* Error states */
[aria-invalid="true"] {
  border-color: #c0392b !important;
  outline-color: #c0392b !important;
}

/* ── Images ──────────────────────────────────────── */
/* Decorative images should have empty alt — this catches missing alt */
img:not([alt]) {
  outline: 4px solid red;
}

/* ── Button minimum touch target 44x44px ────────── */
.btn,
button,
[role="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* ── Nav aria current page ───────────────────────── */
.site-header__nav a[aria-current="page"] {
  color: var(--color-green);
  font-weight: 700;
}

/* ── Pet cards — ensure sufficient contrast ─────── */
.pet-card__meta {
  color: #5a5755; /* Passes AA contrast on white */
  opacity: 1;
}
.pet-card__name {
  color: #343231;
}

/* ── Section headers ─────────────────────────────── */
.section-header__subtext {
  color: #5a5755; /* AA compliant on white/light bg */
  opacity: 1;
}

/* ── Footer contrast ─────────────────────────────── */
.site-footer__address,
.site-footer__address a,
.site-footer__hours-list dd {
  color: rgba(255, 255, 255, 0.85); /* Improved from 0.75 for better contrast */
}

/* ── Accordion accessibility ─────────────────────── */
.pb-accordion__trigger:focus-visible {
  outline: 3px solid #23913c;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Slider accessibility ────────────────────────── */
.pb-slider__btn:focus-visible,
.single-pet__nav:focus-visible,
.single-pet__thumb:focus-visible {
  outline: 3px solid #23913c;
  outline-offset: 2px;
}

/* ── Mobile nav ──────────────────────────────────── */
.site-header__toggle:focus-visible {
  outline: 3px solid #23913c;
  outline-offset: 4px;
  border-radius: 6px;
}