/* The generated department menus and the nav search (tools/portal/portal_nav.py). */
.navgroup-mega { position: static; }
.navmega {
  left: 50%; transform: translateX(-50%);
  width: min(1040px, calc(100vw - 32px));
  grid-template-columns: 1fr 1fr 1.3fr; gap: 6px 18px; padding: 12px;
  max-height: min(78vh, 720px); overflow-y: auto;
}
.navcol { display: grid; align-content: start; gap: 1px; min-width: 0; }
.mainnav .navmega a { white-space: normal; display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; font-size: .92rem; }
.navhead { margin: 8px 0 2px; padding: 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-hi); }
.navdept { margin: 8px 0 0; padding: 0 10px; font-size: .9rem; font-weight: 600; color: var(--band-ink); }
.mainnav .navmega a.navall { font-weight: 600; }
.mainnav .navmega a.navsec { font-weight: 600; }
.mainnav .navmega a.navsub { padding-left: 22px; font-size: .86rem; color: var(--band-muted); }
.navcount { margin-left: auto; font-size: .8rem; color: var(--band-muted); font-variant-numeric: tabular-nums; }
.navnote { display: block; font-size: .8rem; color: var(--band-muted); }
.mainnav .navmega a:has(.navnote) { flex-direction: column; align-items: flex-start; gap: 0; }
.navnote-in { display: block; font-size: .78rem; color: var(--band-muted); margin-left: 0; }
.mainnav .navmenu a:has(.navnote-in) { flex-direction: column; align-items: flex-start; white-space: normal; }
.navtag { margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: .72rem; color: var(--band); background: var(--gold-hi); }
.navoff { display: flex; align-items: baseline; padding: 6px 10px; font-size: .9rem; color: var(--band-muted); cursor: default; }
.navoff .navtag { background: rgba(245, 230, 200, .25); color: var(--band-ink); }
.navsection > summary { display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; font-size: .92rem; cursor: pointer; color: var(--band-ink); border-radius: 6px; list-style: none; }
.navsection > summary::-webkit-details-marker { display: none; }
.navsection > summary::before { content: "▸"; font-size: .7rem; color: var(--band-muted); }
.navsection[open] > summary::before { content: "▾"; }
.navsection > summary:hover { background: rgba(245, 230, 200, .06); }
.navsection > a, .navsection > .navoff { padding-left: 24px; }

.navsearch { position: relative; margin-left: auto; display: flex; align-items: center; }
.navsearch input {
  width: 220px; padding: 6px 10px; border-radius: 999px; font: inherit; font-size: .88rem;
  color: var(--band-ink); background: rgba(245, 230, 200, .08); border: 1px solid rgba(245, 230, 200, .2);
}
.navsearch input::placeholder { color: var(--band-muted); }
.navsearch input:focus { outline: 2px solid var(--gold-hi); outline-offset: 1px; }
.navhits {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: min(420px, calc(100vw - 32px));
  max-height: 60vh; overflow-y: auto; padding: 6px; display: grid; gap: 1px;
  background: var(--band-2); border: 1px solid rgba(245, 230, 200, .14); border-radius: 10px;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6);
}
.mainnav .navhits a { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; padding: 6px 8px; white-space: normal; font-size: .9rem; }
.navhits .hk { grid-row: span 2; align-self: start; margin-top: 2px; padding: 0 6px; border-radius: 4px; font-size: .7rem; color: var(--band); background: var(--gold-hi); }
.navhits .hg { font-size: .78rem; color: var(--band-muted); }
.navhits p { margin: 0; padding: 8px; font-size: .88rem; color: var(--band-muted); }

@media (max-width: 860px) {
  .navmega { transform: none; width: auto; grid-template-columns: 1fr; max-height: none; }
  .navsearch { margin-left: 0; flex-basis: 100%; }
  .navsearch input { width: 100%; }
  .navhits { position: static; width: auto; margin-top: 4px; box-shadow: none; }
}
