/*
 * Mobile/desktop navbar for the Webflow homepage snapshot.
 *
 * Every other route renders the React header in
 * src/components/HomepageHeader.tsx, which ships this same block inline as
 * LS_NAV_CSS. The homepage is a Webflow export served in an iframe, so it
 * cannot use that component — it gets the rules from here instead. The two
 * are the same stylesheet and have to stay in sync: change one, change the
 * other, or the homepage menu drifts away from the rest of the site again.
 *
 * Everything is scoped to `.ls-nav`, which outranks homepage.branded.css /
 * homepage.service.css / homepage.contact.css on specificity alone — those
 * three sheets disagree about this navbar, so the header has to own its own
 * geometry no matter which one a route happens to load.
 */

/* ---- homepage-only ------------------------------------------------------ *
 * index.html drops Webflow's `w-nav` / `w-dropdown` hook classes so the
 * Webflow navbar and dropdown modules leave the header alone (ls-nav.js drives
 * it instead). Those two classes also carried a stacking order, so restate it
 * here. The React header keeps the classes and inherits this from Webflow.
 */
.ls-nav{z-index:1000}
.ls-nav .dropdown-link{z-index:900}

/* Webflow's interactions engine stamps a hidden initial state (opacity:0 plus a
   2em translate) inline on the dropdown panels, ready for the animation the
   dropdown module would have played. ls-nav.js opens them by class instead, so
   that inline state has to be overridden outright — hence !important. */
.ls-nav .dropdown-list{opacity:1 !important;transform:none !important}

/* ---- dropdown panels ---------------------------------------------------- */
.ls-nav .nav-row{z-index:5}
.ls-nav .nav-buttons{z-index:4}
.ls-nav .dropdown-link{position:relative}
.ls-nav .dropdown-list{z-index:60}

.ls-nav .dropdown-toggle{
  background:none;border:0;font:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.ls-nav .dropdown-toggle:focus-visible,
.ls-nav .nav-link:focus-visible,
.ls-nav .menu-button:focus-visible,
.ls-nav .brand:focus-visible{
  outline:2px solid #e2a866;outline-offset:4px;border-radius:6px;
}

.ls-nav .dropdown-chevron{
  transition:transform .2s ease;
  transform:rotate(90deg);
  position:static;
  margin:0;
}
.ls-nav .dropdown-link.w--open .dropdown-chevron{transform:rotate(-90deg)}

.ls-nav .dropdown-list.w-dropdown-list{display:none}
.ls-nav .dropdown-list.w-dropdown-list.w--open{display:block}

.ls-nav .ls-nav-mobile-cta{display:none}

/* ---- hamburger ---------------------------------------------------------- */
.ls-nav .menu-button{
  background:none;border:0;padding:0;cursor:pointer;
  align-items:center;justify-content:center;width:34px;height:34px;
}
.ls-nav .ls-burger{
  display:block;position:relative;width:20px;height:14px;
}
.ls-nav .ls-burger span{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:#fff;transition:transform .25s ease,opacity .2s ease,top .25s ease;
}
.ls-nav .ls-burger span:nth-child(1){top:0}
.ls-nav .ls-burger span:nth-child(2){top:6px}
.ls-nav .ls-burger span:nth-child(3){top:12px}
.ls-nav.is-mobile-open .ls-burger span:nth-child(1){top:6px;transform:rotate(45deg)}
.ls-nav.is-mobile-open .ls-burger span:nth-child(2){opacity:0}
.ls-nav.is-mobile-open .ls-burger span:nth-child(3){top:6px;transform:rotate(-45deg)}

/* ---- desktop ------------------------------------------------------------ */
@media screen and (min-width:992px){
  .ls-nav .menu-button.w-nav-button{display:none}
  .ls-nav .nav-menu{display:flex}

  /* Top-level items are labels, not prose. Left to flex they shrink, and
     "Dispatch Software" — the longest label in the bar — breaks onto a second
     line just above the 992px breakpoint. Pin their width and let the spacing
     around them absorb a narrow window instead. */
  .ls-nav .nav-menu > .nav-link,
  .ls-nav .nav-menu > .dropdown-link{flex:0 0 auto;white-space:nowrap}

  /* One column, sized to its links — never a three-column mega-menu. */
  .ls-nav .dropdown-list.solutions-dropdown,
  .ls-nav .dropdown-list.resources-dropdown{
    width:max-content;
    min-width:220px;
    max-width:min(280px,calc(100vw - 40px));
    top:100%;
    left:0;
    right:auto;
    padding-top:22px;   /* hover bridge from the toggle down to the panel */
  }
  /* The last dropdown sits at the end of the bar: hang it off its own right
     edge so it can't run past the viewport on a small laptop — pages wrap the
     header in overflow-x:clip, which would cut the overhang off entirely. */
  .ls-nav .nav-menu > .dropdown-link:last-of-type .dropdown-list{
    left:auto;
    right:0;
  }

  .ls-nav .dropdown-grid,
  .ls-nav .dropdown-grid.glass-effect{
    grid-column-gap:0;
    grid-row-gap:0;
    gap:0;
    grid-template-rows:auto;
    grid-template-columns:1fr;
    padding:14px 18px;
    background-color:#14100b;
    /* A short laptop window must still be able to reach every link. */
    max-height:calc(100vh - var(--ls-nav-menu-top,120px) - 24px);
    max-height:calc(100dvh - var(--ls-nav-menu-top,120px) - 24px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .ls-nav .menu-links-7.dropdown-main-menu{padding:0}
}

/* Small laptops and landscape tablets. At 992px the bar is exactly as wide as
   its contents, so something has to give — spend the whitespace, not the type.
   The 100px channel between wordmark and menu goes first, the gaps between
   items second; both are back to full size from 1280px up. */
@media screen and (min-width:992px) and (max-width:1279px){
  .ls-nav .nav-row{gap:40px}
  .ls-nav .nav-menu{gap:clamp(18px,6.2vw - 50px,30px)}
}

/* ---- mobile panel ------------------------------------------------------- */
@media screen and (max-width:991px){
  .ls-nav .menu-button.w-nav-button{display:flex}

  .ls-nav .nav-menu.w-nav-menu{display:none}
  .ls-nav.is-mobile-open .nav-menu.w-nav-menu{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    grid-column-gap:0;
    grid-row-gap:0;
    gap:0;
    position:absolute;
    top:calc(100% + 12px);
    left:0;
    right:0;
    width:100%;
    /* --ls-nav-menu-top is measured from the real bar, so the panel ends
       above the fold on any screen instead of guessing at a fixed offset. */
    max-height:calc(100vh - var(--ls-nav-menu-top,112px) - 16px);
    max-height:calc(100dvh - var(--ls-nav-menu-top,112px) - 16px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:10px 14px 18px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    background-color:#1a150f;
    background-color:color-mix(in srgb,#14100b 92%,#fff 8%);
    box-shadow:0 28px 70px rgba(0,0,0,.6);
    z-index:50;
  }

  .ls-nav .nav-menu .nav-link{
    color:#fff;
    width:100%;
    margin:0;
    text-align:left;
    padding:14px 6px;
    font-size:16px;
    line-height:20px;
    display:block;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .ls-nav .nav-menu .nav-link:hover{color:#e2a866}

  .ls-nav .dropdown-link{width:100%;align-items:stretch}
  .ls-nav .dropdown-toggle,
  .ls-nav .dropdown-toggle.menu-toggle.is-2nd{
    color:#fff;
    width:100%;
    justify-content:space-between;
    align-items:center;
    padding:0;
    font-size:16px;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .ls-nav .dropdown-toggle .nav-link{border-bottom:0;padding:14px 6px}
  .ls-nav .dropdown-chevron{color:#fff;margin-right:6px}

  .ls-nav .dropdown-list.solutions-dropdown,
  .ls-nav .dropdown-list.resources-dropdown{
    position:static;width:auto;max-width:none;min-width:0;padding:0;
  }
  .ls-nav .dropdown-list.solutions-dropdown.w--open,
  .ls-nav .dropdown-list.resources-dropdown.w--open{
    background-color:rgba(255,255,255,.045);
    border:0;
    border-radius:12px;
    margin:8px 0 12px;
    padding:6px 4px;
    box-shadow:none;
  }
  .ls-nav .dropdown-grid,
  .ls-nav .dropdown-grid.glass-effect{
    display:flex;
    flex-direction:column;
    max-height:none;
    overflow:visible;
    background:transparent;border:0;box-shadow:none;padding:0;backdrop-filter:none;
  }
  .ls-nav .menu-links-7,
  .ls-nav .menu-links-7.dropdown-main-menu{background:transparent;border:0;padding:0}
  .ls-nav .menu-links-3-list-2,
  .ls-nav .menu-links-3-list-2.list-direction-column{border:0;border-radius:0}
  .ls-nav .nav-link.sub-link{
    color:rgba(255,255,255,.72);
    border-bottom:0;
    padding:11px 12px;
    font-size:15px;
  }
  .ls-nav .nav-link.sub-link:hover{color:#fff;font-weight:500}
}

/* 480–991px keeps the CTA pill, so the last row needs no trailing divider. */
@media screen and (min-width:480px) and (max-width:991px){
  .ls-nav .nav-menu > .dropdown-link:last-of-type .dropdown-toggle{border-bottom:0}
}

/* Under 480px the sheet hides the CTA pill, so the panel carries the CTAs. */
@media screen and (max-width:479px){
  .ls-nav .nav-buttons{padding:6px}

  .ls-nav .ls-nav-mobile-cta{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:18px;
  }
  .ls-nav .ls-nav-mobile-cta .button{
    flex:1 1 140px;
    justify-content:center;
    text-align:center;
    padding:12px 18px;
    border-radius:100px;
  }
  .ls-nav .ls-nav-mobile-cta .button.w-variant-e4d079c4-1833-3499-8020-59082b083793{
    background-color:rgba(255,255,255,.08);
    color:#fff;
    border:1px solid rgba(255,255,255,.22);
  }
}

@media (prefers-reduced-motion:reduce){
  .ls-nav .dropdown-chevron,
  .ls-nav .ls-burger span{transition:none}
}