/* ══════════════════════════════════════════════════════════════════════
   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: 42px; height: 42px; 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: var(--text-muted); }
.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; }

  /* .nav-inner is space-between. Above 900px it has three things to
     space out — brand, menu, CTA — and that is what the rule is for.
     Here the menu is lifted into a panel and leaves the flow, so the
     three became brand | CTA | button and space-between parked the CTA
     in the middle of the bar with a hole either side of it. The CTA
     belongs next to the button it sits beside, so it takes the slack
     itself and the pair ends up at the right edge. */
  header.nav .nav-inner { gap: 10px; }
  header.nav .nav-inner > .btn { margin-left: auto; }

  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; }
  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; }
}


/* ── target size (WCAG 2.5.8 AA, 24x24 minimum) ───────────────────────
   Nav links measured 19px tall and footer links 18px — under the floor,
   and well under a comfortable tap. Padding grows the hit area without
   moving the text.

   This lives here, not in site.css: index.html is the one page that
   does not load site.css, and it is the page with the most of these
   links. nav-menu.css is on all twelve. */
header.nav .menu > a,
header.nav .menu .m-item > a {
  padding-block: 11px;
}
.foot-col a,
.foot-bottom a {
  display: inline-block;
  padding-block: 7px;
}
@media (max-width: 900px) {
  /* a phone wants the full 44px recommendation, not just the 24 floor */
  header.nav .menu > a,
  header.nav .menu .m-item > a { padding-block: 13px; }
  .foot-col a { padding-block: 10px; }
}