/* ============================================================================
   Bright Wealth — primary navigation
   ----------------------------------------------------------------------------
   ONE stylesheet, loaded last on all 27 pages, so the homepage and the inner
   pages render an identical bar. Previously the homepage was styled by
   assets/home.css and inner pages by site/site-theme.css; the two had drifted,
   which is what made the spacing inconsistent.

   Spacing model — a single mechanism, no stacking:
     • one flex `gap` sets the space between every item in the bar
     • the divider trims 4px off each side of its own gap, because a 1px rule
       has no visual mass and needs slightly less room than a word
     • the button adds margin once, to reach 32px from the number
   Nothing else contributes padding or margin, so no space is ever doubled.

   Resulting desktop rhythm:
     link ‹28› link ‹28› … FAQs ‹24› │ ‹24› 0345 460 4444 ‹32› [ Contact us ]
   ========================================================================== */

/* ---------- shared by both breakpoints ---------- */
.nav-links{
  /* NOTE: `display` is deliberately NOT set here.
     nav.css loads after home.css and site-theme.css, so an unscoped
     `display:flex` on this selector overrode their
     @media (max-width:900px){ .nav-links{ display:none } } rule — which left the
     full desktop link list rendered inside the 52px bar on phones, forced the
     page to 650px wide, and squeezed the hamburger to 0–12px wide.
     Display is now set per breakpoint, below. */
  align-items: center;          /* vertical centring for every item, phone included */
}
.nav-divider{
  flex: 0 0 auto;
  align-self: center;           /* never stretches to the bar height */
  width: 1px;
  height: 22px;
  background: rgba(23,20,54,.24);
  border: 0;                    /* it is a box, not a border on a flex item */
}
.nav-phone{
  white-space: nowrap;
  font-weight: 650;
  min-height: 44px;             /* WCAG 2.5.8 target size */
  display: inline-flex;
  align-items: center;
  /* deliberately no margin, padding or border — the gap does all the spacing */
}

/* ---------- desktop and laptop ---------- */
@media (min-width: 901px){
  .nav-links{
    display: flex;
    justify-content: center;
    flex: 1;
    gap: clamp(18px, 1.95vw, 28px);
  }
  /* 28 − 4 = 24px of clear space either side of the rule */
  .nav-divider{ margin-inline: -4px; }
  /* .nav-shell already puts 18px between its children; +14 = 32px */
  .nav-cta{ margin-left: 14px; }

  /* Between 901 and 1000px the bar carries eight links, the rule, the number,
     the logo and the button. Tightening the single gap keeps it on one line
     without introducing a second spacing mechanism. */
  @media (max-width: 1000px){
    .nav-links{ gap: 14px; }
    .nav-divider{ margin-inline: -2px; }
    .nav-cta{ margin-left: 8px; }
  }
}

/* ---------- mobile menu ---------- */
@media (max-width: 900px){
  /* Closed: the bar shows only the logo, the CTA and the hamburger.
     home.css and site-theme.css already say this; restated here so the rule
     holds regardless of stylesheet order. */
  .nav-links{ display: none; }
  .nav-links.open{ display: flex; }

  /* Items stack, so a 22px vertical rule between two of them is meaningless. */
  .nav-divider{ display: none; }
  .nav-links.open{
    gap: 0;
    /* Eight stacked links can be taller than a small phone. Cap the panel to
       the space below the 52px bar and let it scroll, so the phone number at
       the bottom stays reachable. */
    max-height: calc(100dvh - 52px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-links.open a{
    min-height: 44px;           /* WCAG 2.5.8 target size */
    display: flex;
    align-items: center;
    width: 100%;
  }
  .nav-links.open .nav-phone{
    font-size: 22px;
    font-weight: 650;
    padding: 10px 0;
    width: 100%;
  }

  /* The hamburger draws as a 24×22 box but was being flex-shrunk to nothing by
     the overflowing bar, and is well under the 44px minimum touch target.
     Hold its width, and grow the hit area with a pseudo-element so the two
     rules that position the bars stay untouched. */
  .menu-button{
    flex: 0 0 auto;
    position: relative;
    padding: 0;
  }
  .menu-button::after{
    content: "";
    position: absolute;
    inset: -11px;               /* 24×22 -> 46×44 of tappable area */
  }
}