/* Shared site navigation. One file, linked from every page; the nav markup
   itself is the identical <header class="site"> block in each page (see
   Website/build_nav.py to regenerate it). Dropdowns are native <details>,
   so they work on touch and keyboard with no JavaScript. */

nav.wrap { position: relative; }

.navlinks {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  align-items: center;
}
.navlinks a { text-decoration: none; color: var(--fog); transition: color 0.15s ease; }
.navlinks a:hover { color: var(--amber); }
.navlinks a.highlight { color: var(--amber); font-weight: 700; }
.navlinks a.highlight:hover { color: var(--bone); }

.navlinks li { position: relative; }
.navlinks details > summary {
  list-style: none;
  cursor: pointer;
  color: var(--fog);
  transition: color 0.15s ease;
  user-select: none;
}
.navlinks details > summary::-webkit-details-marker { display: none; }
.navlinks details > summary::after { content: " \25BE"; font-size: 11px; }
.navlinks details > summary:hover,
.navlinks details[open] > summary { color: var(--amber); }

.navlinks details > ul {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  min-width: 260px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #0a1420;
  border: 1px solid var(--panel-line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  z-index: 30;
}
.navlinks details > ul li { position: static; }
.navlinks details > ul a {
  display: block;
  padding: 10px 18px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 14px;
  white-space: nowrap;
}
.navlinks details > ul a:hover { background: rgba(255, 255, 255, 0.04); }

/* Hamburger wrapper: invisible on desktop (script keeps it open), a Menu
   button on phones that drops the list below the header. */
.menu > summary { display: none; }
.menu > summary::-webkit-details-marker { display: none; }

@media (max-width: 760px) {
  /* Phones: the header scrolls away instead of pinning, so the menu does not
     hold a third of the screen on long pages like the calculator. */
  /* relative, not static: the header's backdrop-filter makes it a stacking
     context, and only a positioned one keeps its z-index above the hero. */
  header.site { position: relative; z-index: 20; }
  nav.wrap { padding-top: 12px; padding-bottom: 12px; flex-wrap: nowrap; }
  .menu { margin-left: auto; }
  .menu > summary {
    display: block;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fog);
    padding: 8px 12px;
    border: 1px solid var(--panel-line);
    user-select: none;
  }
  .menu > summary::before { content: "\2630\00a0"; }
  .menu[open] > summary { color: var(--amber); border-color: var(--amber); }
  .menu > .navlinks {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 10px;
    background: #0a1420;
    border-top: 1px solid var(--panel-line);
    border-bottom: 1px solid var(--panel-line);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    z-index: 30;
    font-size: 13px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  .navlinks li { position: static; margin: 0; }
  .navlinks > li > a,
  .navlinks details > summary { display: block; padding: 12px 20px; }
  .navlinks details > ul {
    position: static;
    min-width: 0;
    border: none;
    box-shadow: none;
    padding: 0 0 6px;
    background: rgba(255, 255, 255, 0.03);
  }
  .navlinks details > ul a { padding: 10px 20px 10px 34px; }
}