/* ================= Button component ================= */
.btn, a.btn, button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  border:none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
  will-change: transform;
}

/* sizes */
.btn--sm { padding: .36rem .6rem; font-size: .9rem; border-radius: 8px; }
.btn--md { padding: .6rem 1rem; font-size: 1rem; border-radius: 10px; }
.btn--lg { padding: .9rem 1.6rem; font-size: 1.05rem; border-radius: 12px; }

/* variants */
.btn--primary {
  background: var(--color-primary, #2050f2);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(11,95,255,0.12);
}
.btn--ghost {
  background: transparent;
  color: var(--color-primary, #2050f2);
  border: 1px solid rgba(11,95,255,0.12);
}
.btn--white {
  background: #ffffff;
  color: var(--color-primary, #2050f2);
  box-shadow: 0 6px 20px rgba(11,95,255,0.12);
}
.btn--outline {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
}

/* hover/focus states */
.btn:hover, .btn:focus {
  transform: translateY(-2px);
  text-decoration: none;
}
.btn--ghost:hover, .btn--ghost:focus { background: var(--color-primary, #2050f2); color: #fff; box-shadow: 0 12px 30px rgba(11,95,255,0.10); }
.btn--white:hover, .btn--white:focus { background: #e6f0ff; }

/* header-specific behavior: ensure header contact button shows white at top and becomes primary when scrolled.
   Target .header-contact specifically to avoid affecting other buttons.
*/

/* Default (when header is in its initial state) - make header button white.
   This gives the correct appearance even before JS runs.
*/
.site-header .header-cta .btn.header-contact,
.header .header-cta .btn.header-contact {
  background: #ffffff !important;
  color: var(--color-primary, #2050f2) !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(11,95,255,0.12) !important;
}

/* When header becomes scrolled / sticky — button turns primary (blue) */
.site-header.scrolled .header-cta .btn.header-contact,
.site-header.is-sticky .header-cta .btn.header-contact,
.header.scrolled .header-cta .btn.header-contact,
.header.is-sticky .header-cta .btn.header-contact,
.site-header.scrolled .header-cta .btn.header-contact:focus,
.site-header.is-sticky .header-cta .btn.header-contact:focus {
  background: var(--color-primary, #2050f2) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(11,95,255,0.12) !important;
}

/* Also handle the .at-top / scrolled combination used by components.js for safety */
.site-header.at-top .header-cta .btn.header-contact,
.header.at-top .header-cta .btn.header-contact {
  background: #ffffff !important;
  color: var(--color-primary, #2050f2) !important;
}
.site-header.at-top .header-cta .btn.header-contact:hover,
.header.at-top .header-cta .btn.header-contact:hover {
  background: #e6f0ff !important;
}

/* =======================================================================
   NEW: Header CTA rendered via shortcode (GreenPopup etc.)
   - Plugin may output <a> or <button> without .btn classes.
   - This enforces the same header button styling on that output.
   ======================================================================= */
.site-header .header-cta .abcontact-header-cta-shortcode a,
.site-header .header-cta .abcontact-header-cta-shortcode button,
.header .header-cta .abcontact-header-cta-shortcode a,
.header .header-cta .abcontact-header-cta-shortcode button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;

  padding: .6rem 1rem;
  font-size: 1rem;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;

  background: #ffffff;
  color: var(--color-primary, #2050f2);
  border: none;
  box-shadow: 0 6px 20px rgba(11,95,255,0.12);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.site-header.scrolled .header-cta .abcontact-header-cta-shortcode a,
.site-header.scrolled .header-cta .abcontact-header-cta-shortcode button,
.site-header.is-sticky .header-cta .abcontact-header-cta-shortcode a,
.site-header.is-sticky .header-cta .abcontact-header-cta-shortcode button{
  background: var(--color-primary, #2050f2) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(11,95,255,0.12) !important;
}