/* ============================================================
   Shared sitewide navigation component
   Used by: every real page on the site
   Markup lives in includes/nav.php, behavior in assets/js/nav.js.
   Relies on the design-token custom properties (--accent, --border,
   --bg-elevated, --text, --text-muted, --text-faint, --shadow,
   --font-display, --font-body, --border-soft) defined in each page's own
   <style>.
   ============================================================ */

.nav-left{ display: flex; align-items: center; gap: 14px; }

/* ---------- Header Sign In button (includes/header-cta.php) ----------
   Added 2026-09-03, added the same day Sign In/Register were removed
   from includes/nav.php's hamburger menu and includes/subheader.php's
   row, per direct user request — a real button (not a text link) in the
   header's top-right corner replaces those as the sitewide way to reach
   login.php. Sits as a flex sibling of .nav-left inside each page's
   `justify-content: space-between` <nav class="nav">, so it's pushed to
   the far right for free. */
.header-signin{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 18px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.header-signin:hover{ background: var(--accent-strong); }
.header-signin:active{ transform: translateY(1px); }

/* Wraps .header-signin alongside an unrelated pre-existing .nav-aside
   (about.php/support.php's "Browse Tournaments") so the two share the
   header's right-hand flex slot as one unit instead of getting spread
   apart by the parent <nav>'s own space-between. */
.nav-right{ display: flex; align-items: center; gap: 16px; }

.wordmark{
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .dot{ color: var(--accent); font-size: 24px; line-height: 0; }

.menu-wrap{ position: relative; }
.menu-trigger{
  width: 38px; height: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.menu-trigger:hover{ border-color: var(--accent); color: var(--accent); }
.menu-trigger[aria-expanded="true"]{ border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.menu-trigger svg{ width: 17px; height: 17px; }
.menu-dropdown{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 60;
}
.menu-wrap.open .menu-dropdown{ opacity: 1; visibility: visible; transform: translateY(0); }
.menu-item{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.menu-item svg{ color: var(--text-faint); flex-shrink: 0; width: 16px; height: 16px; transition: color .12s ease; }
.menu-item:hover{ background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.menu-item:hover svg{ color: var(--accent); }
.menu-divider{ height: 1px; background: var(--border-soft); margin: 5px 2px; }

/* ---------- Site Theme switcher (Light Theme / Dark Theme, in the hamburger menu) ---------- */
.menu-section-label{
  padding: 8px 10px 4px;
  font-family: var(--font-mono, inherit);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
button.menu-item.theme-option{
  width: 100%;
  background: none;
  border: none;
  /* CHANGED 2026-09-03, per direct user request ("Make sure the font and
     sizing of the Light and Dark themes are the same as the other menu
     options"): this used to be `font: inherit`, a shorthand that resets
     EVERY font property (family, size, weight, line-height) to whatever
     the ancestor computes to — not just family. Browsers don't give
     buttons the surrounding font by default, so this was needed to fix
     the family, but as a side effect it also wiped out .menu-item's own
     font-size: 13.5px/font-weight: 600 (a <button> has no special claim
     to those the way `font: inherit` implied), inheriting whatever size/
     weight the ancestor .menu-dropdown happened to compute to instead —
     visibly larger/lighter than the Home/Tournaments/About/Support links
     and Profile/Sign Out. Scoping to just `font-family: inherit` fixes
     the actual problem (buttons not picking up the page's font family)
     without touching size/weight, so .menu-item's 13.5px/600 (declared
     earlier in this file) applies to these buttons exactly like every
     other .menu-item. Verified via Playwright: computed font-size/weight
     on a .theme-option button now matches a sibling .menu-item link
     exactly in both themes. */
  font-family: inherit;
  cursor: pointer;
  justify-content: flex-start;
}
.theme-option-label{ flex: 1; }
.theme-check{
  width: 15px; height: 15px; flex-shrink: 0;
  color: var(--accent);
  opacity: 0;
  transition: opacity .12s ease;
}
.theme-option[aria-checked="true"] .theme-check{ opacity: 1; }
.theme-option.is-active{ color: var(--text); }

/* ---------- Signed-in account avatar + dropdown (includes/user-menu.php) ---------- */
.user-avatar-trigger{
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--accent);
}
.user-avatar-trigger:hover{
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.user-avatar-trigger[aria-expanded="true"]{
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.user-avatar-initials{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1;
}
/* This menu sits on the right edge of the header, so its dropdown should
   hang from the right side of the trigger instead of the left (the default
   the left-side hamburger menu uses), or it would overflow off-screen.
   Scoped with the extra .user-menu-wrap ancestor (not just the bare
   .user-menu-dropdown class) so this always wins over the base
   .menu-dropdown{ left:0 } rule regardless of stylesheet order. */
.user-menu-wrap .user-menu-dropdown{ left: auto; right: 0; }

/* ---------- Secondary header row (includes/subheader.php) ----------
   Tournaments / About / Support / Profile (signed in only) — plain links,
   no dropdown or JS component of its own. Originally index.php-only
   inline CSS (added 2026-09-03), moved here the same day when the row was
   extracted into includes/subheader.php for use on every page. REORDERED
   and simplified later the same day, per direct user request, dropping
   what used to be a Theme dropdown here (Site Theme still lives in the
   hamburger menu — see includes/nav.php) and the Sign In/Register/Sign
   Out links this row used to carry — see includes/subheader.php's own
   docblock for the full history. Independent from, and sits below, the
   includes/nav.php hamburger header above. */
.subheader{
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-soft);
}
.subheader-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  row-gap: 10px;
  flex-wrap: wrap;
  padding: 13px clamp(20px, 5vw, 56px);
}
.subheader-inner a{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.subheader-inner a:hover{ color: var(--text); }