/* ================================================================
   Mobile navigation drawer.
   Uses the site's existing :root tokens, so it inherits light/dark
   automatically and matches the header type + spacing.
   ================================================================ */

/* hamburger button (hidden on desktop, shown < 760px) */
.navtog{
  display:none;
  width:42px; height:42px; padding:0; flex:none; cursor:pointer;
  border:1px solid var(--line); border-radius:12px; background:transparent;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  transition:border-color .2s;
}
.navtog:hover{ border-color:var(--cyan); }
.navtog .bar{
  display:block; width:19px; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .18s;
}
.navtog[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.navtog[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.navtog[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* dim backdrop */
.mnav-backdrop{
  position:fixed; inset:0; z-index:54; background:rgba(10,14,15,.42);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.mnav-backdrop.open{ opacity:1; visibility:visible; }

/* the drawer: slides down from behind the nav bar */
.mnav{
  position:fixed; top:0; left:0; right:0; z-index:55; display:none;
  background:var(--paper); border-bottom:1px solid var(--line);
  box-shadow:0 26px 54px -26px rgba(20,40,50,.5);
  padding:74px 22px 26px;
  transform:translateY(-102%);
  /* Closed, it is hidden as well as off screen: otherwise its shadow shows as a dark band along
     the top edge and its links stay in the keyboard tab order. Visibility flips after the slide. */
  visibility:hidden;
  transition:transform .34s cubic-bezier(.22,.61,.36,1), visibility 0s linear .34s;
  /* Six links plus the actions can exceed a landscape phone: scroll inside the drawer. */
  max-height:100dvh; overflow-y:auto; overscroll-behavior:contain;
}
.mnav.open{ transform:translateY(0); visibility:visible; transition:transform .34s cubic-bezier(.22,.61,.36,1); }

.mnav .mn-link{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--sans); font-size:19px; font-weight:600; letter-spacing:-.015em;
  color:var(--ink); padding:15px 2px; border-bottom:1px solid var(--line);
  transition:color .18s;
}
.mnav .mn-link:last-of-type{ border-bottom:0; }
.mnav .mn-link::after{ content:"→"; content:"→" / ""; color:var(--ink-3); font-size:15px; transition:transform .2s, color .2s; }
.mnav .mn-link:hover, .mnav .mn-link:focus-visible{ color:var(--cyan-ink); }
.mnav .mn-link:hover::after{ color:var(--cyan); transform:translateX(3px); }

.mnav .mn-cta{ display:flex; gap:12px; margin-top:20px; }
.mnav .mn-cta a{ flex:1; text-align:center; padding:14px 10px; border-radius:999px; font-weight:700; font-size:15px; letter-spacing:.01em; }
.mnav .mn-cta .mn-demo{ background:var(--ink); color:var(--paper); }
.mnav .mn-cta .mn-login{ border:1.5px solid var(--cyan); color:var(--cyan-ink); }

/* Tablets and small laptops: the full desktop nav needs about 1,200px and used to
   run off the right edge, clipping Book a demo. Below that the five text links fold
   into the drawer, while Log in and Book a demo stay in the header. */
@media (max-width:1199px){
  .navtog{ display:inline-flex; }
  .mnav{ display:block; }
  .nav .links > a:not(.login):not(.btn){ display:none; }
}
@media (min-width:761px) and (max-width:1199px){
  .navtog{ margin-left:14px; }
}
@media (max-width:760px){
  /* Login moves into the drawer on mobile, so the header stays logo + language + menu */
  .nav .links a.login{ display:none; }
}
/* Guides joined the nav on 8 Oct 2026. From 1200px to 1299px the full nav runs on tighter gaps,
   so no label wraps onto two lines and Book a demo stays clear of the right edge. The home page
   carries its own wider rule (to 1499px) because its nav also holds The signal, Questions and the
   theme and language controls. */
@media (min-width:1200px) and (max-width:1299px){
  .nav .links{ gap:clamp(12px,1.25vw,20px); }
  .nav .links a{ white-space:nowrap; }
}
/* The PROUDLY AUSTRALIAN badge only fits beside the full nav on wide screens. On the inner pages
   it has clear space from 1680px. The home page nav is wider, so index.html hides it until 1780px. */
@media (max-width:1679px){ .aubadge{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .mnav, .mnav.open, .navtog .bar, .mnav-backdrop{ transition:none; }
}
html.mnav-on{ overflow:hidden; }