/* =============================================================
   NLIGN — Buttons
   All .nlign-btn--* variants.
   Shared base applied to primary, solid, and outline together.
   ============================================================= */

/* ── Shared base ────────────────────────────────────────────── */
.nlign-btn--primary,
.nlign-btn--solid,
.nlign-btn--outline,
.nlign-btn--orange-outline {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--nlign-nav-font-family);
  font-weight:     var(--nlign-nav-font-weight);
  font-size:       var(--nlign-nav-font-size);
  letter-spacing:  var(--nlign-nav-letter-spacing);
  line-height:     var(--nlign-nav-line-height);
  border-radius:   0;
  white-space:     nowrap;
  cursor:          pointer;
  text-decoration: none;
  transition:      background-color var(--nlign-transition),
                   color            var(--nlign-transition),
                   border-color     var(--nlign-transition);
}

/* ── Primary: orange fill (navbar CTA) ─────────────────────── */
.nlign-btn--primary {
  background-color: var(--nlign-color-orange);
  color:            #000;
  border:           none;
  padding:          14px 24px;
  height:           47px;
}

.nlign-btn--primary:hover,
.nlign-btn--primary:focus {
  background-color: #d43a14;
  color:            #000;
}

/* ── Solid: grey-olive fill (hero / CTA banner) ─────────────── */
.nlign-btn--solid {
  background-color: var(--nlign-color-grey-olive);
  color:            var(--nlign-color-onyx);
  border:           none;
  padding:          16px 32px;
  min-width:        152px;
  height:           51px;
}

.nlign-btn--solid:hover,
.nlign-btn--solid:focus {
  background-color: #6f8278;
  color:            var(--nlign-color-dust-grey);
}

/* ── Outline: grey-olive border (hero secondary) ────────────── */
.nlign-btn--outline {
  background-color: transparent;
  color:            var(--nlign-color-dust-grey);
  border:           2px solid var(--nlign-color-grey-olive);
  padding:          16px 32px;
  min-width:        193px;
  height:           51px;
}

.nlign-btn--outline:hover,
.nlign-btn--outline:focus {
  background-color: var(--nlign-color-grey-olive);
  color:            var(--nlign-color-dust-grey);
}

.btn.white {
  background-color: var(--nlign-color-grey-olive);
}

/* ── Orange outline: solution section CTA ───────────────────── */
.nlign-btn--orange-outline {
  background-color: transparent;
  color:            var(--nlign-color-orange);
  border:           2px solid var(--nlign-color-orange);
  padding:          16px 32px;
  min-width:        235px;
  height:           51px;
  gap:              8px;
  padding-right:    72px;
  position:         relative;
}

/* ── Arrow pseudo-element (replaces <img class="nlign-btn__arrow">) ── */
.nlign-btn--orange-outline::after {
  content:             '';
  display:             block;
  position:            absolute;
  right:               28px;
  top:                 50%;
  transform:           translateY(-50%);
  width:               31px;
  height:              13px;
  background-image:    var(--arrow-default, none);
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     contain;
  transition:          background-image 0s;
  flex-shrink:         0;
}

/* Hover / focus — swap to hover arrow + fill background */
.nlign-btn--orange-outline:hover,
.nlign-btn--orange-outline:focus {
  background-color: var(--nlign-color-orange);
  color:            #000;
}

.nlign-btn--orange-outline:hover::after,
.nlign-btn--orange-outline:focus::after {
  background-image: var(--arrow-hover, var(--arrow-default, none));
}