/* ============================================================
   The menu, the same on every page of both sites (src/core/nav.ts).
   Where the header is narrow it folds behind one "Menu" button
   instead of squeezing; it is measured on the header, not the
   window, so the map's side panel folds it at any window size.
   Mirrored byte for byte into www/.
   ============================================================ */

.has-nav { container-type: inline-size; }
.has-nav:not(.is-sticky):not(.topbar) { position: relative; }

.site-nav .nav-items { display: flex; gap: 18px; align-items: baseline; flex-wrap: nowrap; }
.site-nav .nav-toggle { display: none; }
/* The name on one line beside the mark, until the header is very narrow. */
.has-nav .brand strong { white-space: nowrap; }

@container (max-width: 1100px) {
  .site-nav .nav-toggle { display: inline-block; }
  .site-nav .nav-items {
    display: none; position: absolute; top: 100%; right: var(--gutter); z-index: 60;
    flex-direction: column; align-items: flex-start; gap: 14px;
    min-width: 190px; padding: 16px 20px 18px;
    background: var(--bg); border: 1px solid var(--hair);
  }
  .nav-open .site-nav .nav-items { display: flex; }
  .nav-open .site-nav .nav-toggle { color: var(--pick); border-bottom-color: var(--pick); }
}

@container (max-width: 340px) {
  .has-nav .brand strong { white-space: normal; }
}

/* On a phone the mark and the button share one line: no second row for the menu. */
@media (max-width: 620px) {
  .masthead.has-nav { flex-wrap: nowrap; }
  .masthead.has-nav .controls { flex: none; width: auto; justify-content: flex-end; }
}