/* CollarID site banner: the menu bar at the top of the signed-in pages
 * (<nav class="nav" aria-label="Site">). One look on every one of them: the
 * redesigned configurator, remote schedule and detachment pages (with
 * next.css) and the dashboard pages (with Tailwind and collarid.css). The
 * public pages (index.html, docs, manual...) keep their own pub-nav, and the
 * three *-classic pages keep the old nav-bar on purpose.
 *
 * Light only, whatever theme the page below is in, so nothing here reads the
 * theme or a page's colour variables: the colours are written out.
 *
 * Everything below the banner itself sits under :where(.nav), which adds
 * nothing to a selector's weight (a rule here weighs what it did in
 * next.css, so a page's own later rule still wins) and cannot reach anything
 * outside the banner. The banner's position is the page's: next.css makes it
 * sticky on the new pages; on the dashboard pages it scrolls with the page,
 * as the old one did. Load this before next.css. It is one row 68 px tall
 * while the links fit (for an admin, about 1230 px wide); narrower, it wraps
 * and grows rather than running under the page, and from 820 px down the
 * links fold behind Menu.
 *
 * The phone menu (one Menu button, the links unfold under it) is
 * js/site-nav.js on the dashboard pages and NextUI.navMenu (js/next-ui.js) on
 * the new ones: the same button, the same classes (nav-toggle, has-menu,
 * is-open).
 */
.nav{display:flex;align-items:center;flex-wrap:wrap;gap:4px;height:auto;min-height:68px;box-sizing:border-box;flex-shrink:0;padding:11.5px 40px;margin:0;
  position:relative;z-index:30;background:#faf8f3;border-bottom:1px solid rgba(58,70,80,.14);
  font-family:'IBM Plex Sans','Helvetica Neue',sans-serif;font-size:14px;line-height:20px;color:#24272a;text-align:left}
:where(.nav) .hidden{display:none !important}
:where(.nav) :focus-visible{outline:3px solid #1d4ed8;outline-offset:2px;border-radius:6px}
:where(.nav) .ic{flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* the logo: the CollarID mark, as on every other page of the site, and the name */
:where(.nav) .logo{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;color:#24272a}
:where(.nav) .logo:hover{color:#24272a}
:where(.nav) .logo-mark{display:block;height:38px;width:auto;max-width:none;flex-shrink:0}
:where(.nav) .logo-t{display:flex;flex-direction:column}
:where(.nav) .logo b{font-family:'IBM Plex Serif',Georgia,serif;font-weight:500;font-size:21px;line-height:24px}
:where(.nav) .logo-t>span{font-size:11px;line-height:14px;color:#6b6455}

/* the links */
:where(.nav) .np{display:flex;align-items:center;height:44px;margin:0;padding:0 14px;border-radius:999px;color:#565b5f;text-decoration:none;font-size:14px;line-height:20px;font-weight:500}
:where(.nav) .np:hover{color:#24272a}
:where(.nav) .np[aria-current]{background:#24272a;color:#fff}
:where(.nav) .np[aria-current]:hover{color:#fff}
:where(.nav) button.np{border:none;background:transparent;font-family:inherit;cursor:pointer}
/* a quiet icon button (the dashboard pages' light or dark switch) */
:where(.nav) .np.np-icon{justify-content:center;width:44px;padding:0}
:where(.nav) .np-icon svg{display:block;width:18px;height:18px}
/* a line of words that is not a link (the shared view's title) */
:where(.nav) .nav-note{font-size:13px;line-height:18px;color:#565b5f}

/* the two menus that drop down (Configure, Docs) */
:where(.nav) .nav-dropdown{position:relative}
:where(.nav) .nav-dropdown summary{list-style:none;cursor:pointer}
:where(.nav) .nav-dropdown summary::-webkit-details-marker{display:none}
:where(.nav) .nav-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;display:flex;flex-direction:column;padding:6px;background:#fff;border:1px solid rgba(58,70,80,.28);border-radius:12px;box-shadow:0 8px 24px rgba(36,39,42,.12);z-index:40}
:where(.nav) .nav-dropdown-item{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:#24272a;text-decoration:none;font-size:14px;line-height:20px;font-weight:500}
:where(.nav) .nav-dropdown-item:hover{background:#faf8f3;color:#24272a}
:where(.nav) .nav-dropdown-item[aria-current]{background:#fbeee6;color:#a8410f;font-weight:600}

/* the phone: one Menu button, the links unfold under it */
:where(.nav) .nav-toggle{display:none}
@media (max-width: 820px){
  .nav{min-height:60px;padding:8px 16px;gap:2px}
  :where(.nav) .logo-mark{height:30px}
  :where(.nav) .nav-toggle{display:inline-flex;align-items:center;gap:8px;height:44px;margin:0;padding:0 14px;border-radius:999px;border:1.5px solid rgba(58,70,80,.28);background:transparent;color:#24272a;font-family:inherit;font-size:14px;line-height:20px;font-weight:600;cursor:pointer}
  /* a page's own menu button looks the same */
  :where(.nav) button.nx-menu-btn{height:44px;padding:0 14px;border:1.5px solid rgba(58,70,80,.28);border-radius:999px;color:#24272a;font-weight:600}
  :where(.nav) button.nx-menu-btn .ic{width:20px;height:20px}
  .nav.has-menu:not(.is-open)>.np,.nav.has-menu:not(.is-open)>.nav-dropdown{display:none}
  .nav.has-menu.is-open{padding-bottom:12px;max-height:100vh;overflow-y:auto}
  .nav.has-menu.is-open>.np,.nav.has-menu.is-open>.nav-dropdown{width:100%;box-sizing:border-box}
  .nav.has-menu.is-open>.np.np-icon{justify-content:flex-start;gap:10px;padding:0 14px}
  .nav.has-menu.is-open>.np.np-icon::after{content:attr(title)}
  .nav.has-menu.is-open>.nav-dropdown>summary{width:100%;box-sizing:border-box}
  .nav.has-menu.is-open .nav-dropdown-menu{position:static;min-width:0;margin:0;padding:0 0 4px 14px;border:0;border-radius:0;box-shadow:none;background:transparent}
}