/* nav.css — mobile navigation for foundryos.ca.
 *
 * WHY THIS FILE EXISTS
 * At <=900px the site set .nk{display:none}, which hid every navigation link and left
 * only a "Start" button. Work, Services, Process, CrewOS, About, Articles and
 * Assessment were unreachable on a phone — there was no menu to open them from.
 *
 * WHY IT IS SHARED RATHER THAN INLINED PER PAGE
 * The nav markup is duplicated across all six pages and has ALREADY drifted into two
 * variants. Copying menu styles into six <style> blocks would guarantee more of the
 * same. One stylesheet in <head> keeps a single source of truth and, unlike styles
 * injected by JS, applies before first paint so nothing flashes.
 *
 * The panel's contents are built by nav.js from the existing .nk links, so the link
 * list itself is never duplicated either.
 */

/* ── The toggle button ──────────────────────────────────────────────────────
   Hidden by default and revealed only once nav.js has marked the document as
   enhanced. Without that guard a JS failure would leave a visible control that
   does nothing, which is worse than no control at all. */
.nav-toggle { display: none; }

@media (max-width: 900px) {
  html.has-navmenu .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px is the minimum comfortable touch target. */
    width: 44px;
    height: 44px;
    margin-left: 4px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border2);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* The tagline is what pushed the logo block to 57px inside a 52px bar, and it ate
     the width the menu button needs. The wordmark still reads as the brand without
     it, so it stands down on small screens rather than the button being cramped. */
  .nl-sub { display: none; }
}

.nav-toggle:hover { background: var(--bg3); }
.nav-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Bars are drawn rather than glyph-typed so the animation to the close state is a
   real transform and not a font swap. */
.nav-toggle span {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background .18s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .18s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

/* Open state: the middle bar disappears and the outer two cross into an X. */
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ── The panel ──────────────────────────────────────────────────────────────
   Fixed under the 52px bar rather than pushed into the flow, so opening the menu
   never reflows the page behind it. */
.nav-menu {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 8px 20px 16px;
  /* Long menus stay reachable on short screens (a landscape phone is ~375px tall). */
  max-height: calc(100vh - 52px);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: transform .18s ease, opacity .18s ease, visibility .18s;
}
.nav-menu.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* [hidden] must win over the display the rules below give these elements, or a
   closed menu stays in the tab order for keyboard and screen-reader users. */
.nav-menu[hidden] { display: none; }

.nav-menu a {
  display: block;
  padding: 13px 12px;
  margin-top: 2px;
  color: var(--text2);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  border-bottom: 1px solid var(--border);
}
.nav-menu a:last-child { border-bottom: 0; }
.nav-menu a:hover,
.nav-menu a:focus-visible { color: var(--text); background: var(--bg3); }
.nav-menu a:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

/* The page you are on, carried over from the desktop nav's .active class. */
.nav-menu a.active { color: var(--text); font-weight: 600; }

/* The two call-to-action links keep the colours they have on desktop, but as full
   width blocks — a phone menu reads as a stack, not a row of chips. */
.nav-menu a.nc,
.nav-menu a.nc-amber {
  margin-top: 10px;
  text-align: center;
  font-weight: 600;
  border-bottom: 0;
}
.nav-menu a.nc-amber { background: var(--amber); color: var(--bg); }
.nav-menu a.nc-amber:hover { background: var(--amber2); color: var(--bg); }
.nav-menu a.nc { background: var(--green2); color: var(--bg); }
.nav-menu a.nc:hover { background: var(--green); color: var(--bg); }

/* Dim the page behind the menu so the panel reads as a layer above it. */
.nav-scrim {
  position: fixed;
  inset: 52px 0 0;
  z-index: 98;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s;
}
.nav-scrim.open { opacity: 1; visibility: visible; }
.nav-scrim[hidden] { display: none; }

/* Above the breakpoint the desktop nav is in charge; make sure no leftover state
   can leave the panel or scrim on screen after a resize. */
@media (min-width: 901px) {
  .nav-menu,
  .nav-scrim { display: none !important; }
}

/* Honour a stated preference for less motion: the menu still opens, it just does
   not slide or fade. */
@media (prefers-reduced-motion: reduce) {
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after,
  .nav-menu,
  .nav-scrim { transition: none; }
}
