DonateNavButton.css

.donate-nav-button {
  display: inline-flex;
  align-items: center;
  align-self: stretch; /* matches the search box height */
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 450;
  white-space: nowrap;
  text-decoration: none;
  color: var(--vocs-text-color-secondary);
  background-color: var(--vocs-background-color-surface);
  border: 1px solid var(--vocs-border-color-primary);
  border-radius: 0.75rem;
  transition: color 0.1s ease, background-color 0.1s ease, border-color 0.1s ease;
}

/* Light mode borders are set alongside the search trigger in docs/pages/_root.css,
   which overrides the Vocs default for both controls together. */

.donate-nav-button:hover {
  color: var(--vocs-text-color-primary);
  background-color: var(--vocs-background-color-surfaceTint);
}

/* The one accent: SEAL blue, matching the sidebar heart and the footer buttons.
   Deliberately not `--vocs-color-accent`, which defaults to
   light-dark(black, white) and is not overridden by this site. */
.donate-nav-button svg {
  color: #4339db;
  flex-shrink: 0;
}

:root[data-vocs-theme='dark'] .donate-nav-button svg {
  color: #6b63e8; /* Brighter SEAL Blue for dark themes */
}

/* Follows the search input, which Vocs hides below its `md` breakpoint.
   Vocs overrides that breakpoint to 748px, so this is not Tailwind's default. */
@media (width < 748px) {
  .donate-nav-button {
    display: none;
  }
}