/* ══════════════════════════════════════════════════════════════════════
   NAV MENU — the three lines, and what they open.

   Above 900px the menu sits in the bar as it always has and the button
   is not there. Below it the menu had simply been display:none, which
   left a phone with no way to reach About, Products or Contact at all —
   only the logo and the CTA. The button opens it as a panel under the
   bar.

   Loaded after every other stylesheet on all nine pages, so the rules
   here are the last word on the menu at that width.
   ────────────────────────────────────────────────────────────────────── */

/* ── the button ───────────────────────────────────────────────────── */
.navtog {
  display: none;
  flex: none; width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(16,64,59,.16);
  border-radius: 12px; cursor: pointer;
  transition: background 200ms cubic-bezier(.2,0,0,1),
              border-color 200ms cubic-bezier(.2,0,0,1);
}
.navtog:hover { background: rgba(16,64,59,.05); border-color: rgba(16,64,59,.28); }
.navtog:focus-visible { outline: 2px solid var(--midday, #E8B93C); outline-offset: 2px; }

/* Three lines, drawn rather than typed — a glyph would take the page's
   font with it and the middle bar would never quite line up. */
.navtog .nl {
  display: block; position: absolute;
  width: 18px; height: 1.6px; border-radius: 2px;
  background: var(--ink, #10403B);
  transition: transform 280ms cubic-bezier(.34,1.3,.64,1),
              opacity 160ms cubic-bezier(.2,0,0,1);
}
.navtog .nb { position: relative; width: 18px; height: 14px; display: block; }
.navtog .nl:nth-child(1) { top: 0; }
.navtog .nl:nth-child(2) { top: 6.2px; }
.navtog .nl:nth-child(3) { top: 12.4px; }

/* open: the outer two cross, the middle one goes */
.nav.open .navtog .nl:nth-child(1) { transform: translateY(6.2px) rotate(45deg); }
.nav.open .navtog .nl:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.nav.open .navtog .nl:nth-child(3) { transform: translateY(-6.2px) rotate(-45deg); }

/* ── under 900px: the menu becomes a panel ────────────────────────── */
@media (max-width: 900px) {
  .navtog { display: inline-flex; }

  header.nav .menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px 20px 12px;
    background: var(--daylight, #FBFAF7);
    border-bottom: 1px solid rgba(16,64,59,.12);
    box-shadow: 0 18px 40px rgba(14,42,36,.14);
  }
  header.nav.open .menu { display: flex; }

  header.nav .menu > a,
  header.nav .menu .m-item > a {
    display: flex; align-items: center;
    padding: 14px 0; font-size: 16px; color: var(--ink, #10403B);
    border-bottom: 1px solid rgba(16,64,59,.08);
  }
  header.nav .menu > a:last-child { border-bottom: 0; }
  /* In the panel each item is its own row, so there is room to say it
     outright — and there is no hover on a phone to reveal it with. */
  header.nav .menu a.soon .soon-tag {
    position: static; transform: none; opacity: 1;
    margin-left: 8px; padding: 2px 7px;
  }
  header.nav .menu > a:hover { transform: none; }

  /* the m-item is a hover target on a desktop and a plain row here */
  header.nav .menu .m-item { display: block; height: auto; position: static; }
  header.nav .menu .m-item > a .cv2 { display: none; }
  /* The two-column panel is 660px wide and opens on hover, neither of
     which a phone has. Products is a link to the products page here. */
  header.nav .menu .mega { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .navtog .nl { transition: none; }
}