/* ============================================================
   Preferred Source Button — Phone Number Leads
   Wired to Google's real Preferred Sources API (manual control).
   Uses the site's own DNA #18 tokens from main.css (--blue, --radius, --font).
   ============================================================ */

.psrc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font, 'Inter', sans-serif);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.7em 1.4em;
  border-radius: var(--radius, 8px);
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}

.psrc-btn:hover { transform: translateY(-1px); text-decoration: none; }
.psrc-btn:active { transform: translateY(0); }

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

/* ── Light-background variant ──
   Solid-outline like .cta-button--outline: for use on white/light sections
   (e.g. near the article byline). */
.psrc-btn--light {
  background: transparent;
  border: 2px solid var(--blue, #007BFF);
  color: var(--blue, #007BFF);
}
.psrc-btn--light:hover {
  background: var(--blue, #007BFF);
  color: var(--white, #fff);
}

/* ── Dark-background / inverse variant ──
   For use on the site footer (#001D3D) and the dark bottom-of-article CTA
   (#001D3D) — a solid dark-text ghost button would be invisible there, so
   this uses light text + a light border instead. */
.psrc-btn--dark {
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.55);
  color: var(--white, #fff);
}
.psrc-btn--dark:hover {
  background: var(--white, #fff);
  border-color: var(--white, #fff);
  color: var(--blue-dark, #0056C7);
}

/* Optional subtle Google four-color hover ring, kept tasteful/thin */
.psrc-btn:focus-visible {
  outline: 2px solid var(--blue, #007BFF);
  outline-offset: 2px;
}

.psrc-btn--footer {
  margin-top: var(--sp-4, 1rem);
}

.psrc-btn--byline {
  margin-top: var(--sp-3, 0.75rem);
  font-size: 0.82rem;
  padding: 0.5em 1.1em;
}

.psrc-btn--bottom {
  margin-top: var(--sp-4, 1rem);
}

@media (max-width: 480px) {
  .psrc-btn { width: 100%; justify-content: center; }
}