/* Shared WCAG AA refinements for GG's House public pages. */
:root {
  --ggs-gold-on-light: #8a5c27;
  --ggs-gold-on-dark: #c99b5b;
  --ggs-gold-button: #8a5c27;
  --ggs-gold-button-hover: #6f4c22;
}

/* White text on the original gold did not meet the 4.5:1 contrast target. */
body > header nav .give {
  background: var(--ggs-gold-button) !important;
  border-color: var(--ggs-gold-button) !important;
  color: #fff !important;
}

body > header nav .give:hover,
body > header nav .give:focus-visible {
  background: var(--ggs-gold-button-hover) !important;
  border-color: var(--ggs-gold-button-hover) !important;
  color: #fff !important;
}

/* Restore pages intentionally use dark green text on light gold, which passes. */
body > header.site-header nav .give {
  background: var(--restore-gold, #c99b5b) !important;
  border-color: var(--restore-gold, #c99b5b) !important;
  color: var(--restore-green-deep, #102b1f) !important;
}

body > header.site-header nav .give:hover,
body > header.site-header nav .give:focus-visible {
  background: #e7bd7d !important;
  border-color: #e7bd7d !important;
  color: #102b1f !important;
}

/* Small gold text on white and cream backgrounds uses a darker brand gold. */
body > header .logo .tag,
.snapshot-card .eyebrow,
.snapshot-card .doc-caption,
.community-voice-card .eyebrow,
.endorsement-meta p,
.next-step-card .kicker {
  color: var(--ggs-gold-on-light) !important;
}

/* Preserve the lighter gold where it sits on dark green or a dark image. */
.hero .eyebrow,
.story-v24-hero .story-kicker,
.community-voice-break .story-kicker,
.milestone--turning .story-kicker,
.proposed-campus-panel .story-kicker,
.resources-hero .eyebrow,
.impact-panel .eyebrow,
.contact-section .eyebrow,
.preflight-hero .eyebrow,
.preflight-section.dark .eyebrow,
.cta-band .eyebrow,
.volunteer-visibility-eyebrow {
  color: var(--ggs-gold-on-dark) !important;
}

/* A two-tone focus indicator remains visible on both light and dark surfaces. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ggs-gold-on-light) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 2px #fff !important;
}

@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid CanvasText !important;
    box-shadow: none !important;
  }
}