/* ============================================================
   NAVBAR
   ============================================================ */
header.site-nav,
nav.site-nav {
  position: relative; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
}

nav.site-nav.nav-stuck {
  position: fixed; left: 0; right: 0;
  box-shadow: 0 8px 30px rgba(20, 12, 40, .14);
}

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  max-width: var(--container); margin: 0 auto;
}

.logo {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700; letter-spacing: -.02em;
}

.nav-logo { height: 44px; width: auto; display: block; }

.nav-links {
  display: flex; align-items: center; gap: 34px;
  font-size: 14.5px; font-weight: 500;
}

.nav-links a { color: var(--black); opacity: .8; transition: opacity .2s; position: relative; }
.nav-links a:hover { opacity: 1; }

.nav-cta { display: flex; align-items: center; gap: 18px; }

.burger { display: none; width: 22px; height: 16px; position: relative; }
.burger span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--black); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 7px; }
.burger span:nth-child(3) { top: 14px; }

.nav-active { opacity: 1 !important; color: var(--purple-deep) !important; }

/* Bootstrap navbar overrides */
nav.site-nav.navbar {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
}

nav.site-nav .nav-inner {
  padding: 18px 32px;
  max-width: var(--container);
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}

.collapse:not(.show) { display: none; }
.collapse.show { display: block; }
.collapsing { height: 0; overflow: hidden; transition: height .35s ease; }

@media (min-width: 992px) {
  nav.site-nav .navbar-collapse.collapse { display: flex !important; flex-basis: auto; align-items: center; }
  nav.site-nav .navbar-toggler { display: none !important; }
}
@media (max-width: 991px) {
  .collapse.show { display: block; }
}

.site-nav .navbar-brand.logo { font-size: 21px; }
.site-nav .navbar-nav.nav-links { gap: 34px; margin-left: auto; }
.site-nav .nav-cta { margin-left: 32px; }
.site-nav .nav-link {
  color: var(--black) !important; opacity: .8;
  font-size: 14.5px; font-weight: 500;
  padding: 0 !important; position: relative;
  transition: opacity .2s; background: none !important;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus { opacity: 1; color: var(--black) !important; }
.site-nav .nav-link.nav-active { opacity: 1 !important; color: var(--purple-deep) !important; }
.site-nav .nav-link.dropdown-toggle::after { display: none; }
.site-nav .nav-link.dropdown-toggle .caret { margin-left: 4px; }
.site-nav .navbar-toggler:focus { box-shadow: none; }
.site-nav .navbar-toggler .burger span { background: var(--black); }

/* Dropdown menu */
.dropdown-menu.nav-dropdown-menu {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 20px 60px -20px rgba(10, 9, 16, .18), 0 0 0 1px rgba(0, 0, 0, .04);
  margin-top: 8px !important;
}
.dropdown-menu.nav-dropdown-menu.show { opacity: 1; pointer-events: auto; }

@media (min-width: 992px) {
  .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; pointer-events: auto; }
  .nav-dropdown:hover .nav-dropdown-trigger { opacity: 1; }
  .nav-dropdown:hover .nav-dropdown-trigger svg { transform: rotate(180deg); }
}

.dropdown-menu.nav-dropdown-menu .dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; color: var(--black);
  transition: background .18s ease;
}
.dropdown-menu.nav-dropdown-menu .dropdown-item:hover,
.dropdown-menu.nav-dropdown-menu .dropdown-item:focus,
.dropdown-menu.nav-dropdown-menu .dropdown-item:active {
  background: var(--purple-tint); color: var(--purple-deep);
}

@media (max-width: 991px) {
  nav.site-nav .nav-inner { flex-wrap: wrap; }
  .site-nav .navbar-toggler .burger { display: block; }
  .site-nav .navbar-collapse {
    flex-basis: 100%; width: 100%;
    background: #fff; border-top: 1px solid var(--line);
    margin: 12px -32px 0; padding: 16px 32px;
  }
  .site-nav .navbar-collapse.collapse:not(.show) { display: none !important; }
  .site-nav .navbar-collapse.collapse.show { display: block !important; }
  .site-nav .navbar-nav.nav-links {
    gap: 16px; align-items: flex-start !important;
    margin-left: 0; flex-direction: column; width: 100%;
  }
  .site-nav .nav-item { width: 100%; }
  .site-nav .nav-cta { margin-left: 0; margin-top: 16px; width: 100%; }
  .site-nav .nav-cta .btn { width: 100%; justify-content: center; }
  .site-nav .nav-link { padding: 6px 0 !important; }
  .dropdown-menu.nav-dropdown-menu {
    position: static !important; transform: none !important;
    top: auto !important; left: auto !important; width: 100%;
    box-shadow: none; border: 1px solid var(--line);
    opacity: 1; pointer-events: auto; display: none;
    margin-top: 8px !important;
    max-height: 55vh; overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--purple-tint-2) transparent;
  }
  .dropdown-menu.nav-dropdown-menu.show {
    display: flex; flex-direction: column;
  }
  .dropdown-menu.nav-dropdown-menu > li { flex: 1 1 100%; }
}