/* Header styles — BestPlayGamee */
.site-header { position: sticky; top: 0; background: var(--color-surface); border-bottom: 1px solid var(--gray-300); z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-3); }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; }
.brand__logo { width: 40px; height: 40px; border: 2px solid var(--gray-900); background: var(--gray-200); border-radius: var(--radius-1); box-shadow: 0 2px 0 var(--gray-900); }
.brand__text { display: grid; line-height: 1; }
.brand__name { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0; }
.brand__tag { font-size: var(--font-size-xs); color: var(--gray-600); }

/* Nav */
.primary-nav { display: block; }
.menu { display: flex; gap: clamp(var(--space-3), 2.4vw, var(--space-6)); align-items: center; padding: 0; margin: 0; list-style: none; }
.menu a { font-weight: 600; }

/* Mobile toggle */
.nav-toggle { display: none; }

/* Responsive behavior */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  /* Progressive enhancement: only collapse if JS is available */
  html.has-js .primary-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-surface); border-bottom: 1px solid var(--gray-300); box-shadow: var(--shadow-2); display: none; }
  html.has-js .primary-nav.is-open { display: block; }
  html.has-js .menu { flex-direction: column; align-items: stretch; gap: 0; }
  html.has-js .menu li { border-top: 1px solid var(--gray-200); }
  html.has-js .menu li:first-child { border-top: 0; }
  html.has-js .menu a { display: block; padding: var(--space-4) var(--space-6); }
}

/* Utilities for open state */
.no-scroll { overflow: hidden; }

/* High-contrast focus visible already in base.css; add visible outline context in header */
.site-header .nav-link:focus-visible { outline-offset: 4px; }