/* ---------------------------------------------------------------------------
   Mobile navigation + header account button.

   The design export ships a .nav-burger button with no panel and no handler --
   the interactivity lived in the React source and was flattened away by the
   static export. js/nav.js builds the panel from each page's own .nav-desktop
   links, so this works on the anchor-link home header and the page-link header
   alike.

   The breakpoint is 1000px, not the export's own 720px. The export only ever
   drew the five-link menu on Home; every other page had four shorter links, so
   720 was enough for them. Now that one header runs site-wide, six links plus
   the cart pill, the account button and Book a call need about 900px before the
   text inside them starts wrapping, so the burger takes over earlier. Raised
   from 960 when About was added to the menu. The matching number lives in
   js/nav.js.
   ------------------------------------------------------------------------ */

/* The CTA group holds two buttons now. The nav's 28px gap is too airy between
   them; they read as one control pair at 10px. */
.site-header .pe-cta-group {
  gap: 10px;
}

.pe-mobile-nav {
  display: none;
}

@media (max-width: 1000px) {

  /* Overrides the generated per-page CSS, which swaps these at 720px. The
     .site-header prefix outranks its bare `.nav-desktop { display: none }`. */
  .site-header .nav-desktop {
    display: none !important;
  }

  .site-header .nav-burger {
    display: inline-flex !important;
  }

  .pe-mobile-nav {
    display: flex;
    flex-direction: column;
    padding: 4px 24px 20px;
    border-top: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  /* Wins over the display:flex above when the panel is closed. */
  .pe-mobile-nav[hidden] {
    display: none;
  }

  .pe-mobile-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    color: var(--text-secondary);
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
    transition: color 0.2s ease;
  }

  .pe-mobile-link:hover,
  .pe-mobile-link:focus-visible {
    color: var(--text-accent);
  }

  .pe-mobile-cta {
    margin-top: 18px;
    text-align: center;
  }

  /* Stacked in the panel, the buttons need their own breathing room rather
     than the 18px that separates the group from the links above it. */
  .pe-mobile-cta + .pe-mobile-cta {
    margin-top: 10px;
  }

  .site-header .nav-burger {
    transition: background 0.2s ease, color 0.2s ease;
  }

  .site-header.pe-nav-open .nav-burger {
    background: var(--accent-soft);
    color: var(--text-accent);
  }
}