/* ============================================================
   PILLAR PARTNERS — "Add as Preferred Source" button
   Wired to Google's real Preferred Sources API (manual control).
   Matches pp-btn button system: Playfair/Lato, navy/gold tokens.
   ============================================================ */

.psrc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  font-family: var(--pp-font-sans, 'Lato', system-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: var(--pp-radius, 0.5rem);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--pp-transition, all 0.28s cubic-bezier(0.25,0.46,0.45,0.94));
  line-height: 1;
}

.psrc-btn svg { flex-shrink: 0; }

/* Light-section variant: dark-outline ghost button (navy on white/off-white) */
.psrc-btn--outline {
  background: transparent;
  color: var(--pp-navy, #002366);
  border-color: var(--pp-navy, #002366);
}
.psrc-btn--outline:hover {
  background: var(--pp-navy, #002366);
  color: #fff;
  transform: translateY(-2px);
}

/* Dark-section variant: light/inverse ghost button — REQUIRED on navy backgrounds
   (footer, hero, CTA banners) so the button stays legible. Never use
   .psrc-btn--outline there. */
.psrc-btn--inverse {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.psrc-btn--inverse:hover {
  border-color: var(--pp-accent, #C5A059);
  color: var(--pp-accent, #C5A059);
  transform: translateY(-2px);
}

/* Solid gold variant, for use as a small standalone CTA on light sections */
.psrc-btn--gold {
  background: var(--pp-accent, #C5A059);
  color: var(--pp-navy-dark, #001540);
  border-color: var(--pp-accent, #C5A059);
}
.psrc-btn--gold:hover {
  background: var(--pp-accent-dark, #A8843A);
  border-color: var(--pp-accent-dark, #A8843A);
  color: #fff;
  transform: translateY(-2px);
}

.psrc-btn--sm { padding: 0.45rem 0.9rem; font-size: 0.68rem; }

/* Subtle Google four-color hover glow — ties the button back to Google's
   brand without imitating Google's actual button design. */
.psrc-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(66,133,244,0.45),
    0 0 0 4px rgba(234,67,53,0.25);
}