/* Shared button styling for sc-archery.com — loaded after each page's own
   <style> block so these rules win the cascade without needing !important.
   Keep colors self-contained here (don't rely on page-level custom
   properties like --gold, which mean different colors on different pages). */

.button,
.event-links a,
.btn-info,
.btn-results,
.link-list a,
.club-meta a,
.contact-link,
.year-links a,
.archive-list a,
.nav a,
.nav span,
.nav-toggle-button {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 200ms ease, background 200ms ease, color 200ms ease,
    border-color 200ms ease;
}

/* Primary / secondary pill CTAs (.button.button-primary, .button.button-secondary) */

.button-primary {
  background: linear-gradient(135deg, #2d74d1, #0c438c);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 26px rgba(12, 67, 140, 0.32), 0 2px 6px rgba(12, 67, 140, 0.22);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: linear-gradient(135deg, #3f8bff, #2d74d1);
  box-shadow: 0 18px 34px rgba(12, 67, 140, 0.4), 0 4px 10px rgba(12, 67, 140, 0.26);
  transform: translateY(-3px);
}

.button-secondary {
  border-width: 2px;
  box-shadow: 0 6px 16px rgba(12, 67, 140, 0.08);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: rgba(12, 67, 140, 0.07);
  border-color: #2d74d1;
  color: #2d74d1;
  box-shadow: 0 14px 28px rgba(12, 67, 140, 0.18);
  transform: translateY(-3px);
}

.button:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(12, 67, 140, 0.22);
}

/* Link-row style buttons: event cards, quick links, club meta, archives */

.event-links a,
.btn-info,
.btn-results,
.link-list a,
.club-meta a,
.contact-link,
.year-links a,
.archive-list a {
  border: 1px solid rgba(12, 67, 140, 0.12);
  box-shadow: 0 2px 8px rgba(12, 67, 140, 0.06);
}

.event-links a:hover,
.event-links a:focus-visible,
.btn-info:hover,
.btn-info:focus-visible,
.btn-results:hover,
.btn-results:focus-visible,
.link-list a:hover,
.link-list a:focus-visible,
.club-meta a:hover,
.club-meta a:focus-visible,
.contact-link:hover,
.contact-link:focus-visible,
.year-links a:hover,
.year-links a:focus-visible,
.archive-list a:hover,
.archive-list a:focus-visible {
  background: rgba(12, 67, 140, 0.14);
  border-color: rgba(45, 116, 209, 0.45);
  box-shadow: 0 10px 22px rgba(12, 67, 140, 0.18);
  transform: translateY(-2px);
  color: #072b5d;
}

.btn-results {
  background: rgba(45, 116, 209, 0.12);
  border-color: rgba(45, 116, 209, 0.3);
  color: #0c438c;
}

/* Nav pills in the dark topbar */

.nav a:hover,
.nav a:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.nav-toggle-button:hover,
.nav-toggle-button:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
}

/* Keyboard focus visibility for all clickable buttons */

.button:focus-visible,
.event-links a:focus-visible,
.btn-info:focus-visible,
.btn-results:focus-visible,
.link-list a:focus-visible,
.club-meta a:focus-visible,
.contact-link:focus-visible,
.year-links a:focus-visible,
.archive-list a:focus-visible,
.nav a:focus-visible,
.nav-toggle-button:focus-visible {
  outline: 3px solid rgba(45, 116, 209, 0.55);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .event-links a,
  .btn-info,
  .btn-results,
  .link-list a,
  .club-meta a,
  .contact-link,
  .year-links a,
  .archive-list a,
  .nav a,
  .nav span,
  .nav-toggle-button {
    transition: none;
  }

  .button-primary:hover,
  .button-secondary:hover,
  .event-links a:hover,
  .btn-info:hover,
  .btn-results:hover,
  .link-list a:hover,
  .club-meta a:hover,
  .contact-link:hover,
  .year-links a:hover,
  .archive-list a:hover,
  .nav a:hover {
    transform: none;
  }
}