/* VirtualPay Capital — header auth cluster (Log in / Get Started).
   Loaded after the Webflow export so it can layer on top without editing it.

   Button treatment matches the site's existing CTA pair (the "Find the right
   payment setup" / "Talk to Our Team" buttons on payments-landing): a solid
   #2563EB primary and a white 1.5px #CBD5E1 outlined secondary, both 10px
   radius. Equal 1.5px borders keep the two exactly the same height. */

.vp-auth {
  flex: none;
  flex-flow: row;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  display: flex;
}

.vp-auth-login,
.vp-auth-cta {
  white-space: nowrap;
  border-radius: 10px;
  padding: 10px 20px;
  font-family: Roboto, sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

/* Hover is purely additive — a glow ring and a brighter border. Nothing
   moves, so the header never shifts under the cursor. */
.vp-auth-login {
  color: #0b1b33;
  background-color: #fff;
  border: 1.5px solid #cbd5e1;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.vp-auth-login:hover,
.vp-auth-login:focus-visible {
  color: #0b1b33;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px #2563eb1f;
}

/* Dark navbar (For Business / For Individual / About Us / Partner): keep the
   outlined language but let the dark surface show through. */
.nav-black .vp-auth-login {
  color: #fff;
  background-color: #0000;
  border-color: #ffffff73;
}

.nav-black .vp-auth-login:hover,
.nav-black .vp-auth-login:focus-visible {
  color: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 4px #ffffff29;
}

.vp-auth-cta {
  color: #fff;
  background-color: #2563eb;
  border: 1.5px solid #0000;
  box-shadow: 0 6px 16px #2563eb3d;
  transition: box-shadow .15s ease;
}

.vp-auth-cta:hover,
.vp-auth-cta:focus-visible {
  color: #fff;
  box-shadow: 0 0 0 4px #2563eb40, 0 6px 18px #2563eb59;
}

/* Keep the header off the viewport edge once it is narrower than its 1280px
   max-width, so the CTA does not sit flush against the right side. */
@media screen and (min-width: 992px) and (max-width: 1339px) {
  .header-container-dark {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Between the Webflow hamburger breakpoint (991px) and ~1100px the four nav
   links plus the auth cluster overflow, so tighten the nav spacing. */
@media screen and (min-width: 992px) and (max-width: 1179px) {
  .nav-container {
    grid-column-gap: 22px;
    grid-row-gap: 22px;
    margin-left: 16px;
  }

  .nav-link,
  .nav-link-dark {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 17px;
  }

  .vp-auth {
    gap: 10px;
  }

  .vp-auth-login,
  .vp-auth-cta {
    padding: 9px 16px;
    font-size: 15px;
  }
}

/* Collapsed (hamburger) menu — stack the cluster under the nav links. */
@media screen and (max-width: 991px) {
  .nav-menu .cta-container {
    width: 100%;
  }

  .vp-auth {
    flex-flow: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    margin: 4px 0 8px;
    padding: 0 20px;
  }

  .vp-auth-login,
  .vp-auth-cta {
    text-align: center;
    padding-top: 13px;
    padding-bottom: 13px;
  }
}