/* Header drawn after whatnot.com's header, on a Whatnot yellow-500 band: the
   start region's tabs as its nav pills, the center search as its search
   field, and the end region's links as its "Become a Seller" button. Below
   1001px the theme moves the links into the drawer and shows a search icon
   instead; the band and its icons are coloured here, the drawer is not.

   Tabs (Docs, API) are Whatnot's Home/Browse pills: system-ui 13px/18px
   semibold black on a fully rounded 8px 24px pill. On the yellow band the
   current tab fills neutral-900 with white text, as Whatnot's buttons on its
   yellow sections do, and the others fill transparent black 10% on hover.
   Whatnot sets every tab at the same weight, so the theme's grey-then-bold
   and its underline are dropped. */
/* Whatnot's header is 65px (a 64px row plus its rule) with a 35px-tall logo.
   The yellow band keeps that height without the rule. Everything that clears
   the header (main's top padding, the fixed sidebar, the sticky table of
   contents, heading scroll margins) reads this variable. */
:root {
  --scalar-header-height: 65px;
}

/* The band is yellow in both colour modes and has no bottom rule. Its text
   and icons (the drawer's menu button, the mobile search icon) read the
   header tokens. */
header.header.t-header {
  --scalar-header-background-1: #ffe414;
  --scalar-header-border-color: transparent;
  --scalar-header-color-1: #000;
  --scalar-header-color-2: #1c1c1c;
  --scalar-header-background-toggle: #545454;
  border-bottom-width: 0;
}

/* The yellow band is a light surface in dark mode too, so its subtree takes
   the default theme's light tokens: the search field's ⌘K hint, the Ask AI
   button and any header dropdown would otherwise draw light-on-light. */
.dark-mode header.header.t-header {
  --scalar-color-1: #1b1b1b;
  --scalar-color-2: #707070;
  --scalar-color-3: #8e8e8e;
  --scalar-background-1: #fff;
  --scalar-background-2: #f6f6f6;
  --scalar-background-3: #e7e7e7;
  --scalar-border-color: #dfdfdf;
  --scalar-button-1: #000;
  --scalar-button-1-color: #fff;
  --scalar-button-1-hover: rgba(0, 0, 0, 0.8);
}

/* The theme writes the old 50px header into the API reference's viewport
   height instead of reading the variable, and leaves the header out of the
   offset its sticky cards (response examples) stick below. The tab band
   layout sets its own. */
main.content.content-header:not(.content-tabs-header) {
  --refs-viewport-height: calc(
    100dvh - var(--scalar-header-height) - var(--scalar-banner-height, 0px)
  );
  --refs-viewport-offset: calc(
    var(--scalar-header-height) + var(--scalar-banner-height, 0px)
  );
}

/* scalar.config.yaml gives the header the dark-lettered logo in both modes */
.t-header__start img.logo {
  height: 35px;
  width: auto;
}

.t-header__start .t-header__nav {
  --wn-tab-color: #000;
  --wn-tab-hover-background: #0000001c;
  --wn-tab-current-background: #1c1c1c;
  --wn-tab-current-hover-background: #2d2d2d;
  --wn-tab-current-color: #fff;
  --wn-tab-focus: #0245f6;
  gap: 12px;
}

.t-header__start .t-header__nav > a.t-header__item {
  /* The theme stretches items to the band for its underline */
  height: auto;
  padding: 8px 24px;
  border-bottom: 0;
  border-radius: 9999px;
  background-color: transparent;
  color: var(--wn-tab-color);
  font-family:
    system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}

/* Both stacked label copies (the theme reserves the active width with a
   second, bold copy) take the one weight. The bold copy also carries
   .t-header__item--active, which colours it with the theme's header text
   colour (black, unreadable on the current tab's dark pill), so both copies
   take the link's colour. */
.t-header__start .t-header__nav > a.t-header__item .t-header__item-label > * {
  color: inherit;
  font-weight: 600;
}

.t-header__start .t-header__nav > a.t-header__item:hover {
  background-color: var(--wn-tab-hover-background);
  color: var(--wn-tab-color);
}

.t-header__start .t-header__nav > a.t-header__item[aria-current="page"] {
  background-color: var(--wn-tab-current-background);
  color: var(--wn-tab-current-color);
}

.t-header__start .t-header__nav > a.t-header__item[aria-current="page"]:hover {
  background-color: var(--wn-tab-current-hover-background);
}

/* Docs links to the introduction (scalar.config.yaml), so the theme marks it
   current only on Getting Started pages. Every other page with no current
   tab is a docs page too (Request IDs, Errors, Taxonomy, the docs-side API
   reference), except the overview (.wn-home, pages/overview.md), which stays
   unhighlighted until Docs is clicked. */
body:not(:has(.wn-home)) .t-header__start .t-header__nav:not(:has(> a.t-header__item[aria-current="page"])) > a.t-header__item:first-child {
  background-color: var(--wn-tab-current-background);
  color: var(--wn-tab-current-color);
}

body:not(:has(.wn-home)) .t-header__start .t-header__nav:not(:has(> a.t-header__item[aria-current="page"])) > a.t-header__item:first-child:hover {
  background-color: var(--wn-tab-current-hover-background);
}

.t-header__start .t-header__nav > a.t-header__item:focus-visible {
  outline: 2px solid var(--wn-tab-focus);
  outline-offset: 2px;
}

/* Search field, after Whatnot's "Search Whatnot": 16px radius, white fill,
   16px side padding and gap, a 20px neutral-500 magnifier and 14px/21px
   system-ui text. On the yellow band the white fill carries the field, so its
   1px border matches the fill. The theme's search button reads the sidebar
   search tokens, so its colours are set as those tokens here. */
.t-header .search-group {
  --scalar-sidebar-search-background: #fff;
  --scalar-sidebar-search-border-color: #fff;
  --scalar-sidebar-search-color: #7f7f7f;
}

/* The theme's wrapper is a full-height block that pins the button to its
   top; centre it in the taller band instead. */
header .t-header__center .search-wrapper {
  display: flex;
  align-items: center;
}

.t-header .search-wrapper > button.search {
  height: 39px;
  padding-inline: 16px;
  gap: 16px;
  border-width: 1px;
  border-radius: 16px;
  font-family:
    system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  line-height: 21px;
}

.t-header .search-wrapper > button.search > svg {
  width: 20px;
  height: 20px;
}

/* End-region links (Support) are Whatnot's "Become a Seller" button: a 32px
   fully rounded pill in transparent black 10% (20% on hover) with 14px/21px
   semibold neutral-900 text, in both modes on the yellow band. */
.t-header__end .t-header__nav {
  --wn-button-background: #0000001c;
  --wn-button-hover-background: #0003;
  --wn-button-color: #1c1c1c;
  --wn-button-focus: #545454;
}

.t-header__end .t-header__nav > a.t-header__item {
  height: 32px;
  padding-inline: 16px;
  border-bottom: 0;
  border-radius: 9999px;
  background-color: var(--wn-button-background);
  color: var(--wn-button-color);
  font-family:
    system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
}

.t-header__end .t-header__nav > a.t-header__item .t-header__item-label > * {
  color: inherit;
  font-weight: 600;
}

.t-header__end .t-header__nav > a.t-header__item:hover {
  background-color: var(--wn-button-hover-background);
  color: var(--wn-button-color);
}

/* Whatnot's button focus: 2px neutral-700 outline, 1px offset */
.t-header__end .t-header__nav > a.t-header__item:focus-visible {
  outline: 2px solid var(--wn-button-focus);
  outline-offset: 1px;
}