/* ==========================================================================
   SHARED MOBILE NAV
   --------------------------------------------------------------------------
   Pages that link style.css already get this behaviour from its own
   responsive block. This file exists for the pages that still carry their
   own inline <style> with a duplicated nav — link it AFTER that block so it
   wins the cascade:

       <link rel="stylesheet" href="/nav-mobile.css">

   Breakpoint is 700px, the widest of the three the inline blocks use
   (640 / 680 / 700), so it fully covers whichever one a page declares.

   When the inline styles are finally consolidated onto style.css
   (SITE_GROWTH_REVIEW.md, P1 item 14), delete this file and the 11 link tags.
   ========================================================================== */

.nav-links { margin-left: auto; }

@media (max-width: 700px) {
  /* Two rows: wordmark + CTA on top, scrollable link strip below. */
  .nav-inner {
    flex-wrap: wrap;
    padding: 12px 20px 0;
    gap: 12px;
  }

  .nav-links {
    order: 3;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 -20px;
    padding: 0 20px 12px;
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }

  .nav-link {
    display: block;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}