/* Sitewide accessibility and interaction refinements loaded after page styles. */
:root {
  --gold-text: #8a5a00;
  --focus-outer: #7a4f00;
}

/* Small gold labels need stronger contrast on the cream page backgrounds. */
.eyebrow,
.resource-page .eyebrow,
.seo-page .eyebrow {
  color: var(--gold-text);
}

/* A two-tone ring stays visible on both light content and the dark navigation. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-outer);
}

.resource-nav :where(a, button):focus-visible,
.family-bar :where(a, button):focus-visible,
.topbar :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 5px #d9a329;
}

/* Never rely on color alone for form-state feedback. */
.form-status[data-state="success"]::before {
  content: "✓ ";
  font-weight: 900;
}
.form-status[data-state="error"]::before {
  content: "! ";
  font-weight: 900;
}

/* Keep targets comfortably usable by touch and keyboard users. */
.contact-form input,
.contact-form select,
.contact-form textarea,
.contact-form button,
.mobile-action-bar a {
  min-height: 44px;
}

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