/* /assets/mobile-nav.css
   The one copy of the mobile navigation. Linked from every public page,
   including index.html and the book pages, which keep the rest of their
   nav CSS inline and do not load article.css.
*/
/* MOBILE NAV
   Below 780px the whole menu used to be display:none, with no hamburger
   anywhere outside /academy/. On a phone the header was a wordmark and
   "Book a Consult" — so about one visitor in six could reach no page of
   this site from the top of it. Every link now lives behind the toggle.

   The breakpoint is 960px rather than 780px on purpose. The dropdown menus
   are absolutely positioned and 220px wide, and visibility:hidden still
   occupies layout, so between 781px and ~945px the desktop menu pushed the
   page sideways — iPad portrait scrolled horizontally on every page. Panel
   mode flattens those menus to static, which removes the overflow.

   The hiding is keyed on [data-mobile-nav], which site.js sets when it has
   injected the toggle button. With JavaScript off the attribute never
   appears, the menu stays on the page and simply wraps onto more lines.
   Unreachable is worse than untidy. */
.nav-toggle{ display:none; }

@media (max-width:960px){
  /* No JS: the menu stays on the page, stacked, with its dropdowns
     flattened open by the rules further down — the same shape as the
     panel, minus the toggle. */
  .nav:not([data-mobile-nav]) .nav-links{
    display:block; white-space:normal; flex-basis:100%;
    margin-top:0.4rem; font-size:1rem; max-width:100%;
  }
  .nav:not([data-mobile-nav]) .nav-inner{ flex-wrap:wrap; }

  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:44px; height:44px; margin-left:0.5rem; padding:0 10px;
    background:none; border:1px solid var(--line); border-radius:var(--radius-sm);
    cursor:pointer; flex-shrink:0; order:3;
  }
  .nav-toggle span{
    display:block; height:2px; width:100%; background:var(--navy-900);
    border-radius:2px; transition:transform .18s var(--ease), opacity .18s var(--ease);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  /* The consult button keeps its place; the panel opens underneath both. */
  .nav[data-mobile-nav] .nav-inner{ flex-wrap:nowrap; }
  .nav[data-mobile-nav] .nav-cta{ order:2; font-size:0.7rem; padding:0.55rem 0.8rem; }

  .nav[data-mobile-nav] .nav-links{ display:none; }
  .nav[data-mobile-nav="open"] .nav-links{
    display:block; position:absolute; left:0; right:0; top:100%;
    background:var(--white); border-bottom:1px solid var(--line);
    box-shadow:0 16px 32px rgba(11,31,58,0.12);
    padding:0.5rem var(--gutter) 1.4rem;
    max-height:calc(100vh - 100% - 4.5rem); overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    white-space:normal; font-size:1rem;
  }
  .nav[data-mobile-nav="open"] .nav-links > a,
  .nav:not([data-mobile-nav]) .nav-links > a{
    display:block; padding:0.85rem 0; border-bottom:1px solid var(--line);
  }

  /* Flatten every dropdown: hover does not exist on a touch screen, so the
     sub-pages are listed outright rather than hidden behind it.

     Both mobile states need this — inside the open panel, and in the no-JS
     fallback. Keyed on the open panel alone, the fallback kept the
     absolutely-positioned 220px-wide dropdown menus in layout
     (visibility:hidden still takes space) and the page scrolled 499px wide
     inside a 390px viewport.

     Each pair is written out in full. Hoisting the two prefixes into one
     comma list produces ".nav[data-mobile-nav=open], .nav:not(...) .nav-x",
     which sets position:static on the NAV ITSELF — that killed the sticky
     header and collapsed the panel to nothing. */
  .nav[data-mobile-nav="open"] .nav-dropdown,
  .nav:not([data-mobile-nav]) .nav-dropdown{
    position:static; border-bottom:1px solid var(--line);
  }
  .nav[data-mobile-nav="open"] .nav-dropdown-trigger,
  .nav:not([data-mobile-nav]) .nav-dropdown-trigger{
    width:100%; justify-content:flex-start; padding:0.85rem 0;
    font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--ink-soft,#5b6660); cursor:default;
  }
  .nav[data-mobile-nav="open"] .nav-dropdown .caret,
  .nav:not([data-mobile-nav]) .nav-dropdown .caret{ display:none; }
  .nav[data-mobile-nav="open"] .nav-dropdown-menu,
  .nav[data-mobile-nav="open"] .nav-dropdown-submenu,
  .nav:not([data-mobile-nav]) .nav-dropdown-menu,
  .nav:not([data-mobile-nav]) .nav-dropdown-submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    margin:0 0 0.4rem; border:0; box-shadow:none; background:none;
    min-width:0; max-width:100%; padding:0; transition:none;
  }
  .nav[data-mobile-nav="open"] .nav-dropdown-item,
  .nav[data-mobile-nav="open"] .nav-dropdown-submenu a,
  .nav:not([data-mobile-nav]) .nav-dropdown-item,
  .nav:not([data-mobile-nav]) .nav-dropdown-submenu a{
    white-space:normal; padding:0.7rem 0 0.7rem 0.9rem; font-size:0.95rem;
  }
  .nav[data-mobile-nav="open"] .nav-dropdown-sub,
  .nav:not([data-mobile-nav]) .nav-dropdown-sub{ position:static; }
  .nav[data-mobile-nav="open"] .nav-dropdown-submenu a,
  .nav:not([data-mobile-nav]) .nav-dropdown-submenu a{ padding-left:1.8rem; }
}