/* Shared APEX header controls. Loaded after each page's own styles. */
.apex-navigation-header {
  --nav-bg: var(--t-navy, var(--panel, #09182a));
  --nav-hover: var(--t-panel-2, var(--raised, #10243a));
  --nav-text: var(--t-text, var(--text, #e9f0f6));
  --nav-border: var(--t-line-strong, var(--line, #34485c));
  --nav-accent: var(--t-gold, var(--gold, #d4b777));
  --nav-focus: var(--t-blue, var(--focus, #61c4f5));
}
.apex-navigation-header :is(nav a, .topbar-actions > a, .profile-link, .profile, .topbar-button, #theme, select),
.apex-navigation-header > a:not(:is(.brand, .terminal-brand, .academy-brand)) {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; flex-shrink: 0; width: auto; height: auto;
  min-height: 44px; margin: 0; padding: 10px 14px;
  border: 1px solid var(--nav-border); border-radius: 6px;
  background: var(--nav-bg); color: var(--nav-text);
  font: 500 12px/1.4 "Inter", "Segoe UI", Arial, sans-serif;
  letter-spacing: .01em; text-decoration: none; text-align: center;
  white-space: nowrap; cursor: pointer; touch-action: manipulation;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.apex-navigation-header :is(nav a, .topbar-actions > a, .profile-link, .profile, .topbar-button, #theme, select):hover,
.apex-navigation-header > a:not(:is(.brand, .terminal-brand, .academy-brand)):hover {
  background: var(--nav-hover); border-color: var(--nav-accent); color: var(--nav-text);
}
.apex-navigation-header :is(a, button, select):focus-visible {
  outline: 2px solid var(--nav-focus); outline-offset: 3px;
}
.apex-navigation-header :is(nav a, .topbar-actions > a):active { background: var(--nav-hover); }
.apex-navigation-header nav a:is([aria-current="page"], .current) {
  border-color: var(--nav-accent); color: var(--nav-accent); background: var(--nav-hover);
}
.apex-navigation-header #logout-button:hover { border-color: var(--t-red, #ff8790); color: var(--t-red, #ff8790); }
.apex-navigation-header:not(.site-header) { gap: 12px; }
.apex-navigation-header :is(.terminal-product-nav, .hub-settings, .topbar-actions),
.apex-navigation-header:not(.site-header) > nav { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.apex-navigation-header .language-label { margin: 0; }
.apex-navigation-header select { display: block; max-width: 100%; }
.apex-navigation-header .profile { min-width: 44px; }
@media (max-width: 1100px) {
  .apex-navigation-header:not(.site-header) { height: auto; min-height: 66px; flex-wrap: wrap; padding: 12px 16px; }
  .apex-navigation-header:not(.site-header) > nav { order: 10; flex-basis: 100%; }
  .apex-navigation-header :is(.topbar-actions, .hub-settings) { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .apex-navigation-header:not(.site-header) { position: relative; gap: 8px; }
  .apex-navigation-header:not(.site-header) :is(.terminal-brand, .academy-brand) { min-width: 0; }
  .apex-navigation-header .learning-label { display: none; }
  .apex-navigation-header:not(.site-header) > nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apex-navigation-header nav a { white-space: normal; min-width: 0; }
  .apex-navigation-header .topbar-actions { margin-inline-start: 0; flex-basis: 100%; }
  .apex-navigation-header .profile { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .apex-navigation-header :is(a, button, select) { transition: none; }
}