/* ============================================================
   Navbar — Bloomberg-terminal style (sharp, mono, lila accents).
   Loaded after nav-menu.css + style-redesign.css so its overrides win.
   Mirrors the visual language of /ai/detail and the rest of the
   terminal pages.
   ============================================================ */

:root {
  --nav-bg-0: #000000;
  --nav-bg-1: #0a0a0a;
  --nav-bg-2: #1a1a1a;
  --nav-bd: #2a2a3a;
  --nav-fg-0: #ffffff;
  --nav-fg-1: #b3b3b3;
  --nav-fg-2: #6b6b7a;
  --nav-lila: #a78bfa;
  --nav-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Roboto Mono',
              'SFMono-Regular', Menlo, Consolas, monospace;
}

/* Full-width terminal bar — overrides the pill shape from
   style-redesign.css completely. */
.navbar,
.navbar.navbar--scrolled {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 36px !important;
  height: auto !important;
  padding: 0 18px !important;
  background: var(--nav-bg-0) !important;
  border: none !important;
  border-bottom: 1px solid var(--nav-bd) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  align-items: stretch !important;
  z-index: 9999 !important;
}

/* Kill the animated RGB gradient border + any pseudo glow. */
.navbar::before,
.navbar::after,
.navbar.navbar--scrolled::before,
.navbar.navbar--scrolled::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
  animation: none !important;
  opacity: 0 !important;
}

/* Hide the legacy logo + STOCKVISION wordmark entirely. */
.navbar .logo,
.navbar .logo-img,
.logo-img {
  display: none !important;
}

/* Hide the hamburger toggle — flat layout always. */
.navbar .menu-toggle {
  display: none !important;
}

/* Hide any remaining Tools-dropdown chrome (HTML already flattened,
   but kill the CSS in case stale templates ship). */
.navbar .nav-tools,
.navbar .nav-tools-toggle,
.navbar .nav-tools-menu,
.navbar .nav-tools-caret {
  all: unset;
  display: none !important;
}

/* Container — links left, language/CTA right. */
.navbar .nav-container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

/* The link list — flat row, mono, no auto-margin. */
.navbar .nav-links {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  row-gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

/* Push the language toggle (always the last <li>) to the far right.
   Works for both authenticated (Profil → DE/EN) and guest (Anmelden →
   Kostenlos starten → DE/EN) flows because the language item is always
   appended last in the template. */
.navbar .nav-links > li:last-child {
  margin-left: auto !important;
}

/* Reset every link to terminal style — overrides style-redesign.css
   pill shape. */
.navbar .nav-link,
.navbar .nav-links > li > a:not(.btn-primary) {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  font-family: var(--nav-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--nav-fg-1) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.navbar .nav-link::after,
.navbar .nav-links > li > a:not(.btn-primary)::after {
  display: none !important;
  content: none !important;
}

/* Hover — lila accent + subtle bg shade. */
.navbar .nav-link:hover,
.navbar .nav-links > li > a:not(.btn-primary):hover {
  color: var(--nav-fg-0) !important;
  background: var(--nav-bg-1) !important;
  border-bottom-color: var(--nav-lila) !important;
  transform: none !important;
  text-shadow: none !important;
}

/* Active — bright fg, lila underline. */
.navbar .nav-link.is-active,
.navbar .nav-links > li > a.is-active {
  color: var(--nav-lila) !important;
  background: var(--nav-bg-1) !important;
  border-bottom-color: var(--nav-lila) !important;
  text-shadow: none !important;
}

/* Language toggle — same chip style, keep the flag. */
.navbar .nav-link--language {
  gap: 8px !important;
}
.navbar .language-flag {
  width: 18px !important;
  height: 12px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: 1px solid var(--nav-bd) !important;
}

/* "Kostenlos starten" / "Start for free" CTA — keep a clear call-out
   but in terminal style (sharp box, lila outline). */
.navbar .btn-primary.nav-cta,
.navbar a.btn-primary.btn--sm.btn--pill.nav-cta,
.navbar a.nav-cta.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  margin: 4px 0 4px 8px !important;
  font-family: var(--nav-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--nav-lila) !important;
  background: transparent !important;
  border: 1px solid var(--nav-lila) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}
.navbar .btn-primary.nav-cta:hover {
  background: var(--nav-lila) !important;
  color: var(--nav-bg-0) !important;
}

/* Narrow viewports — keep horizontal, tighten spacing. */
@media (max-width: 720px) {
  .navbar,
  .navbar.navbar--scrolled {
    padding: 0 10px !important;
  }
  .navbar .nav-link,
  .navbar .nav-links > li > a:not(.btn-primary) {
    padding: 6px 8px !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
  }
}
@media (max-width: 560px) {
  .navbar .nav-link,
  .navbar .nav-links > li > a:not(.btn-primary) {
    padding: 6px 6px !important;
    font-size: 10px !important;
  }
}