/* The public header, shared by both shells. It used to live in dashboard.css,
   which the product shell does not load, so that shell drew a second header of
   its own — and the two drifted apart in height, spacing and hover. */

/* The bar's ground is tied to how far the page has moved, not to a threshold:
   site-nav.js writes --nav-solid as 0 -> 1 across the first stretch of scroll
   and every layer of the header reads it, so the scrim fills in exactly as far
   as the reader has travelled and empties again as they come back. Nothing
   here transitions — the value already arrives one scroll frame at a time, and
   a transition on top of it would only lag behind the page. Without the script
   it stays 0, which is the page's own tone. */
.site-nav {
  --nav-solid: 0;
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 64px;
  border-bottom: var(--border-width) solid
    color-mix(in srgb, var(--raised) calc(var(--nav-solid) * 100%), transparent);
  background: color-mix(in srgb, var(--background) calc(var(--nav-solid) * 100%), var(--background));
  backdrop-filter: blur(calc(var(--nav-solid) * 18px)) saturate(calc(1 + var(--nav-solid) * .15));
}

.site-nav-inner {
  width: min(var(--page-content-max), calc(100% - var(--page-gutter) * 2));
  min-height: 64px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
}

/* The approved wordmark (brand/current) rather than letter-spaced text: the
   lettering is custom vector artwork, so no font stack can stand in for it.
   One cut at every width: the header has room for the full "gowithme" even on
   a phone, and swapping in the short "gwm" halfway down made the brand read as
   two logos rather than one. */
.site-wordmark {
  --wordmark-height: 1.35rem;
  --wordmark-scale: calc(var(--wordmark-height) / 440);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--wordmark-scale) * 1852);
  height: var(--wordmark-height);
  text-decoration: none;
}

.site-wordmark img {
  display: block;
  width: 100%;
  height: var(--wordmark-height);
}

.site-wordmark:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

.site-links,
.site-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-links {
  min-width: 0;
  overflow-x: auto;
}

.site-links > * {
  flex-shrink: 0;
}

/* The trophies page opens on the same filter trigger as the archive and adds
   only the gap under it. Bottom only — above it the shell's margin already sets
   the one gap the header gets on every page. */
.trophies-filters {
  margin-block: 0 var(--space-6);
}

.site-links a,
.site-account,
.site-actions .hero-stat-link {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-control);
  color: var(--muted);
  font: var(--text-meta);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.site-links a:hover,
.site-links a[aria-current="page"],
.site-account:hover,
.site-account[aria-current="page"],
.site-actions .hero-stat-link:hover {
  color: var(--text);
  background: var(--nav-pill, var(--raised));
}

.site-actions {
  margin-left: auto;
  flex-shrink: 0;
}

.site-actions #accountMenu {
  min-width: 0;
}

.site-account {
  gap: var(--space-3);
  white-space: nowrap;
}

/* The header avatar is part of the header, not of a page: the product pages
   never load dashboard.css, so its size has to live here or the picture
   renders at its natural size. */
.site-account .account-avatar {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--raised);
  border: var(--border-width) solid var(--line);
  font: var(--text-micro);
  font-weight: var(--weight-bold);
  color: var(--text);
}

.site-account .account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-account:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.site-actions .hero-stat-link {
  border: 0;
  background: transparent;
}

.site-actions .hero-stat-link span {
  display: none;
}

.site-actions .hero-stat-link strong {
  font: var(--text-meta);
  font-weight: var(--weight-bold);
}

/* Both public shells share the same mobile disclosure. Without JS their
   original links stay usable; desktop keeps its existing row and account. */
.site-menu { display: contents; }
.site-menu-toggle { display: none; }

@media (max-width: 760px) {
  .has-mobile-menu > .site-nav-inner,
  .product-header.has-mobile-menu {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
  }

  .site-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-5);
    min-width: 0;
    min-height: 44px;
    max-width: 45%;
    padding: var(--space-4) var(--space-2);
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font: var(--text-meta);
    font-weight: var(--weight-bold);
    cursor: pointer;
  }

  .site-menu-toggle { margin-left: auto; }

  .site-menu-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .site-menu-toggle::after {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  .site-menu-toggle[aria-expanded="true"] { color: var(--text); }
  .site-menu-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
  .site-menu-toggle:focus-visible { outline: var(--border-width-strong) solid var(--brand); outline-offset: 2px; border-radius: var(--radius-xs); }

  .has-mobile-menu .site-menu {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--space-6) var(--space-6);
    background: var(--background);
    border-bottom: var(--border-width) solid var(--line);
  }
  .has-mobile-menu .site-menu.is-open { display: block; }
  .has-mobile-menu.is-menu-open { background: var(--background); }
  .site-menu :is(.site-links, .product-nav) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: visible;
  }
  .site-menu :is(.site-links, .product-nav) > a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: var(--space-5) 0;
    border-bottom: var(--border-width) solid var(--line);
    border-radius: 0;
    background: none;
    color: var(--muted);
  }
  .site-menu :is(.site-links, .product-nav) > a:is(:hover, [aria-current="page"]) { color: var(--text); }
  .site-menu :is(.site-actions, .header-actions) { margin: var(--space-5) 0 0; }
  .site-menu .site-account { min-height: 44px; padding-inline: 0; }

  /* An open menu needs an opaque top row even over an entity's artwork. */
  body.is-detail-page:has(.detail-game-hero.has-hero) .site-nav.is-menu-open { background: var(--background); }
}