/* =========================================================================
   CoLateral website - phone navigation
   -------------------------------------------------------------------------
   Every public page carries its links in one horizontal row. That row has no
   room on a phone: the pages that ship their own .nav header used to hide it
   outright (leaving the brand and nothing else), and the public-pages.js
   shell let it wrap on top of the brand. Below 760px the row is replaced by
   one 44px button that opens the same links as a full-width panel under the
   bar.

   Colours come from the page's own variables (--ink, --line, --blue), so the
   same sheet works on the pinned-light home page and on the theme-driven
   shell pages.
   ========================================================================= */

.nav-toggle {
  display: none;
  flex: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r, 10px);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
  display: block;
}

.nav-toggle .nav-toggle-close,
.nav-toggle[aria-expanded="true"] .nav-toggle-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-close {
  display: block;
}

.nav-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 10px 18px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--nav-panel-bg, var(--bg, #eef2f7));
  box-shadow: 0 22px 44px rgba(15, 23, 42, .18);
  /* A long link list must never trap the page: cap the panel and scroll it. */
  max-height: calc(100vh - 68px);
  max-height: calc(100svh - 68px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-panel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r, 10px);
  color: var(--ink);
  font-size: 15px;
  font-weight: 760;
  text-decoration: none;
}

.nav-panel a[aria-current="page"],
.nav-panel a.active {
  border-color: var(--line-strong);
  color: var(--blue);
}

.nav-panel a.nav-cta {
  justify-content: center;
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue2, var(--blue-2, #106ebe)), var(--blue));
  color: #fff;
}

@media (max-width: 760px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* Hide the links, not the row: account-menu.js mounts its own button into
     the same row and manages its own popup, so it has to stay reachable. */
  .navlinks > a,
  .public-links > a {
    display: none;
  }

  .navlinks,
  .public-links {
    gap: 0;
    flex-wrap: nowrap;
  }

  /* The brand is the only other thing in the bar; keep it on one line so the
     toggle cannot squeeze it into a two-line block. */
  .brand,
  .public-brand {
    flex: none;
    white-space: nowrap;
  }

  /* The shell pages drop their bar out of the flow at this width, which puts
     the panel wherever the page happens to have scrolled to. Keep the bar. */
  .public-nav {
    position: sticky;
  }

  .public-nav-inner {
    flex-direction: row;
    align-items: center;
    padding: 0;
  }

  .nav-open .nav-panel {
    display: block;
  }
}