/* Custom overrides layered on top of the Webflow CSS.
   Loaded after optionbots.webflow.css in _document.tsx. */

/* Nav fit fix:
   The Webflow nav only collapses to the hamburger below 992px (data-collapse="medium").
   Between ~992px and ~1150px the 8 nav items + "Get Started" button do not fit and the
   right side ("Sign In" / "Get Started") overflows off-screen. Tighten spacing in that
   band only so every option stays visible. Desktop (>1150px) and mobile (<992px) unchanged. */
@media screen and (min-width: 992px) and (max-width: 1150px) {
  .nav-wrapper {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }

  .nav-link {
    font-size: .875rem;
  }

  .navbar_link {
    font-size: .875rem;
  }

  .nav-wrapper .button-2 {
    padding: .6rem 1.1rem;
  }
}

/* Mobile menu cleanup (<992px, the collapsed hamburger menu):
   Make every top-level item a full-width, left-aligned row separated by divider
   lines, with the dropdown chevron pushed to the right edge. Matches the cleaner
   stacked look requested. Desktop nav (>=992px) is unaffected. */
@media screen and (max-width: 991px) {
  .nav-wrapper.w-nav-menu {
    padding-left: 0;
    padding-right: 0;
    padding-top: .5rem;
    padding-bottom: .5rem;
    text-align: left;
  }

  /* Each top-level row: full width, left aligned, divider underneath */
  .nav-wrapper.w-nav-menu > .nav-link,
  .nav-wrapper.w-nav-menu > .drobdown {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .nav-wrapper.w-nav-menu > .nav-link {
    padding: 1rem 1.5rem;
  }

  /* Dropdown toggle: label left, chevron to the right edge */
  .nav-wrapper.w-nav-menu .dropdown-toggle-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.5rem;
  }

  .nav-wrapper.w-nav-menu .navbar_link {
    width: auto;
    text-align: left;
  }

  .nav-wrapper.w-nav-menu .dropdown-toggle-2 .icon {
    margin-left: 0;
  }

  /* Expanded dropdown sub-links also left aligned for consistency */
  .nav-wrapper.w-nav-menu .dropdown-list-3.w--open {
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .nav-wrapper.w-nav-menu .dropdown-list-3 .link-4 {
    text-align: left;
    width: 100%;
    padding-left: 2.25rem;
  }

  /* CTA button sits below the last divider, inset to match the rows */
  .nav-wrapper.w-nav-menu > .button-2 {
    width: auto;
    margin: 1rem 1.5rem 0;
    text-align: center;
  }
}