/* Stackify header override styling -- pairs with
 * overrides/partials/header.html. Restyles Material's header shell to
 * match marketing-site's Nav component (white surface, hairline border,
 * no fixed color bar, three-group space-between layout) instead of
 * hand-editing the generated brand.css. Colors reference the --md-*
 * custom properties brand.css already maps from --sk-* brand tokens,
 * except --sk-header-bg below: brand.css's sync script doesn't expose a
 * "surface" token (only page bg), so this mirrors design/tokens.css's
 * --sk-surface-light/-dark by hand. Update it if those values change. */

:root,
[data-md-color-scheme="default"] {
  --sk-header-bg: #ffffff;
}

[data-md-color-scheme="slate"] {
  --sk-header-bg: #1d1f21;
}

/* Material's root font-size is 125% (20px), unlike marketing-site's
 * standard 16px root -- every size below is `px`, not `rem`, so this
 * header renders at the exact same physical size as marketing's Nav
 * regardless of Material's root scaling. */

.md-header {
  background-color: var(--sk-header-bg);
  color: var(--md-default-fg-color);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: none;
}

/* Material's own .md-grid (max-width: 61rem, i.e. 1220px at this
 * theme's 125% root font-size) and .md-header__inner (padding: 0 .2rem,
 * i.e. 4px) don't match marketing's Tailwind container (max-w-6xl =
 * 1152px, px-6 = 24px), so the header content sits at a different
 * horizontal position than marketing's Nav on the same viewport width.
 * Override both here, in px, to line the two frames up exactly. */
.sk-header {
  height: 56px;
  max-width: 1152px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Material's built-in title (site name / current page title) is made
 * for the colored-bar header; we show our own logo + links instead. */
.md-header__title {
  display: none;
}

/* Explicit font-family (rather than relying purely on inheritance) so
 * this header always renders in the same self-hosted Inter as
 * marketing-site's Nav, matching marketing's Tailwind `font-sans` stack. */
.sk-header,
.sk-header__links a,
.sk-header__links-active,
.sk-header__login,
.sk-header__get-started {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Not space-between: docs' right group (search box) is much wider than
 * marketing's (locale toggle + login + get-started), so evenly splitting
 * the remaining space would push .sk-header__links further left than it
 * sits on marketing. Position brand/links/right independently instead so
 * the links line up with marketing regardless of the right group's width. */
.sk-header {
  justify-content: flex-start;
}

.sk-header__right {
  margin-left: auto;
}

.sk-header__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sk-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--md-default-fg-color);
  text-decoration: none;
  flex-shrink: 0;
}

.sk-header__wordmark {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.4px;
}

.sk-header__links {
  display: none;
  align-items: center;
  gap: 24px;
  margin-left: 258px; /* matches marketing's logo -> nav gap exactly */
}

.sk-header__links a,
.sk-header__links-active {
  font-size: 14px;
  font-weight: 500;
  color: var(--md-default-fg-color--light);
  text-decoration: none;
  transition: color 125ms;
  white-space: nowrap;
}

.sk-header__links a:hover {
  color: var(--md-default-fg-color);
}

.sk-header__links-active {
  color: var(--md-primary-fg-color);
  font-weight: 600;
}

.sk-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.sk-header__login {
  display: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--md-default-fg-color--light);
  text-decoration: none;
  white-space: nowrap;
}

.sk-header__login:hover {
  color: var(--md-default-fg-color);
}

.sk-header__get-started {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: var(--md-primary-fg-color);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 125ms;
}

.sk-header__get-started:hover {
  background-color: var(--md-primary-fg-color--dark);
}

/* Material's search box is tuned for a colored header bar (translucent
 * black pill). On our white header, use a token-backed neutral pill
 * instead so it stays visible in both light and dark schemes. */
.md-search__form {
  background-color: var(--md-default-fg-color--lightest);
}

/* Show the marketing-matching nav links and Login text once there's
 * room -- matches marketing-site's `hidden md:flex` (768px) breakpoint. */
@media screen and (min-width: 48em) {
  .sk-header__links {
    display: flex;
  }

  .sk-header__login {
    display: inline;
  }
}