/* ─────────────────────────────────────────────────────────────
   Preferred Source button — Google Preferred Sources API,
   manual control mode, styled with Aevum Transform's own tokens.
   See assets/js/preferred-source.js for the wiring logic.
   ───────────────────────────────────────────────────────────── */

.psrc-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 0.5rem);
  padding: var(--sp-3, 0.75rem) var(--sp-6, 1.5rem);
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-sans, 'Raleway', sans-serif);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--dur-base, 220ms) var(--ease-out, cubic-bezier(.215,.61,.355,1));
}

.psrc-btn__icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* Solid burgundy — for use on white/parchment (light) backgrounds */
.psrc-btn--solid {
  background: var(--brand-700, #800020);
  color: var(--color-white, #fff);
  border: 1.5px solid var(--brand-700, #800020);
}
.psrc-btn--solid:hover {
  background: var(--brand-800, #660019);
  border-color: var(--brand-800, #660019);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(128, 0, 32, .35);
}

/* Ghost burgundy outline — for use on white/parchment (light) backgrounds */
.psrc-btn--ghost {
  background: transparent;
  color: var(--brand-700, #800020);
  border: 1.5px solid var(--brand-700, #800020);
}
.psrc-btn--ghost:hover {
  background: var(--brand-700, #800020);
  color: var(--color-white, #fff);
}

/* Inverse/light — REQUIRED on dark backgrounds (footer, art-hero burgundy
   band, art-cta-dark). Light text + light border so it stays legible
   against --brand-950 / --brand-700 dark fills. Do not use the ghost
   or solid burgundy variants on a dark background — burgundy text/border
   on a near-black or burgundy fill is illegible. */
.psrc-btn--inverse {
  background: transparent;
  color: var(--color-parchment, #F5F5DC);
  border: 1.5px solid rgba(245, 245, 220, .55);
}
.psrc-btn--inverse:hover {
  background: rgba(245, 245, 220, .12);
  border-color: var(--color-parchment, #F5F5DC);
  transform: translateY(-1px);
}

.psrc-btn--lg {
  padding: var(--sp-4, 1rem) var(--sp-8, 2rem);
  font-size: var(--text-base, 1rem);
}

/* Subtle Google-brand-color glow on focus/hover — ties the button back to
   Google without imitating Google's own button design. */
.psrc-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, .35), 0 0 0 5px rgba(234, 67, 53, .18);
}