/* "Apply IPO" header button: pulsing ring plus a blinking live dot, so a
   time-sensitive offer reads as active rather than as one more pink button. */
/* Display is left to Bootstrap's d-none / d-lg-inline-flex utilities so the
   desktop and mobile variants can be shown independently. */
.cta-ipo{
  position:relative;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  border:none !important;
  border-radius:999px !important;
  padding:9px 20px !important;
  font-size:0.875rem !important;
  font-weight:700 !important;
  line-height:1.35;
  color:#fff !important;
  background:linear-gradient(135deg,#e0097a 0%,#ff4d9f 100%) !important;
  box-shadow:0 4px 14px rgba(224,9,122,0.38);
  animation:ipoPulse 2.4s ease-in-out infinite;
  transition:transform 0.25s ease,box-shadow 0.25s ease;
}
.cta-ipo:hover,
.cta-ipo:focus{
  color:#fff !important;
  transform:translateY(-2px);
  animation-play-state:paused;
  box-shadow:0 10px 26px rgba(224,9,122,0.5);
}

@keyframes ipoPulse{
  0%,100%{box-shadow:0 4px 14px rgba(224,9,122,0.38),0 0 0 0 rgba(224,9,122,0.45)}
  50%{box-shadow:0 4px 18px rgba(224,9,122,0.48),0 0 0 9px rgba(224,9,122,0)}
}

/* margin rather than flex gap, which would also space the label's text nodes */
.cta-ipo-dot{
  width:9px;
  height:9px;
  flex:0 0 9px;
  margin-right:8px;
  border-radius:50%;
  background:#5dfca2;
  animation:ipoBlink 1.4s ease-in-out infinite;
}
@keyframes ipoBlink{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(93,252,162,0.75)}
  50%{opacity:0.4;box-shadow:0 0 0 6px rgba(93,252,162,0)}
}

/* Compact version that stays visible beside the mobile menu toggle. The theme
   puts navbar buttons at order:2 and drops ms-auto, which would land this
   after the hamburger; both need forcing back. */
.cta-ipo-mobile{
  order:0 !important;
  margin-left:auto !important;
  padding:7px 15px !important;
  font-size:0.8125rem !important;
}

/* The button sits at the end of the nav group, in the open space left of the
   right-hand CTAs, so it always reads "Apply IPO" at full length. */
.cta-ipo-word{display:inline}

@media (min-width:992px){
  .navbar-nav .nav-item-ipo{margin-left:0.75rem}
}
/* Room for the full "Apply IPO" label comes from the nav's own spacing, so the
   right-hand CTAs keep their full labels at every width. */
@media (min-width:992px) and (max-width:1599.98px){
  .navbar-expand-lg .navbar-nav .nav-link{
    padding-left:0.55rem !important;
    padding-right:0.55rem !important;
  }
  .navbar-expand-lg .navbar-nav.ms-lg-5{margin-left:1rem !important}
}
@media (min-width:992px) and (max-width:1365.98px){
  .cta-ipo{padding:8px 13px !important;font-size:0.8125rem !important}
  .navbar-expand-lg .navbar-nav .nav-link{
    padding-left:0.38rem !important;
    padding-right:0.38rem !important;
    font-size:0.9rem;
  }
  .navbar-expand-lg .navbar-nav.ms-lg-5{margin-left:0.25rem !important}
  .navbar-nav .nav-item-ipo{margin-left:0.4rem}
  .navbar-brand{margin-right:0.75rem !important}
}

/* Below 1280 the row would otherwise be clipped rather than scroll, so trim
   harder: a smaller logo and tighter links. */
@media (min-width:992px) and (max-width:1279.98px){
  .navbar-brand img{height:42px !important}
  .navbar-expand-lg .navbar-nav .nav-link{
    padding-left:0.3rem !important;
    padding-right:0.3rem !important;
    font-size:0.85rem;
  }
  .navbar-nav .btn.cta-primary,
  .navbar-nav .btn.cta-secondary,
  .navbar-nav .btn.cta-ghost{
    padding-left:12px !important;
    padding-right:12px !important;
    font-size:0.8125rem !important;
  }
  .navbar-nav .nav-item-ipo{margin-left:0.2rem}
  .navbar-nav .nav-item.ms-lg-2{margin-left:0.25rem !important}
}
/* Keep every CTA on one line; the widths above are sized for that. */
@media (min-width:992px){
  .navbar-nav .btn.cta-primary,
  .navbar-nav .btn.cta-secondary,
  .navbar-nav .btn.cta-ghost{white-space:nowrap}
}

/* The very edge of the lg breakpoint, where the row is tightest of all. */
@media (min-width:992px) and (max-width:1023.98px){
  .navbar-brand img{height:38px !important}
  .navbar-brand{margin-right:0.35rem !important}
  .navbar-expand-lg .navbar-nav .nav-link{
    padding-left:0.22rem !important;
    padding-right:0.22rem !important;
    font-size:0.8125rem;
  }
  .cta-ipo{padding:7px 10px !important;font-size:0.75rem !important}
  .navbar-nav .btn.cta-primary,
  .navbar-nav .btn.cta-secondary,
  .navbar-nav .btn.cta-ghost{
    padding-left:9px !important;
    padding-right:9px !important;
    font-size:0.75rem !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .cta-ipo,
  .cta-ipo-dot{animation:none}
  .cta-ipo:hover{transform:none}
}

/* Below xl the navbar collapses, so the CTAs live inside the dropdown panel
   rather than the inline row. Stack them full width, give them a 44px touch
   target, and let the Log In menu open in flow instead of floating out of
   the panel (and off the side of a phone screen). */
@media (max-width:1199.98px){
  .navbar-collapse .navbar-nav .nav-item{width:100%}
  .navbar-collapse .navbar-nav .btn.cta-primary,
  .navbar-collapse .navbar-nav .btn.cta-secondary,
  .navbar-collapse .navbar-nav .btn.cta-ghost{
    display:flex !important;
    width:100%;
    align-items:center;
    justify-content:center;
    min-height:44px;
    margin:0.5rem 0 0;
  }
  .navbar-collapse .navbar-nav .nav-item.ms-lg-2{margin-left:0 !important}
  .navbar-collapse .login-menu{
    position:static !important;
    float:none;
    width:100%;
    margin-top:0.25rem;
    transform:none !important;
  }
  .navbar-collapse .login-menu .dropdown-item{
    min-height:44px;
    display:flex;
    align-items:center;
  }
}

/* Touch and legibility minimums on phones: the hamburger was 30x38, form
   fields ~40px tall, and the footer disclosure set at 11px. */
@media (max-width:1199.98px){
  .navbar-toggler{
    min-width:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}
@media (max-width:767.98px){
  .form-control,
  .form-select{min-height:44px}
  footer .footer-disclosure,
  footer .footer-disclosure a{font-size:0.75rem}
}