/* ============================================================================
   Header variant: full-width bar instead of a floating pill.

   Why this exists: every other header on axelera.ai is a bar that spans the
   whole viewport and sits flush against the top of the page. The odyssey
   header is a centred pill floating 1rem below the top edge, which reads as a
   different site. This variant keeps the liquid-glass material exactly as it
   is, blur, saturation, the lit top edge, and changes only the geometry.

   It is inert until the html element carries the class, so the shipped page
   is unaffected. The word html is spelled out here because HubSpot sniffs
   the head of every uploaded .css file and rejects the whole upload as
   "html in a css file" when it sees a tag-shaped token in the first lines. Turn it on with ?header=bar in the URL, or from the console:

       document.documentElement.classList.toggle('header-bar')

   Measured against the live site on 2026-08-26: its header is a full-bleed
   fixed bar 111px tall, solid #121D3D, logo 41px from the left edge, links and
   a single gold pill CTA in a right-aligned cluster. This variant matches the
   shape and the alignment; it keeps glass rather than adopting the flat navy,
   because the glass is the point of the redesign.
   ========================================================================= */

/* The wrapper stops centring a pill and becomes the bar's own full-width rail. */
html.header-bar .nav-wrap {
  top: 0;
  padding-inline: 0;
}

/* The bar itself: full bleed, square, and tall enough to read as site chrome
   rather than as a control that happens to be wide. 76px against the live
   site's 111px, because our nav content is lighter and a 111px bar would eat
   a sixth of a laptop viewport for no gain. */
html.header-bar .nav {
  max-width: none;
  width: 100%;
  border-radius: 0;
  min-height: 4.75rem;
  gap: clamp(0.6rem, 1.8vw, 1.6rem);
  /* The right pad clears the view switches. They are position:fixed at 18px
     from the right, two 38px buttons with an 8px gap, so 102px is occupied
     inside the bar's span. They used to sit beyond the pill's edge entirely.
     Without this reservation they land on top of the Shop button. */
  padding: 0 clamp(7.25rem, 9vw, 7.75rem) 0 clamp(1.25rem, 3.25vw, 2.75rem);
}

/* The glass panel was shaped for something that floats: an all-round outline,
   a lifted shadow, a lit bottom edge. A bar has only two edges that matter,
   so it keeps the lit top and gains a hairline underneath to separate it from
   the page. */
html.header-bar .nav.fg {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 0 rgba(23, 21, 15, 0.08),
    0 14px 34px -26px rgba(23, 21, 15, 0.5);
}

html.header-bar .nav.fg::after { border-radius: 0; }

[data-theme="dark"] html.header-bar .nav-over-hero,
[data-theme="blue"] html.header-bar .nav-over-hero,
html.header-bar [data-theme="dark"] .nav-over-hero,
html.header-bar [data-theme="blue"] .nav-over-hero {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.07),
    0 16px 40px -28px rgba(0, 0, 0, 0.6);
}

/* Alignment is what actually makes it read as the same family as the live
   site: logo hard left, everything else in one cluster hard right. In the
   pill the items simply filled the available width. */
html.header-bar .nav-links { margin-left: auto; }

/* The wordmark carries more of the bar than it did the pill, so it grows to
   match the presence it has on the live site. */
html.header-bar .nav-brand img {
  width: auto;
  height: 2.1rem;
}

/* The page starts under a bar that is flush with the top, so the first
   section needs the bar's height back. The hero paints its own field behind
   the bar, which is why only the copy is pushed down. */
html.header-bar .hero { padding-top: clamp(8rem, 14vh, 10.5rem); }

@media (max-width: 900px) {
  html.header-bar .nav {
    min-height: 4rem;
    padding: 0 clamp(1rem, 4vw, 1.5rem);
  }
  html.header-bar .nav-brand img { height: 1.7rem; }
}

/* The open mobile menu drops from the bar's own bottom edge rather than from
   a floating pill, so it spans the viewport too. */
@media (max-width: 900px) {
  html.header-bar .nav-links.is-open {
    left: 0;
    right: 0;
    border-radius: 0;
  }
}