/* ============================================================================
   Waystar Studio - CTA buttons
   ----------------------------------------------------------------------------
   Single source of truth for every "Get Quote" style call-to-action that lives
   in the site chrome (top bar, mega menu, mobile drawer).

   The look is driven entirely by the --cta-* custom properties below, so a
   rebrand is a one-line change here instead of an edit in 13 HTML files.

   Loaded by every page BEFORE header.css.
   ========================================================================== */

:root {
  /* --- solid / primary CTA (top bar + mobile drawer) --- */
  --cta-bg:            #6D28D9;
  --cta-bg-hover:      #5B21B6;
  --cta-fg:            #FFFFFF;
  --cta-radius:        8px;
  --cta-radius-pill:   100px;
  --cta-pad-y:         9px;
  --cta-pad-x:         24px;
  --cta-font-size:     13.5px;
  --cta-font-weight:   700;
  --cta-gap:           7px;
  --cta-icon-size:     13px;
  --cta-transition:    background .18s ease, color .18s ease, border-color .18s ease;

  /* --- inverted CTA (sits on the purple mega-menu panel) --- */
  --cta-inv-bg:        #FFFFFF;
  --cta-inv-bg-hover:  #C4B5FD;
  --cta-inv-fg:        #4C1D95;
}

/* ---------------------------------------------------------------------------
   Shared base - every chrome CTA inherits from this
   ------------------------------------------------------------------------- */
.nav-quote-btn,
.mm-cta,
.mega-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cta-gap);
  font-family: inherit;
  font-weight: var(--cta-font-weight);
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: var(--cta-transition);
}

.nav-quote-btn .arrow-icon,
.mm-cta .arrow-icon,
.mega-cta-btn .arrow-icon {
  width: var(--cta-icon-size);
  height: var(--cta-icon-size);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   1. Top-bar CTA
   ------------------------------------------------------------------------- */
.nav-quote-btn {
  font-size: var(--cta-font-size);
  color: var(--cta-fg);
  background: var(--cta-bg);
  padding: var(--cta-pad-y) var(--cta-pad-x);
  border-radius: var(--cta-radius);
}
.nav-quote-btn:hover,
.nav-quote-btn:focus-visible { background: var(--cta-bg-hover); color: var(--cta-fg); }
.nav-quote-btn .arrow-icon { filter: brightness(0) invert(1); }

/* ---------------------------------------------------------------------------
   2. Mobile drawer CTA (full width, pill)
   ------------------------------------------------------------------------- */
.mm-cta {
  justify-content: center;
  font-size: 14px;
  color: var(--cta-fg);
  background: var(--cta-bg);
  padding: 13px 20px;
  border-radius: var(--cta-radius-pill);
}
.mm-cta:hover,
.mm-cta:focus-visible { background: var(--cta-bg-hover); color: var(--cta-fg); }
.mm-cta .arrow-icon { filter: brightness(0) invert(1); }

/* ---------------------------------------------------------------------------
   3. Mega-menu CTA (inverted - white on the purple promo card)
   ------------------------------------------------------------------------- */
.mega-cta-btn {
  font-size: 13px;
  color: var(--cta-inv-fg);
  background: var(--cta-inv-bg);
  padding: 10px 18px;
  border-radius: var(--cta-radius-pill);
}
.mega-cta-btn:hover,
.mega-cta-btn:focus-visible { background: var(--cta-inv-bg-hover); color: var(--cta-inv-fg); }

/* ---------------------------------------------------------------------------
   Page-level `.btn .btn-primary` classes must never repaint a chrome CTA.
   Some pages used to ship `class="btn btn-primary mm-cta"`; this keeps them
   safe even if that markup reappears.
   ------------------------------------------------------------------------- */
.btn.nav-quote-btn,
.btn.mm-cta,
.btn.mega-cta-btn,
.btn-primary.nav-quote-btn,
.btn-primary.mm-cta,
.btn-primary.mega-cta-btn { box-shadow: none; text-transform: none; letter-spacing: normal; }

.btn-primary.nav-quote-btn { background: var(--cta-bg); color: var(--cta-fg); border-radius: var(--cta-radius); }
.btn-primary.mm-cta        { background: var(--cta-bg); color: var(--cta-fg); border-radius: var(--cta-radius-pill); }
.btn-primary.mega-cta-btn  { background: var(--cta-inv-bg); color: var(--cta-inv-fg); border-radius: var(--cta-radius-pill); }

@media (max-width: 480px) {
  :root { --cta-pad-x: 16px; --cta-font-size: 12.5px; }
}