/* Tools section navbar — extends navbar-ds with dropdown submenus */

/* Standalone tool pages define their own body layout (flex row/column,
   custom alignment, etc). Rather than fight every possible host layout,
   take the navbar completely out of the page's flow with fixed
   positioning — it then always spans the full viewport width regardless
   of what the host page's body does, and can't be squeezed into a flex
   item sitting beside the page content. `body:has(> .tools-navbar-wrap)`
   reserves matching top space so page content isn't hidden underneath. */
.tools-navbar-ds {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Nav height (56px) plus the same breathing room tools/index.php gets
   from its own content wrapper's padding, so headings sit at a matching
   distance below the navbar across every tool page. */
body:has(> .tools-navbar-wrap) {
  padding-top: 96px !important;
}

.tools-navbar-ds .nav-dropdown {
  position: relative;
}

.tools-navbar-ds .nav-dropdown-toggle i {
  font-size: 11px;
  margin-left: 4px;
}

.tools-navbar-ds .nav-dropdown-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  max-width: calc(100vw - 24px);
  background: var(--neutral-800);
  box-shadow: var(--shadow-lg);
  z-index: 20;
}

.tools-navbar-ds .nav-dropdown-menu a {
  padding: 10px 18px;
  white-space: nowrap;
}

.tools-navbar-ds .nav-dropdown:hover .nav-dropdown-menu,
.tools-navbar-ds .nav-dropdown-menu.show {
  display: block;
}

@media (max-width: 767px) {
  .tools-navbar-ds .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    background: var(--neutral-900);
  }

  .tools-navbar-ds .nav-dropdown-menu a {
    padding-left: 36px;
  }

  /* Safety net for the expanded mobile menu only — if it has enough
     dropdown items to exceed the viewport height, scroll the menu itself
     instead of letting it overflow off-screen. Scoped to .nav-links (not
     the whole nav) so it never clips the desktop dropdown submenus, which
     render outside the collapsed nav's own short bounding box. */
  .tools-navbar-ds .nav-links.show {
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }
}