/*
  Custom-styled "Add as Preferred Source" button — Fairfield Peak Roofing
  (lancasterohioroofers.com). Wired to Google's real Preferred Sources API
  in manual-control mode; see js/preferred-source-button.js.

  Tokens match css/styles.css:
    --brand-primary:     #ea580c
    --brand-primary-600: #dc4a06 (hover)
    --brand-secondary:   #1a1a1a
    --radius-md:         8px
    font stack:          Manrope, system-ui, sans-serif

  Two variants:
    .psrc-btn            solid orange, white text — safe on ANY background
                          (light or dark). Used in the footer (dark) and
                          anywhere else that isn't guaranteed light.
    .psrc-btn--ghost      dark-outline ghost — ONLY for light/white
                          backgrounds (e.g. blog article byline area,
                          which sits on bg-gray-50). Do not use this
                          variant on a dark section.
*/

.psrc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.85em 1.4em;
  border-radius: 8px;
  border: 2px solid transparent;
  background-color: #ea580c;
  color: #ffffff;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 10px 25px rgba(234, 88, 12, 0.2);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
  cursor: pointer;
}

.psrc-btn:hover {
  background-color: #dc4a06;
  box-shadow: 0 12px 28px rgba(234, 88, 12, 0.32);
}

.psrc-btn:active {
  transform: translateY(1px);
}

/* Ghost/outline variant — dark text on a light background ONLY.
   Never use on a dark section (e.g. the site footer or the dark
   end-of-article CTA box) — it becomes illegible there. */
.psrc-btn--ghost {
  background-color: transparent;
  color: #1a1a1a;
  border-color: #e5e7eb;
  box-shadow: none;
}

.psrc-btn--ghost:hover {
  color: #ea580c;
  border-color: #ea580c;
  background-color: #fff7ed;
  box-shadow: none;
}

/* Inverse/outline-white variant — for use on dark backgrounds where a
   filled orange button would compete with an existing primary CTA
   (e.g. the dark end-of-article box, next to btn-primary). */
.psrc-btn--inverse {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.psrc-btn--inverse:hover {
  border-color: #ea580c;
  color: #ea580c;
  background-color: rgba(255, 255, 255, 0.06);
}

/* Small icon (Google "G" mark stand-in via 4-color dot) for a tasteful
   nod to Google without copying their button design. Optional. */
.psrc-btn__dot {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: conic-gradient(#4285f4 0deg 90deg, #ea4335 90deg 180deg, #fbbc05 180deg 270deg, #34a853 270deg 360deg);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .psrc-btn {
    font-size: 0.78rem;
    padding: 0.75em 1.1em;
  }
}