/* ============================================================================
   GAMESWA — SITE CHROME (nav + footer)
   Session A scaffold · 2026-08-10

   Shared across every page. The MARKUP lives in tools/page-template.html
   between the GW:NAV / GW:FOOTER markers and is copied verbatim into each
   page (there is no build step, so there are no server-side includes).
   tools/check-chrome.sh fails loudly if any page drifts from the canonical
   block. If you need a chrome change, change the template and re-run the
   checker across every page — never edit one page's copy.
   ========================================================================== */

/* ── NAV ─────────────────────────────────────────────────────────────────*/
.gw-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--gw-z-nav);
  transition: background-color var(--gw-dur-base) ease, border-color var(--gw-dur-base) ease;
  border-bottom: 1px solid transparent;
}
.gw-nav.is-scrolled {
  background: var(--gw-scrim);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--gw-rule);
}
.gw-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--gw-s-4);
  min-height: 60px;
}
/* min-height is the tap target, not the wordmark: the image stays 26px and
   centres inside a 44px box. Same floor as every other control. */
.gw-nav__logo { display: flex; align-items: center; min-height: 44px; margin-inline-end: auto; }
.gw-nav__logo img { height: 26px; width: auto; }
/* The wordmark ships light. On a light surface it becomes ink. */
html.gw-light .gw-nav__logo img,
html[data-theme="light"] .gw-nav__logo img { filter: brightness(0); }
@media (prefers-color-scheme: light) {
  html:not(.gw-dark):not([data-theme="dark"]) .gw-nav__logo img { filter: brightness(0); }
}

.gw-nav__links { display: none; align-items: center; gap: var(--gw-s-5); }
.gw-nav__link {
  font-family: var(--gw-font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gw-text);
  padding-block: var(--gw-s-2);
  transition: color var(--gw-dur-fast) ease;
}
.gw-nav__link:hover { color: var(--gw-accent-text); }
.gw-nav__link[aria-current='page'] {
  color: var(--gw-accent-text);
  box-shadow: inset 0 -2px 0 0 var(--gw-punct);
}
/* Base state is the MOBILE state: burger visible, links hidden. The desktop
   media query below flips both. Declare the base rule FIRST — a base rule
   written after its own media query silently wins and the burger shows up on
   a 1440px desktop. */
.gw-nav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--gw-rule-strong);
  border-radius: var(--gw-r-sm);
  color: var(--gw-text);
  cursor: pointer;
}

@media (min-width: 900px) {
  .gw-nav__links { display: flex; }
  .gw-nav__burger { display: none; }
}

/* Mobile menu — full sheet, ink or off-white per theme, big tap targets. */
.gw-nav__menu {
  position: fixed;
  inset: 0;
  z-index: var(--gw-z-overlay);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gw-s-5);
  padding: var(--gw-s-7) var(--gw-gutter);
  background: var(--gw-surface);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--gw-dur-base) var(--gw-ease), transform var(--gw-dur-base) var(--gw-ease);
}
/* Session B, 2026-08-11. THIS LINE IS LFAD-CRITICAL, do not delete it.
   The rule above sets display:flex at (0,1,0), which is the same specificity
   as the user-agent's `[hidden] { display: none }` and comes later, so it
   won. The result: on every viewport under 900px the CLOSED menu stayed in
   the layout at opacity 0, z-index 200, pointer-events auto, covering the
   whole screen. Nothing on the mobile site was tappable, including the
   sticky WhatsApp bar, and its links sat in the tab order. Invisible, so it
   screenshotted perfectly. */
.gw-nav__menu[hidden] { display: none; }

.gw-nav__menu.is-open { opacity: 1; transform: none; }

/* Session F, 2026-08-11: Session C independently found and fixed the same
   defect. Both PRs landed the identical `.gw-nav__menu[hidden]` rule, so the
   merge left it declared twice. C's duplicate was dropped here per the agreed
   resolution; B's copy above is the surviving one and carries the write-up.
   C's measurement on /players at 390px is recorded in PR #3. */
.gw-nav__menu a {
  font-family: var(--gw-font-display);
  font-weight: 800;
  font-size: 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gw-text);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.gw-nav__menu .gw-btn { font-size: 1rem; }
.gw-nav__close {
  position: absolute;
  top: var(--gw-s-4); right: var(--gw-gutter);
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--gw-rule-strong);
  border-radius: var(--gw-r-sm); color: var(--gw-text); cursor: pointer;
}
@media (min-width: 900px) { .gw-nav__menu { display: none; } }

/* ── FOOTER ──────────────────────────────────────────────────────────────*/
.gw-footer {
  padding-block: var(--gw-s-7);
  border-top: 1px solid var(--gw-rule);
  background: var(--gw-surface);
  color: var(--gw-text-muted);
}
.gw-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gw-s-5);
  align-items: flex-start;
}
.gw-footer__logo { height: 22px; width: auto; opacity: 0.75; }
.gw-footer__links {
  display: flex;
  flex-wrap: wrap;
  /* Row gap is 0 because each link now carries its own 44px box (below) and
     stacking gap on top of that opens a hole in the footer on a phone. */
  gap: 0 var(--gw-s-4);
  font-size: var(--gw-t-sm);
}
/* 44px minimum tap target. These were 24px tall, which is under the floor the
   brief sets for every page, and the footer is where the Privacy and Terms
   links live: the two links a reviewer and a regulator will actually try to
   press, on a phone. Measured at 360px on /about, 2026-08-11, Session E. */
.gw-footer__links a {
  color: var(--gw-text-muted);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.gw-footer__links a:hover { color: var(--gw-text); text-decoration: underline; text-underline-offset: 3px; }
.gw-footer__legal {
  font-family: var(--gw-font-data);
  font-size: var(--gw-t-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gw-text-faint);
  margin: 0;
}
@media (min-width: 768px) {
  .gw-footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}