/* ═══════════════════════════════════════════════════════════════════
   site-buttons.css — site-wide primary CTA unification
   ─────────────────────────────────────────────────────────────────────
   Every primary action button across the site (hero CTAs, inline CTAs,
   sidebar CTAs, section band buttons, form submits) uses the SAME
   Entexis teal fill and the SAME fully-rounded pill shape. Loaded
   globally via views/partials/head.ejs so no page has to opt in.

   Ghost / outline / secondary buttons stay in their own files — this
   file only touches primary CTAs.
   ═══════════════════════════════════════════════════════════════════ */

/* Primary CTA — one style site-wide: navy fill, white outline, fully
   rounded pill. Matches the homepage hero secondary treatment (white
   border) but filled with brand navy. !important beats inline
   backgrounds from admin/DB copy so the style stays consistent
   wherever a button renders. */
.nav-cta,
.mob-cta,
.cta,
.cta-btn,
.cta-btn-primary,
.cta-band-btn,
.btn-primary,
.btn-cs-primary,
.btn-dark,
.git-btn-primary,
.ins-btn-primary,
.ins-btn-ghost,
.btn-ghost,
.btn-cs-outline,
.git-btn-outline,
.sidebar-cta-btn,
.inline-cta-link,
.blog-inline-cta-btn,
.cta-btn-sec,
.hn-cta-primary,
.hn-cta-secondary,
.hn-how-btn,
.hn-news-strip-btn {
  background-color: #1a2857 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 999px !important;
  transition: background-color .2s ease, transform .15s ease;
}
/* Hover: nudge any arrow SVG inside the button to the right instead of
   changing colour. Prep every arrow-shaped SVG with a transition so the
   shift feels smooth. */
.nav-cta svg,
.mob-cta svg,
.cta svg,
.cta-btn svg,
.cta-btn-primary svg,
.cta-band-btn svg,
.btn-primary svg,
.btn-cs-primary svg,
.btn-dark svg,
.git-btn-primary svg,
.ins-btn-primary svg,
.ins-btn-ghost svg,
.btn-ghost svg,
.btn-cs-outline svg,
.git-btn-outline svg,
.sidebar-cta-btn svg,
.inline-cta-link svg,
.hn-cta-primary svg,
.hn-cta-secondary svg,
.hn-how-btn svg,
.hn-news-strip-btn svg {
  transition: transform .2s ease;
}
.nav-cta:hover svg,
.mob-cta:hover svg,
.cta:hover svg,
.cta-btn:hover svg,
.cta-btn-primary:hover svg,
.cta-band-btn:hover svg,
.btn-primary:hover svg,
.btn-cs-primary:hover svg,
.btn-dark:hover svg,
.git-btn-primary:hover svg,
.ins-btn-primary:hover svg,
.ins-btn-ghost:hover svg,
.btn-ghost:hover svg,
.btn-cs-outline:hover svg,
.git-btn-outline:hover svg,
.sidebar-cta-btn:hover svg,
.inline-cta-link:hover svg,
.hn-cta-primary:hover svg,
.hn-cta-secondary:hover svg,
.hn-how-btn:hover svg,
.hn-news-strip-btn:hover svg {
  transform: translateX(4px);
}

/* Header nav CTA — match the padding/size of other primary CTAs
   (was 10px 28px, too small). Includes an inline SVG arrow now so
   the hover shift animates like every other button on the site. */
.nav-cta,
.mob-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 12px 26px !important;
  font-size: 13px !important;
}
.nav-cta svg,
.mob-cta svg {
  width: 15px;
  height: 15px;
}

/* Every other primary CTA: inline-flex layout so an SVG arrow (when
   present) sits inline with the label and gets the hover shift.
   Fixed 16×16 SVG size prevents runaway defaults when the source
   markup omits width/height. */
.cta,
.cta-btn,
.cta-btn-primary,
.cta-band-btn,
.btn-primary,
.btn-cs-primary,
.btn-dark,
.git-btn-primary,
.ins-btn-primary,
.ins-btn-ghost,
.btn-ghost,
.btn-cs-outline,
.git-btn-outline,
.sidebar-cta-btn,
.inline-cta-link,
.blog-inline-cta-btn,
.cta-btn-sec,
.hn-cta-primary,
.hn-cta-secondary,
.hn-how-btn,
.hn-news-strip-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.cta svg,
.cta-btn svg,
.cta-btn-primary svg,
.cta-band-btn svg,
.btn-primary svg,
.btn-cs-primary svg,
.btn-dark svg,
.git-btn-primary svg,
.ins-btn-primary svg,
.ins-btn-ghost svg,
.btn-ghost svg,
.btn-cs-outline svg,
.git-btn-outline svg,
.sidebar-cta-btn svg,
.inline-cta-link svg,
.blog-inline-cta-btn svg,
.cta-btn-sec svg,
.hn-cta-primary svg,
.hn-cta-secondary svg,
.hn-how-btn svg,
.hn-news-strip-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Normalise the hover state on every primary CTA — cancel per-class
   effects (opacity fade, background flip, translateY lift, box-shadow)
   that were defined in older files. The ONLY hover feedback is the
   arrow SVG sliding right + colour staying navy. */
.nav-cta:hover,
.mob-cta:hover,
.cta:hover,
.cta-btn:hover,
.cta-btn-primary:hover,
.cta-band-btn:hover,
.btn-primary:hover,
.btn-cs-primary:hover,
.btn-dark:hover,
.git-btn-primary:hover,
.ins-btn-primary:hover,
.ins-btn-ghost:hover,
.btn-ghost:hover,
.btn-cs-outline:hover,
.git-btn-outline:hover,
.sidebar-cta-btn:hover,
.inline-cta-link:hover,
.blog-inline-cta-btn:hover,
.cta-btn-sec:hover,
.hn-cta-primary:hover,
.hn-cta-secondary:hover,
.hn-how-btn:hover,
.hn-news-strip-btn:hover {
  background-color: #1a2857 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: #ffffff !important;
}