/* The header row: logo, primary nav, phone number and up to four buttons.

   The page body is set in a 1200px column, and the header sat in the same one.
   Signed in, that row has to hold the logo, four nav items, the phone number,
   My Dashboard, Logout and the Career Advisor card - about 1230px of content
   in 1120px of space. Flexbox took the difference out of the logo and pushed
   the nav into the buttons; pinning the sizes then made the row wrap onto two
   lines. Neither is what the header should do.

   So the header and the strip above it get the width of the screen instead of
   the body column: the logo moves out to the left edge, the buttons to the
   right, and everything fits on one line. Nothing is clipped here - an earlier
   attempt let the nav scroll sideways, which cut the interview pill in half. */

/* 1. The header and the strip above it are as wide as the screen allows. */
.topbar > .wrap,
.header .wrap.header__inner { max-width: min(1860px, 98vw); }

/* 2. Nothing in the row shrinks into its neighbour. */
.header__inner > .logo { flex: 0 0 auto; }
.header__inner > .logo .logo__img { width: auto; max-width: none; }

/* Logo, nav and buttons stay together as one block and that block is centred,
   so the phone number sits directly beside the AI Mock Interview pill and the
   row is not stretched from edge to edge. main.css gives the logo
   margin-right:auto, which is what pushed everything else to the right. */
.header__inner { justify-content: center; gap: 22px; }
.header__inner > .logo { margin-right: 0; }
.header__inner > nav { flex: 0 0 auto; min-width: max-content; }
.header .nav { flex-wrap: nowrap; }
.header .nav > li { flex: 0 0 auto; }

.header__actions { flex: 0 0 auto; }
.header__actions > * { flex: 0 0 auto; }
.header__actions .btn, .header__actions .kf { white-space: nowrap; }

/* 3. Under ~1280px the phone number leaves the header. The same number is in
      the blue strip directly above it, so nothing is lost, and the row stays
      on one line down to 860px where the burger drawer takes over. */
@media (max-width: 1280px) {
    .header .header__call { display: none; }
}

/* 4. Last resort, for a narrow window or a longer menu in future: the nav
      drops to its own line rather than overlapping the buttons. */
.header__inner {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-h);
    row-gap: 6px;
}