/* ============================================================
   Franklin Funding — "Add as Preferred Source" button
   assets/css/preferred-source.css
   Brand tokens sourced from assets/css/theme.css (--ff-orange /
   --ff-navy family) and css/styles.css (--radius). Two visual
   variants are provided because the button appears on both dark
   (footer, dark CTA panels) and light (article top) backgrounds.
   ============================================================ */

.psrc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', var(--font-sans, sans-serif);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.2;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius, 8px);
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition, all 0.3s ease);
}

.psrc-btn__icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Dark-background variant: footers, dark CTA panels.
   Light text on a translucent orange fill with a light border —
   never a dark-on-dark ghost button here. */
.psrc-btn--inverse {
  background: rgba(255, 94, 0, 0.14);
  color: #ffffff !important;
  border: 1.5px solid var(--ff-orange, #FF5E00);
}

.psrc-btn--inverse:hover {
  background: var(--ff-orange, #FF5E00);
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* Light-background variant: article top (near byline), on the
   page's default white/light-gray background. Solid navy so it
   reads as a secondary (not primary CTA) action, orange on hover
   to tie back to the brand accent. */
.psrc-btn--solid {
  background: var(--ff-navy, #1A2B3C);
  color: #ffffff !important;
  border: 1.5px solid var(--ff-navy, #1A2B3C);
}

.psrc-btn--solid:hover {
  background: var(--ff-orange, #FF5E00);
  border-color: var(--ff-orange, #FF5E00);
  color: #ffffff !important;
  transform: translateY(-2px);
}

.psrc-btn:focus-visible {
  outline: 2px solid var(--ff-orange, #FF5E00);
  outline-offset: 2px;
}

/* Small wrapper so the footer/CTA placements can center or align
   the button without touching surrounding layout rules. */
.psrc-btn-wrap {
  display: flex;
  justify-content: center;
  margin: 0.75rem 0;
}

.psrc-btn-wrap--footer {
  justify-content: flex-start;
  margin-top: 1rem;
}