/* ══════════════════════════════════════════════════════════════════════
 *  HEADER — one layout, one breakpoint
 *
 *  This file exists because the header had grown seven different width
 *  thresholds (1500, 1240, 1180, 1120, 1100, 1023, 900) that each hid a
 *  different item. The practical result was that a laptop, a Mac and a
 *  desktop monitor each showed a different menu, and Studio vanished on
 *  anything under 1500px because it carried .util-hide.
 *
 *  Loaded last, so it wins. The rule now is simple:
 *
 *    ≥ 1024px   every link is visible, always. Nothing is hidden by width.
 *    < 1024px   everything collapses into the one hamburger.
 *
 *  Nothing in between. If the links stop fitting, the answer is fewer
 *  links or a smaller font — not another breakpoint that hides one.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── stop the horizontal drift on phones ──────────────────────────────
 *  overflow-x:clip, not hidden. "hidden" turns the element into a scroll
 *  container, and a scroll container between the viewport and a sticky
 *  element silently kills position:sticky — which this header relies on.
 *  "clip" trims the overflow without that side effect. */
html, body { max-width: 100%; overflow-x: clip; }
* { min-width: 0; }                 /* flex and grid children may shrink */

/* ── the bar ────────────────────────────────────────────────────────── */
#hdr .nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  row-gap: 0;
}
#hdr .logo { flex: 0 0 auto; margin-right: auto; }

#hdr .nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 1 auto;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
#hdr .nav-cta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

/* The item that started all this. It is a normal link like any other. */
#hdr .util-hide { display: inline-flex !important; }

/* ── signed in: the account links get their own row ─────────────────── */
/*  Dashboard, Studio and Admin used to crowd in beside Contests and
 *  Pricing and collide. On a second row they read as what they are —
 *  your things, not the site's navigation. */
#hdr.signed-in .nav { row-gap: 0; }
#hdr.signed-in .nav-cta {
  flex-basis: 100%;
  margin-left: 0;
  justify-content: flex-start;
  gap: 18px;
  padding: 9px 0 11px;
  border-top: 1px solid var(--line, #E8E3DC);
  margin-top: 8px;
}
#hdr.signed-in .nav-cta::before {
  content: 'Your account';
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mist, #8B8595);
  margin-right: 4px;
  align-self: center;
}

/* ── under 1024: one hamburger, nothing else ────────────────────────── */
@media (max-width: 1023.98px) {
  #hdr .mtoggle { display: inline-flex !important; flex: 0 0 auto; }

  #hdr .nav-links,
  #hdr .nav-cta {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 0 14px;
    border-top: 1px solid var(--line, #E8E3DC);
    margin-top: 10px;
  }
  #hdr.signed-in .nav-cta::before { margin: 6px 0 2px; }

  /* the toggle only flips aria-expanded, so key off that */
  #hdr:has(.mtoggle[aria-expanded='true']) .nav-links,
  #hdr:has(.mtoggle[aria-expanded='true']) .nav-cta { display: flex; }

  #hdr .nav-links > li > a,
  #hdr .nav-cta > a { padding: 11px 2px; font-size: 15px; }
  #hdr .nav-cta > a.btn { justify-content: center; margin-top: 6px; }

  /* the Who it's for dropdown becomes a plain nested list on a phone —
     a hover menu is useless where there is no cursor */
  #hdr .has-menu .menu-pop {
    position: static; display: block; opacity: 1; visibility: visible;
    transform: none; box-shadow: none; border: 0; padding: 0 0 0 12px;
    background: transparent; min-width: 0; width: auto;
  }
  #hdr .has-menu .menu-pop a { padding: 9px 2px; }
}

/* ── 1024 and up: never hide, never collapse ────────────────────────── */
@media (min-width: 1024px) {
  #hdr .mtoggle { display: none !important; }
  #hdr .nav-links,
  #hdr .nav-cta { display: flex !important; }
  #hdr .nav-links { flex-wrap: nowrap; }
}

/* ── breathing room on small screens ────────────────────────────────── */
@media (max-width: 640px) {
  .container-x { padding-left: 18px !important; padding-right: 18px !important; }
  #hdr .logo { font-size: 19px; }
}
@media (max-width: 400px) {
  .container-x { padding-left: 14px !important; padding-right: 14px !important; }
}