/* =========================================================
   Neuxor.net header polish
   Purpose: keep the current online baseline stable, but make the
   new wide logo feel integrated and less like a pasted banner.
   Loaded after app.bundle.css and mobile overrides.
   ========================================================= */

:root {
  --neuxor-header-bg-1: #05070d;
  --neuxor-header-bg-2: #080b14;
  --neuxor-header-line: rgba(105, 170, 255, 0.18);
}

.site-header {
  background:
    radial-gradient(circle at 16% 0%, rgba(55, 142, 255, 0.12), transparent 30%),
    radial-gradient(circle at 78% 0%, rgba(174, 72, 255, 0.10), transparent 32%),
    linear-gradient(180deg, var(--neuxor-header-bg-2) 0%, var(--neuxor-header-bg-1) 100%) !important;
  border-bottom: 1px solid var(--neuxor-header-line) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.38),
    inset 0 -1px 0 rgba(255, 255, 255, 0.025) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.site-header::before {
  opacity: 0.55 !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(77, 163, 255, 0.36) 30%,
    rgba(255, 79, 216, 0.28) 64%,
    transparent 100%
  ) !important;
}

.header-inner {
  min-height: 92px !important;
  padding: 10px 22px !important;
  gap: 22px !important;
}

.brand {
  align-self: center !important;
  max-width: min(440px, 38vw) !important;
  overflow: hidden !important;
}

.brand::after {
  display: none !important;
}

.brand img {
  height: clamp(58px, 5.2vw, 74px) !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter:
    drop-shadow(0 0 8px rgba(77, 163, 255, 0.20))
    drop-shadow(0 0 14px rgba(155, 88, 255, 0.10)) !important;
}

.brand:hover img {
  transform: translateY(-1px) scale(1.01) !important;
  filter:
    drop-shadow(0 0 10px rgba(77, 163, 255, 0.28))
    drop-shadow(0 0 18px rgba(155, 88, 255, 0.15)) !important;
}

.nav-wrap {
  gap: 12px !important;
}

.nav {
  padding: 6px !important;
  gap: 4px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)) !important;
  border: 1px solid rgba(170, 190, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 14px 34px rgba(0, 0, 0, 0.28) !important;
}

.nav a,
.nav .nav-item,
.nav .nav-link-btn,
.nav .nav-logout-btn {
  min-height: 40px !important;
  padding: 9px 14px !important;
  color: rgba(239, 243, 255, 0.74) !important;
}

.nav a:hover,
.nav .nav-item:hover,
.nav .nav-link-btn:hover,
.nav .nav-logout-btn:hover,
.nav a.is-active,
.nav .nav-item.is-active,
.nav .nav-link-btn.is-active,
.nav .nav-logout-btn.is-active {
  color: #ffffff !important;
  background: rgba(100, 145, 255, 0.12) !important;
}

.lang-dropdown {
  padding: 7px 10px !important;
  border-color: rgba(170, 190, 255, 0.10) !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.header-fade {
  height: 12px !important;
  background: linear-gradient(to bottom, rgba(5, 7, 13, 0.72), rgba(5, 7, 13, 0)) !important;
}

.landing-page {
  padding-top: 26px !important;
}

.hero-shell {
  border-radius: 28px !important;
}

@media screen and (max-width: 1200px) and (min-width: 1025px) {
  .header-inner {
    min-height: 84px !important;
  }

  .brand {
    max-width: min(390px, 34vw) !important;
  }

  .brand img {
    height: 62px !important;
  }

  .nav a,
  .nav .nav-item,
  .nav .nav-link-btn,
  .nav .nav-logout-btn {
    padding-inline: 11px !important;
  }
}

@media screen and (max-width: 1024px) {
  .header-inner {
    min-height: 74px !important;
    padding: 9px 14px !important;
  }

  .brand {
    max-width: calc(100vw - 82px) !important;
  }

  .brand img {
    height: clamp(42px, 8vw, 56px) !important;
  }

  .nav-wrap {
    background:
      radial-gradient(circle at top right, rgba(95, 155, 255, 0.16), transparent 28%),
      radial-gradient(circle at bottom left, rgba(177, 80, 255, 0.14), transparent 32%),
      linear-gradient(180deg, rgba(7, 9, 17, 0.99), rgba(4, 6, 12, 0.99)) !important;
  }

  .landing-page {
    padding-top: 20px !important;
  }
}

@media screen and (max-width: 640px) {
  .header-inner {
    min-height: 66px !important;
    padding-inline: 12px !important;
  }

  .brand img {
    height: clamp(38px, 10vw, 46px) !important;
  }

  .header-fade {
    height: 8px !important;
  }
}