/* The internal header: one frame for every internal system and page (Company OS, the trainer hub,
   talks, the brand catalogue, the slide and document specimens, the decision page). Each keeps its
   own nav items; this file owns the frame: strip, bar, lockup, product name, width.

   Plain CSS, no Tailwind, so a static page links it and a generated page inlines it. It needs the
   package's tokens (tokens.css in a Tailwind app, tokens.root.css on a plain page) and reads the
   expert theme roles (--background, --foreground, --border, --accent) where expert.css sets them,
   else the light tokens. A page that themes without expert.css sets those four itself; one that
   follows the system theme sets data-theme="auto" on html. Without data-theme the page is light.

   The markup, which components/AppHeader.astro renders:

   <header class="hw-header">
     <div class="hw-header-strip"></div>
     <div class="hw-header-row hw-container">
       <a class="hw-header-brand" href="/" aria-label="hackers&wizards <Product>">
         <img class="hw-header-logo" src=".../logos/lockup-screen.svg" alt="" width="8042" height="1489">
         <img class="hw-header-logo-night" src=".../logos/lockup-screen-night.svg" alt="" width="8196" height="1641">
         <span class="hw-header-product"><Product></span>
       </a>
       <nav class="hw-header-nav" aria-label="Main">
         <a class="hw-header-link" href="..." aria-current="page">...</a>
         <span class="hw-header-sep"></span>
       </nav>
     </div>
   </header>

   Page content takes the same width with class hw-container. */

.hw-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Strip, bar and hairline: --spacing-app-header tall. The lengths are tokens.css's. */
.hw-header {
  --hw-bg: var(--background, var(--color-bg));
  --hw-fg: var(--foreground, var(--color-ink));
  --hw-accent: var(--accent, var(--color-teal-dark));
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--border, var(--color-border));
  background: color-mix(in srgb, var(--hw-bg) 70%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--hw-fg);
  font-family: var(--font-sans);
}

/* Teal to purple in both themes, mixed in oklab as the website and hw-strip draw it. */
.hw-header-strip {
  height: var(--spacing-strip);
  background: linear-gradient(to right in oklab, var(--color-teal), var(--color-purple));
}

.hw-header-row {
  display: flex;
  height: var(--spacing-header-row);
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

/* The product name centres on the lockup's letters: the lockup rises by the wizard's lift, and
   the name sits at line-height 1 on the box centre. The whole lockup is one link: the pointer is
   stated, since WebKit's own stylesheet leaves a link at cursor auto, and nothing in it selects
   as text. */
.hw-header-brand {
  display: flex;
  min-height: var(--spacing-logo);
  flex-shrink: 0;
  align-items: center;
  gap: 0.41rem;
  margin-right: 0.75rem;
  color: var(--hw-fg);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.hw-header-logo,
.hw-header-logo-night {
  display: block;
  width: auto;
  height: var(--spacing-logo);
  flex-shrink: 0;
  translate: 0 var(--logo-wizard-lift);
}

/* The night cut's box holds the wizard's grey edge: taller by 1640.612 / 1489 at the same letter
   size. */
.hw-header-logo-night {
  display: none;
  height: calc(var(--spacing-logo) * 1640.612 / 1489);
}

html[data-theme="dark"] .hw-header-logo {
  display: none;
}

html[data-theme="dark"] .hw-header-logo-night {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .hw-header-logo {
    display: none;
  }

  html[data-theme="auto"] .hw-header-logo-night {
    display: block;
  }
}

/* Read by screen readers at every width, shown from 64rem, where the nav leaves room. */
.hw-header-product {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
}

@media (min-width: 48rem) {
  .hw-header-brand {
    margin-right: 1.5rem;
  }
}

@media (min-width: 64rem) {
  .hw-header-product {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

/* A nav wider than the bar scrolls sideways rather than pushing the bar past the screen. */
.hw-header-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.hw-header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: color-mix(in srgb, var(--hw-fg) 70%, transparent);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}

/* The nav clips on every side (overflow-x makes overflow-y auto too), so the ring goes inside. */
.hw-header-link:focus-visible {
  outline-offset: -2px;
}

.hw-header-link:hover {
  background: color-mix(in srgb, var(--muted, var(--color-tint)) 40%, transparent);
  color: var(--hw-fg);
}

.hw-header-link[aria-current="page"],
.hw-header-link[aria-expanded="true"] {
  background: color-mix(in srgb, var(--hw-accent) 7%, transparent);
  color: var(--hw-accent);
  font-weight: 500;
}

.hw-header-sep {
  width: 1px;
  height: 1rem;
  flex-shrink: 0;
  margin-inline: 0.25rem;
  background: color-mix(in srgb, var(--hw-fg) 7%, transparent);
}

/* On a phone the nav's three links fit beside the lockup: no gap in the bar, tighter links. At
   390 px the last link was cut ("Dokum"); blind review 2026-11-02. */
@media (max-width: 29.99rem) {
  .hw-header-row {
    gap: 0;
  }
  .hw-header-brand {
    margin-right: 0.25rem;
  }
  .hw-header-nav {
    gap: 0;
  }
  .hw-header-link {
    padding-inline: 0.375rem;
    font-size: 0.8125rem;
  }
}

/* A nav that still scrolls fades out at its right edge until it is scrolled to the end, so a cut
   item reads as more to scroll to. Without scroll-driven animations it stays unfaded. */
@keyframes hw-header-nav-fade {
  0%,
  95% {
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
  }
  100% {
    mask-image: none;
  }
}
@supports (animation-timeline: scroll()) {
  .hw-header-nav {
    animation: hw-header-nav-fade linear both;
    animation-timeline: scroll(self inline);
  }
}