/* ===================================================================
   nav.css — the shared site menu.

   Seventeen pages shipped with a <nav> containing only a logo and a
   single CTA. Anyone who landed on one of them from search or an ad had
   no way into the rest of the site except the back button. This adds the
   same six-item menu those pages were missing.

   Three different nav wrappers are in use across the site (.nav-in,
   .wrap, .navwrap), so the layout rules target all three rather than
   rewriting seventeen pages' markup. Every one of these navs is a white
   bar on the light site, hence the navy link colour.
   =================================================================== */

nav .nav-in,
nav > .wrap,
nav .navwrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

nav .navlinks {
  display: flex; align-items: center; gap: 20px;
  list-style: none; margin: 0 auto; padding: 0;
}
nav .navlinks a {
  color: var(--brand-muted-dark, #3A4268);
  text-decoration: none; font-size: 13.5px; font-weight: 500;
  white-space: nowrap; transition: color 0.15s;
}
nav .navlinks a:hover { color: var(--brand-ink, #161F4A); }
nav .navlinks a.active { color: var(--brand-logo, #D10D6E); }

nav .navburger {
  display: none; background: none; border: 0; color: var(--brand-ink, #161F4A);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 4px 8px;
  margin-left: auto;
}
nav .navburger:focus-visible { outline: 3px solid var(--brand-purple-dk, #6B2FC0); outline-offset: 2px; }

/* Below 980px the row can't hold six links plus a CTA, so it collapses
   behind the burger and stacks under the bar when opened. */
@media (max-width: 980px) {
  nav .navlinks {
    display: none; flex-direction: column; align-items: flex-start;
    gap: 2px; width: 100%; order: 3; padding: 8px 0 4px; margin: 0;
  }
  nav .navlinks.open { display: flex; }
  /* Several wrappers pin the bar to a fixed height (66–68px). Opened, the menu
     spilled out of the bar with no background and printed over the hero —
     let the bar grow to hold it instead. The body prefix outranks the pages'
     own `nav .wrap{height:68px}`, which loads after this file. */
  body nav .nav-in, body nav > .wrap, body nav .navwrap { height: auto; min-height: 64px; }
  nav .navlinks a { display: block; padding: 10px 2px; font-size: 15px; }
  /* 44px tap target; the glyph alone was 37x32. */
  body nav .navburger { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  /* The CTA sits after the burger in the markup, so it wrapped onto a second
     row and made the sticky bar 80–100px tall. Put it back beside the logo. */
  body nav .nav-cta, body nav a.book, body nav a.bk, body nav a.back { order: 1; margin-left: auto; white-space: nowrap; }
  body nav .navburger { order: 2; margin-left: 0; }
  body nav .navlinks { order: 3; }
}

/* Phones: the homepage's logo size, so the mark reads the same on every page,
   and enough room for logo, CTA and burger on one row. */
@media (max-width: 480px) {
  body nav .nav-in, body nav > .wrap, body nav .navwrap { gap: 6px; padding-left: 16px; padding-right: 16px; }
  body nav .logo { font-size: 0.88rem; gap: 6px; white-space: nowrap; }
  body nav .logo .mark { width: 26px; height: 26px; }
  body nav .nav-cta { font-size: 0.75rem; letter-spacing: 0.04em; padding: 11px 12px; }
  body nav a.book, body nav a.bk, body nav a.back { font-size: 0.8rem; min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; letter-spacing: 0.02em; }
  body nav .navburger { margin-right: -8px; }
  .nav-cta-lead { display: none; }
}