.c-site-header {
  --c-site-header-logo-scale: 1;
  /* Shared by the background, border, and logo transitions so the scrolled
     state changes stay in sync. */
  --c-site-header-transition: 200ms ease;

  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background-color: var(--wr-color-surface-default);
  /* Span the transparent border row too, or the hero gradient repeats into it
     and paints a dark line under the header. */
  background-origin: border-box;
  border-block-end: var(--wa-border-width-s, 1px) solid transparent;
  transition:
    background-color var(--c-site-header-transition),
    border-color var(--c-site-header-transition);

  &.c-site-header--scrolled {
    border-block-end-color: var(--wa-color-neutral-border-quiet);
  }

  /* Pages opt in via `content_for :header_mode, "hero"`: the header floats over
     the page hero with a fading backdrop instead of taking up layout space.
     Once scrolled, the solid surface color fades in under the gradient (both
     are the same hue, so the result matches the default mode exactly). */
  &.c-site-header--hero {
    --c-site-header-logo-scale: 1.35;

    position: fixed;
    inset-inline: 0;
    background-color: transparent;
    background-image: linear-gradient(
      180deg,
      color-mix(in oklab, var(--wr-color-surface-default) 92%, transparent),
      color-mix(in oklab, var(--wr-color-surface-default) 55%, transparent) 62%,
      transparent
    );

    @media (width >= 64rem) {
      --c-site-header-logo-scale: 1.6;
    }

    &.c-site-header--scrolled {
      --c-site-header-logo-scale: 1;

      background-color: var(--wr-color-surface-default);
    }
  }
}

.c-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-m);
  max-width: 90rem;
  min-height: var(--wr-site-header-height);
  margin-inline: auto;
  padding: var(--wa-space-s) var(--wa-space-l);

  @media (width >= 64rem) {
    gap: var(--wa-space-l);
    padding-inline: var(--wa-space-3xl);
  }
}

.c-site-header__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  text-decoration: none;
}

.c-site-header__logo {
  display: block;
  width: auto;
  height: 3rem;
  transform: scale(var(--c-site-header-logo-scale));
  transform-origin: left top;
  transition: transform var(--c-site-header-transition);

  @media (width >= 64rem) {
    height: 3.5rem;
  }
}

.c-site-header__nav {
  display: none;
  align-items: stretch;
  justify-content: center;
  gap: var(--wa-space-m);
  flex: 1 1 auto;

  @media (width >= 64rem) {
    display: flex;
  }
}

.c-site-header__nav-label {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  border-bottom: var(--wa-border-width-m, 2px) solid transparent;
  color: var(--wr-color-text-primary);

  &.c-site-header__nav-label--active {
    color: var(--wa-color-brand-fill-loud);
    border-bottom-color: var(--wa-color-brand-fill-loud);
  }
}

.c-site-header__actions {
  display: none;
  align-items: center;
  flex: 0 0 auto;

  @media (width >= 64rem) {
    display: flex;
  }
}

.c-site-header__menu-button {
  display: inline-block;
  flex: 0 0 auto;

  @media (width >= 64rem) {
    display: none;
  }

  &::part(base) {
    color: var(--wr-color-text-primary);
  }
}

.c-site-header__drawer-nav {
  padding-block-start: var(--wa-space-s);
}

/* Match the desktop nav labels: plain drawer links use primary text instead of
   the brand tint. The active (filled) link keeps its on-loud contrast color. */
.c-site-header__drawer-link[appearance="plain"]::part(base) {
  color: var(--wr-color-text-primary);
}

.c-site-header__drawer-user {
  justify-content: center;
}