/* ============================================================
   AceBase header — uncrate.com's masthead, two bands.

   Measurements come from uncrate's live CSS, scaled for CJK labels:

     band 1  black, centred wordmark, tools right          min-height 84px
     band 2  main nav  28px, 1px black rule underneath, gap 18px

   uncrate has a third band there, a row of sub-links that swaps with the
   section you are in. This header does not: the pages it listed are all
   reachable from their section's own landing page, and where it was not a
   duplicate of that page it was padding — an entry point that only existed
   for readers who happened to already be in the right section.

   Two deliberate departures from the original:

   - uncrate's links are #ae9e85, which is 2.6:1 on white and only decorative
     at any size. Links on white use --ab-accent-deep (same hue, 5.9:1); the
     raw tan is kept for the black family row, where it reads fine.
   - The header is static rather than sticky. uncrate's own header scrolls
     away too, and a pinned masthead this tall costs more than it gives.

   The markup this styles lives in overrides/partials/header.html, which also
   documents the Material hooks (.md-header__inner) the markup relies on.
   ============================================================ */

.md-header {
  /* Material pins the header and paints it --md-primary-fg-color. Both have
     to go before the bands below can lay themselves out. */
  position: static;
  display: block;
  background: var(--ab-bg);
  box-shadow: none;
  color: var(--ab-text);
}

.md-header__inner {
  padding: 0;
}

/* Material gates .md-header__button on :not([hidden]), which outranks a bare
   class — hence the compound selector and the !important. */
.md-header__button.ab-band__drawer {
  display: none !important;
}

/* Page frontmatter `hide: - navigation` removes the sidebar; without it the
   drawer label below would open an empty panel. */
.md-sidebar--primary[hidden] {
  display: none !important;
}

/* ---------- band 1 — black ---------- */
.ab-band {
  position: relative;
  z-index: 3;
  background: var(--ab-header-bg);
  color: var(--ab-header-fg);
}

.ab-band__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-sizing: border-box;
  max-width: 960px;
  min-height: 84px;
  margin: 0 auto;
  padding: 0 20px;
}

.ab-wordmark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none !important;
  color: var(--ab-header-fg) !important;
  white-space: nowrap;
}

.ab-wordmark__name {
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ab-band__tools {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* ---------- band 1 family strip ----------
   uncrate's slim family row, sitting on the black band above the wordmark:
   the sibling sites and the brand on one centred line, uppercase, with a
   hairline under them. Numbers are uncrate's own — 12px/700 with 0.5px of
   tracking, 24px between items, 13px above and 14px below, and a 1px white
   rule across the 960px column. (uncrate hangs a channel menu off the handle;
   this strip had one too until 2026-09-23, and now opens the chat window
   instead — so nothing here is positioned or stacked any more.)

   `px` throughout, and no rem: the strip is a fixed 960px column, so its
   contents must not grow when Material steps the root font size up (20px →
   22px at 100em → 24px at 125em). */

.ab-family__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 24px;
  box-sizing: border-box;
  max-width: 960px;
  margin: 0 auto;
  padding: 13px 20px 14px;
  list-style: none;
  border-bottom: 1px solid var(--ab-header-fg);
}

.ab-family__item {
  position: relative;
}

.ab-family__link {
  display: block;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  /* uncrate's items are 15px tall, which is where the menu starts. */
  line-height: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ab-header-fg) !important;
  text-decoration: none !important;
  opacity: 0.85;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.ab-family__link:hover,
.ab-family__link:focus-visible {
  opacity: 1;
  color: var(--ab-accent) !important;
}

/* uncrate's .atsign: the @ is spacing, not part of the name. */
.ab-family__at {
  padding-right: 2px;
}

.ab-band__tool {
  color: var(--ab-header-fg) !important;
}

/* ---------- band 2 — main nav ---------- */
.ab-mainnav {
  background: var(--ab-bg);
  border-bottom: 1px solid var(--ab-text);
  /* No margin below it: uncrate's 3px is the hairline gap between this rule
     and the sub-nav's own top rule, and there is no band 3 here to pair with. */
  margin-bottom: 0;
}

.ab-mainnav__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 14px;
}

.ab-mainnav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 18px;
  margin: 0;
  padding: 0.75rem 0 0;
  list-style: none;
  /* Seven CJK labels at 28px span ~727px of the 920px column (measured
     2026-09-22, the day CAR became the seventh), so up here nothing overflows;
     scrolling is insurance against a wider font stack, not a load-bearing
     behaviour. */
  overflow-x: auto;
  scrollbar-width: none;
}

.ab-mainnav__list::-webkit-scrollbar {
  display: none;
}

.ab-mainnav__item {
  flex: 0 0 auto;
}

.ab-mainnav__link {
  display: inline-block;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ab-text) !important;
  text-decoration: none !important;
}

.ab-mainnav__link:hover,
.ab-mainnav__link.is-active {
  color: var(--ab-accent-deep) !important;
}

/* ---------- narrow screens ----------
   uncrate keeps the main nav on one line below 768px; this header lets it
   wrap instead, and shows the drawer label, which is how the sidebar is
   reached once the column collapses. */
@media screen and (max-width: 76.1875em) {
  .md-header__button.ab-band__drawer {
    display: inline-block !important;
  }
}

/* Seven CJK labels at 28px are ~727px of the 920px column (measured
   2026-09-22), so they still fit on one row well below this breakpoint — the
   wrap only actually happens around 600px. It is here at 1000px because
   wrapping beats a row of glyphs sliced in half at the right edge, and
   wrapping early costs nothing. Was written for six labels at ~886px, which
   was already conservative. */
@media screen and (max-width: 1000px) {
  .ab-mainnav__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    overflow-x: visible;
  }

  .ab-mainnav__link {
    font-size: 24px;
  }
}

@media screen and (max-width: 767px) {
  .ab-band__inner {
    min-height: 68px;
    padding: 0 16px;
  }

  /* 16px rather than the 20px above: the band's own padding is 16px on a
     narrow screen. */
  .ab-family__list {
    gap: 6px 16px;
    padding: 10px 16px 11px;
  }

  /* The drawer label and the search icon sit ~200px apart on a 390px band,
     which is not enough room for a viewport-centred 192px wordmark — it
     renders underneath the search icon. Take it out of absolute centring and
     let it occupy the gap instead; it can then never collide. */
  .ab-wordmark {
    position: static;
    transform: none;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .ab-wordmark__name {
    font-size: 1.4rem;
  }

  .ab-mainnav__inner {
    padding: 0 16px 10px;
  }

  .ab-mainnav__list {
    gap: 6px 14px;
    padding-top: 0.6rem;
  }

  .ab-mainnav__link {
    font-size: 20px;
  }
}