/* ============================================================
   NeuAnalytics 2026, Navigation Styles
   Brand Guide v3.0, Section 21 Gradient Accent Line
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--space-4) 0;
  transition: padding var(--transition-base), background-color var(--transition-base);
  border-radius: 0;
  border: none;
  border-bottom: none;
}

/* Gradient Accent Line, Brand Guide Section 21, Application 1 */
.nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(4, 152, 254, 0.30) 15%,
    rgba(4, 152, 254, 1.00) 35%,
    rgba(4, 152, 254, 1.00) 65%,
    rgba(4, 152, 254, 0.30) 85%,
    transparent 100%);
  pointer-events: none;
}

.nav--scrolled {
  padding: var(--space-2) 0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

/* Logo, dark/light mode switching per Brand Guide Section 04 */
.nav__logo {
  flex-shrink: 0;
}

.nav__logo-img {
  height: 30px;
  width: auto;
  transition: height var(--transition-base);
}

.nav--scrolled .nav__logo-img {
  height: 26px;
}

/* Dark mode: show white logo, hide color logo */
.nav__logo-img--light {
  display: none;
}

.nav__logo-img--dark {
  display: block;
}

/* Light mode: nav stays dark, logo stays white, no override needed */

/* Desktop Links, display show/hide is controlled by responsive.css breakpoints.
   Do NOT add display:flex here; it would load after responsive.css and override
   the mobile display:none rule (CSS cascade / load order). */
.nav__links {
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  margin: 0;
}

/* Nav links, enhanced with hover underline per Brand Guide Section 21, Application 2 */
.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  letter-spacing: 0.01em;
}

/* Hover underline, 2px Neu Blue, fade in */
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  background-color: var(--neu-blue);
  border-radius: 1px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--white);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Active nav link */
.nav__link.is-active {
  color: var(--white);
}

.nav__link.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav__chevron {
  transition: transform var(--transition-fast);
}

.nav__dropdown.is-open .nav__chevron,
.nav__dropdown:hover .nav__chevron {
  transform: rotate(180deg);
}

/* Dropdown */
.nav__dropdown {
  position: relative;
}

.nav__dropdown-menu {
  position: absolute;
  /* Clear the nav's bottom padding + the 2px gradient accent line under the nav,
     plus a small visual gap so the dropdown reads as below the line, not on it. */
  top: calc(100% + var(--space-4) + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  padding: var(--space-2);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  border-radius: var(--border-radius-md);
  background: rgba(11, 26, 46, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav__dropdown.is-open .nav__dropdown-menu,
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
}

/* Dropdown hover bridge, prevents gap between trigger and menu.
   Bridge height must equal the gap above, so the hover never breaks
   when the cursor moves from the trigger down to the menu. */
.nav__dropdown-menu::before {
  content: '';
  position: absolute;
  top: calc(-1 * (var(--space-4) + 8px));
  left: 0;
  right: 0;
  height: calc(var(--space-4) + 8px);
}

.nav__dropdown-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.nav__dropdown-link:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05);
  padding-left: calc(var(--space-4) + 4px);
}

.nav__dropdown-label {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.nav__dropdown-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

/* Actions (right side) */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.nav__cta {
  display: none;
}

@media (min-width: 1024px) {
  .nav__cta {
    display: inline-flex;
  }
}

/* Dark Mode Toggle */
.dark-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  /* Nav is always dark, pin to white regardless of theme */
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--border-radius-sm);
  color: #ffffff;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dark-mode-toggle:hover {
  color: var(--neu-blue);
  border-color: var(--neu-blue);
  background-color: rgba(4, 152, 254, 0.08);
}

/* Language Selector */
.language-selector {
  position: relative;
}

.language-selector__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: none;
  border: 1px solid var(--border-default);
  border-radius: var(--border-radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  transition: all var(--transition-fast);
}

.language-selector__trigger:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.language-selector__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 140px;
  padding: var(--space-2);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  border-radius: var(--border-radius-md);
}

.language-selector.is-open .language-selector__menu {
  opacity: 1;
  visibility: visible;
}

.language-selector__menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.language-selector__menu a:hover,
.language-selector__menu a.is-active {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05);
}

/* Hamburger */
.nav__hamburger {
  /* display controlled by responsive.css, do NOT set here (load-order override) */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav__hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  /* Nav is always dark, pin to white regardless of theme */
  background-color: #ffffff;
  border-radius: 1px;
  transition: all var(--transition-fast);
}

/* Mobile Menu */
.nav__mobile-close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  background: none;
  border: none;
  /* Mobile menu background is always near-black, pin to white regardless of theme */
  color: #ffffff;
  cursor: pointer;
  padding: var(--space-2);
}

.nav__mobile-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__mobile-link {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  /* Always white, menu background is near-black in both themes */
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nav__mobile-sublinks {
  list-style: none;
  padding: 0 0 var(--space-3) var(--space-4);
}

.nav__mobile-sublink {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  /* Muted white, readable on near-black in both themes */
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
}

.nav__mobile-cta {
  margin-top: var(--space-10);
}

/* ============================================================
   Light theme nav adjustments
   Nav intentionally stays dark in light mode, brand decision.
   Pin text to white so --text-primary (dark in light mode) doesn't bleed in.
   ============================================================ */
[data-theme="light"] .nav__link,
[data-theme="light"] .nav__link:hover,
[data-theme="light"] .nav__link:focus-visible,
[data-theme="light"] .nav__link.is-active {
  color: var(--white);
}

[data-theme="light"] .nav__chevron {
  color: var(--white);
}

[data-theme="light"] .dark-mode-toggle:hover {
  background-color: rgba(4, 152, 254, 0.10);
}

/* ============================================================
   Dropdown section divider + section label (By Industry, etc.)
   ============================================================ */
.nav__dropdown-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.08);
  margin: var(--space-2) var(--space-4);
  list-style: none;
}

.nav__dropdown-section {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  cursor: default;
  user-select: none;
}


/* ============================================================
   Mega Menu, Solutions dropdown
   ============================================================ */

/* Override single-column defaults from .nav__dropdown-menu */
.nav__mega {
  left: 0;
  transform: none;
  min-width: unset;
  width: 760px;
  max-width: calc(100vw - 2rem);
  padding: 0;
  background: rgba(11, 26, 46, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.mega__body {
  display: flex;
  align-items: flex-start;
  padding: 1.25rem 1rem;
}

.mega__section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0498FE;
  margin-bottom: 0.875rem;
  padding: 0 0.5rem;
}

/* Left column, solution capability cards */
.mega__col--solutions {
  width: 42%;
  flex-shrink: 0;
}

.mega__solution-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.625rem 0.5rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s;
  margin-bottom: 0.15rem;
}

.mega__solution-card:hover,
.mega__solution-card:focus-visible {
  background: rgba(4, 152, 254, 0.08);
  outline: none;
}

.mega__solution-icon {
  width: 34px;
  height: 34px;
  background: rgba(4, 152, 254, 0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #0498FE;
}

.mega__solution-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

.mega__solution-desc {
  display: block;
  font-size: 0.72rem;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* Vertical divider */
.mega__divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 1rem;
  align-self: stretch;
  flex-shrink: 0;
}

/* Right column, industry grid */
.mega__col--industries {
  flex: 1;
}

.mega__industry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1rem 0.5rem;
}

.mega__industry-link {
  display: block;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s;
}

.mega__industry-link:hover,
.mega__industry-link:focus-visible {
  background: rgba(4, 152, 254, 0.08);
  outline: none;
}

.mega__industry-name {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.mega__industry-desc {
  display: block;
  font-size: 0.68rem;
  color: var(--text-tertiary);
  line-height: 1.3;
  margin-top: 0.1rem;
}

/* ============================================================
   Light mode dropdown overrides
   All dropdown panels (regular + mega) have a hard-coded dark navy
   background (rgba(11,26,46,0.97)) in both themes, text must stay
   white. The variables --text-primary/secondary/tertiary flip to dark
   colors in light mode, so we pin everything explicitly here.
   ============================================================ */

/* Regular dropdown (e.g. Platform) */
[data-theme="light"] .nav__dropdown-link {
  color: rgba(255, 255, 255, 0.75);
}

[data-theme="light"] .nav__dropdown-link:hover {
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .nav__dropdown-label {
  color: var(--white);
}

[data-theme="light"] .nav__dropdown-desc {
  color: rgba(255, 255, 255, 0.55);
}

[data-theme="light"] .nav__dropdown-section {
  color: rgba(255, 255, 255, 0.40);
}

/* Mega menu */
[data-theme="light"] .mega__solution-name,
[data-theme="light"] .mega__industry-name {
  color: var(--white);
}

[data-theme="light"] .mega__solution-desc,
[data-theme="light"] .mega__industry-desc {
  color: rgba(255, 255, 255, 0.60);
}

[data-theme="light"] .mega__divider {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .mega__solution-card:hover,
[data-theme="light"] .mega__solution-card:focus-visible,
[data-theme="light"] .mega__industry-link:hover,
[data-theme="light"] .mega__industry-link:focus-visible {
  background: rgba(4, 152, 254, 0.08);
}

/* Mobile, mega panel hidden; mobile drawer handles navigation */
@media (max-width: 1023px) {
  .nav__mega {
    display: none !important;
  }
}

/* Condensed desktop (1024–1200px), clamp mega width to viewport
   and prevent right-edge overflow when viewport is close to 1024px */
@media (min-width: 1024px) and (max-width: 1200px) {
  .nav__mega {
    max-width: calc(100vw - var(--space-6) * 2);
    /* If mega would overflow right edge, pull it back */
    right: auto;
    left: 0;
  }
}