/* ── LEFT NAV ────────────────────────────────────────────────── */
.nav-col {
  grid-column: 1;
  grid-row: 2;
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  position: relative;
}

#navigation { padding-top: 6px; }

#navigation ul {
  list-style: none;
  background: transparent;
}

/* Top-level items */
#navigation > ul > li {
  position: relative;
  border-bottom: 1px solid var(--nav-border);
}

#navigation ul li a {
  display: block;
  padding: 8px 10px 8px 14px;
  color: var(--nav-text);
  text-decoration: none;
  font-family: 'Trebuchet MS', 'Arial Narrow', Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-left: 3px solid transparent;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

#navigation ul li a:hover {
  color: var(--gold-hi);
  background: var(--gold-tint);
  border-left-color: var(--gold);
}

/* Flyout submenus */
#navigation ul ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 158px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold);
  z-index: 200;
  padding: 4px 0;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.35);
}

#navigation ul li:hover > ul { display: block; }

#navigation ul ul li {
  border-bottom: none;
  width: 158px;
  position: relative;
}

#navigation ul ul li a {
  font-size: 10px;
  font-weight: 600;
  padding: 6px 12px;
  text-transform: none;
  color: var(--text);
  letter-spacing: 0.02em;
  border-left: 3px solid transparent;
}

#navigation ul ul li a:hover {
  color: var(--gold-hi);
  background: var(--gold-tint);
  border-left-color: var(--gold);
}

/* Third-level */
#navigation ul ul ul {
  left: 100%;
  top: 0;
}

/* Non-link sub-labels (e.g. "Classic", "Barrage") — not clickable themselves, but each
   hosts its own flyout, so they need hover feedback or there's no visual way to tell
   which one's flyout is currently showing as the mouse moves down the list. */
#navigation ul ul li span.sub-label {
  display: block;
  padding: 5px 12px 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: default;
  border-left: 3px solid transparent;
}

#navigation ul ul li:hover > span.sub-label {
  color: var(--gold-hi);
  background: var(--gold-tint);
  border-left-color: var(--gold);
}