/* NEXTZHEN Navbar */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.navbar-shell {
  position: relative;
}

.navbar-shell.is-open .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.navbar {
  background-color: #001750;
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(100%, 1800px);
  min-height: 89px;
  margin: 0 auto;
  padding: 0 24px;
}

.navbar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.navbar__logo-image {
  width: 142px;
  height: auto;
  aspect-ratio: 142 / 39;
}

.navbar__nav-group {
  position: relative;
  display: none;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

.navbar-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-width: 0;
}

.navbar-menu__item {
  position: relative;
  flex: 0 0 auto;
}

.navbar-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 24px 12px;
  color: #ececec;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  transition: color var(--nav-motion-duration, 0.2s) var(--nav-motion-ease, ease);
}

.navbar-menu__trigger:hover,
.navbar-menu__trigger:focus-visible,
.navbar-menu__item.is-active .navbar-menu__trigger {
  color: #ffffff;
  outline: none;
}

/* ── Lang switcher — navbar (desktop) ──────────────────────── */

.navbar__lang {
  display: none;        /* shown at ≥1080px via media query below */
  position: relative;
  flex-shrink: 0;
  align-self: center;
}

/* Pill trigger — matches Figma: border, 50px radius, Montserrat 19px */
.navbar__lang-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid #ececec;
  border-radius: 50px;
  background: transparent;
  color: #ececec;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.navbar__lang-trigger:hover,
.navbar__lang-trigger:focus-visible {
  color: #ffffff;
  border-color: #ffffff;
  outline: none;
}

/* Chevron */
.navbar__lang-chevron {
  width: 9px;
  height: 6px;
  flex-shrink: 0;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.navbar__lang.is-open .navbar__lang-chevron {
  transform: rotate(180deg);
}

/* Dropdown panel */
.navbar__lang-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1100;
  min-width: 100%;
  padding: 6px;
  margin: 0;
  list-style: none;
  background: #ffffff;
  border-radius: 14px;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.13);
}

.navbar__lang.is-open .navbar__lang-panel {
  display: block;
  animation: lang-panel-reveal 190ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes lang-panel-reveal {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Option link */
.navbar__lang-option {
  display: block;
  padding: 8px 16px;
  border-radius: 8px;
  color: #1d1d1d;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.navbar__lang-option:hover,
.navbar__lang-option:focus-visible {
  background-color: #f3f4f6;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .navbar__lang-chevron {
    transition: none;
  }

  .navbar__lang.is-open .navbar__lang-panel {
    animation: none;
  }
}

.navbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  color: #ececec;
}

.navbar__toggle-icon,
.navbar__toggle-icon::before,
.navbar__toggle-icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  border-radius: 999px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.navbar__toggle-icon {
  position: relative;
}

.navbar__toggle-icon::before,
.navbar__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.navbar__toggle-icon::before {
  top: -7px;
}

.navbar__toggle-icon::after {
  top: 7px;
}

.site-header.is-mobile-nav-open .navbar__toggle-icon {
  background-color: transparent;
}

.site-header.is-mobile-nav-open .navbar__toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header.is-mobile-nav-open .navbar__toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: -1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mega-menu__panel {
  position: relative;
  min-height: 273px;
  background-color: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(2px);
}

.mega-menu__layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: min(100%, 1800px);
  min-height: 273px;
  margin: 0 auto;
  padding: 36px 24px 40px;
}

.mega-menu__logo-spacer {
  flex: 0 0 var(--nav-logo-track, 142px);
  width: var(--nav-logo-track, 142px);
}

.mega-menu__balance-spacer {
  flex: 0 0 var(--nav-balance-track, 92px);
  width: var(--nav-balance-track, 92px);
}

.mega-menu__columns {
  display: grid;
  grid-template-columns: var(
    --nav-grid-columns,
    172px 197px 237px 99px 147px
  );
  flex: 0 1 auto;
  gap: var(--nav-col-gap, 32px);
  min-width: 0;
}

.mega-menu__column {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  text-align: center;
}

.mega-menu__column:nth-child(3) .mega-menu__link {
  line-height: 1.45;
  padding-block: 8px;
}

.mega-menu__link {
  display: block;
  padding: 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.mega-menu__column:nth-child(-n + 2) .mega-menu__link {
  white-space: nowrap;
}

.mega-menu__link:hover,
.mega-menu__link:focus-visible {
  color: #ffffff;
  outline: none;
}

.mobile-menu {
  position: fixed;
  inset: 89px 0 0 0;
  z-index: 900;
  display: none;
  overflow: hidden;
  background-color: rgba(0, 23, 80, 0.98);
  pointer-events: none;
}

.site-header.is-mobile-nav-open .mobile-menu {
  pointer-events: auto;
}

.mobile-menu__panel {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 20px 40px;
}

.mobile-menu__group + .mobile-menu__group {
  border-top: 1px solid rgba(236, 236, 236, 0.16);
}

.mobile-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  color: #ececec;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}

.mobile-menu__trigger-icon {
  width: 12px;
  height: 12px;
  position: relative;
  flex-shrink: 0;
}

.mobile-menu__trigger-icon::before,
.mobile-menu__trigger-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background-color: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-menu__trigger-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.mobile-menu__group.is-open .mobile-menu__trigger-icon::after {
  opacity: 0;
}

.mobile-menu__submenu {
  display: none;
  padding: 0 0 12px 12px;
}

.mobile-menu__group.is-open .mobile-menu__submenu {
  display: block;
}

.mobile-menu__link {
  display: block;
  padding: 12px 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.5;
}

.mobile-menu__link:hover,
.mobile-menu__link:focus-visible {
  color: #ffffff;
  outline: none;
}

/* Lang switcher — mobile menu (bottom) */

.mobile-menu__lang {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 24px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 8px;
}

.mobile-menu__lang-item {
  color: rgba(255, 255, 255, 0.45);
  font-family: "Inter", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

a.mobile-menu__lang-item:hover,
a.mobile-menu__lang-item:focus-visible {
  color: rgba(255, 255, 255, 0.85);
  outline: none;
}

.mobile-menu__lang-item--active {
  color: #ffffff;
  cursor: default;
}

.mobile-menu__lang-sep {
  display: block;
  width: 1px;
  height: 16px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

@media (min-width: 1080px) {
  .navbar-shell {
    --nav-logo-track: 142px;
    --nav-balance-track: 92px;
    --nav-shell-gap: 24px;
    --nav-col-gap: 32px;
    --nav-col-1: 172px;
    --nav-col-2: 197px;
    --nav-col-3: 237px;
    --nav-col-3-compact: 150px;
    --nav-col-4: 99px;
    --nav-col-5: 147px;
    --nav-grid-columns: var(--nav-col-1) var(--nav-col-2) var(--nav-col-3) var(--nav-col-4) var(--nav-col-5);
    --nav-grid-columns-closed: var(--nav-col-1) var(--nav-col-2) var(--nav-col-3-compact) var(--nav-col-4) var(--nav-col-5);
    --nav-motion-duration: 220ms;
    --nav-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  .navbar__inner {
    gap: var(--nav-shell-gap);
  }

  .mega-menu__layout {
    gap: var(--nav-shell-gap);
  }

  .navbar__lang {
    display: block;
  }

  .navbar__nav-group {
    display: flex;
  }

  .navbar__toggle {
    display: none;
  }

  .mobile-menu {
    display: none !important;
  }

  .navbar-menu {
    display: grid;
    grid-template-columns: var(--nav-grid-columns-closed);
    gap: var(--nav-col-gap);
    justify-items: stretch;
    align-items: center;
    transition: grid-template-columns var(--nav-motion-duration) var(--nav-motion-ease);
  }

  .navbar-menu__item {
    min-width: 0;
  }

  .navbar-menu__trigger {
    min-width: 0;
  }

  .navbar-shell.is-open .navbar-menu {
    grid-template-columns: var(--nav-grid-columns);
  }

  @media (prefers-reduced-motion: reduce) {
    .navbar-menu,
    .mega-menu {
      transition: none;
    }
  }
}

@media (max-width: 1399px) and (min-width: 1080px) {
  .navbar-shell {
    --nav-balance-track: 84px;
    --nav-col-gap: 20px;
    --nav-col-1: 132px;
    --nav-col-2: 150px;
    --nav-col-3: 200px;
    --nav-col-3-compact: 118px;
    --nav-col-4: 72px;
    --nav-col-5: 108px;
  }

  .navbar-menu__trigger {
    padding-inline: 8px;
    font-size: 16px;
  }

  .mega-menu__layout {
    padding-inline: 24px;
  }

  .mega-menu__link {
    font-size: 14px;
    line-height: 34px;
  }
}

@media (max-width: 1079px) {
  .mega-menu {
    display: none;
  }

  .navbar__inner {
    min-height: 72px;
    padding-inline: 16px;
  }

  .navbar__logo-image {
    width: 118px;
  }

  .mobile-menu {
    display: block;
    inset: 72px 0 0 0;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .site-header.is-mobile-nav-open .mobile-menu {
    transform: translateX(0);
  }
}

@media (max-width: 767px) {
  .navbar__inner {
    min-height: 64px;
  }

  .mobile-menu {
    inset: 64px 0 0 0;
  }
}