/* Keep only the existing live navigation at the top while scrolling. */
:root {
  --dart-sticky-nav-layer: 100;
  --dart-sticky-nav-top: 0;
  --dart-sticky-nav-mobile-height: 4rem;
  --dart-nav-max-width: 96rem;
  --dart-nav-side-padding: clamp(0.75rem, 2vw, 2rem);
  --dart-nav-item-gap: 0.125rem;
  --dart-nav-link-padding-block: 0.75rem;
  --dart-nav-link-padding-inline: clamp(0.375rem, 1vw, 1rem);
  --dart-nav-font-size: clamp(0.8125rem, 0.75rem + 0.15vw, 0.9375rem);
  --dart-nav-arrow-gap: 0.25rem;
  --dart-mobile-link-padding: 0.625rem 1rem;
  --dart-mobile-link-font-size: 0.95rem;
}
body {
  height: auto;
  min-height: 100%;
}
.dart-sticky-navigation {
  position: sticky;
  top: var(--dart-sticky-nav-top);
  z-index: var(--dart-sticky-nav-layer);
  background: var(--secondary);
}
.dart-sticky-navigation .mobile-nav {
  min-height: var(--dart-sticky-nav-mobile-height);
}
.dart-sticky-navigation .mobile-menu-toggle {
  top: var(--dart-sticky-nav-top);
}
.dart-sticky-navigation .mobile-menu-toggle span {
  background: var(--light-text-color);
}
.dart-sticky-navigation .mobile-nav-list.show {
  max-height: calc(100dvh - var(--dart-sticky-nav-mobile-height));
  overflow-y: auto;
}

/* Keep the full desktop menu on one row with comfortable side padding. */
@media (min-width: 960px) {
  .dart-sticky-navigation .desktop-nav {
    display: block;
    padding-inline: var(--dart-nav-side-padding);
  }
  .dart-sticky-navigation .mobile-nav {
    display: none;
  }
  .dart-sticky-navigation .main-nav-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    position: static;
    width: 100%;
    max-width: var(--dart-nav-max-width);
    max-height: none;
    margin-inline: auto;
    padding: 0;
    gap: var(--dart-nav-item-gap);
    overflow: visible;
  }
  .dart-sticky-navigation .main-nav-list > li > a {
    padding: var(--dart-nav-link-padding-block) var(--dart-nav-link-padding-inline);
    font-size: var(--dart-nav-font-size);
    white-space: nowrap;
  }
  .dart-sticky-navigation .dropdown-arrow {
    margin-left: var(--dart-nav-arrow-gap);
  }
}

/* Use the mobile menu before the desktop links become cramped. */
@media (max-width: 959px) {
  .dart-sticky-navigation .desktop-nav {
    display: none;
  }
  .dart-sticky-navigation .mobile-nav {
    display: block;
    position: relative;
  }
  .dart-sticky-navigation .mobile-menu-toggle {
    display: flex;
  }
  .dart-sticky-navigation .mobile-nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
    background: var(--mobile-bg-color);
    box-shadow: var(--shadow);
  }
  .dart-sticky-navigation .mobile-nav-list.show {
    display: flex;
  }
  .dart-sticky-navigation .mobile-nav-list a {
    display: block;
    padding: var(--dart-mobile-link-padding);
    font-family: var(--text-font);
    font-size: var(--dart-mobile-link-font-size);
    color: var(--text-color);
    text-decoration: none;
    background: var(--block-color);
  }
  .dart-sticky-navigation .mobile-nav-list a:hover,
  .dart-sticky-navigation .mobile-nav-list a.active {
    background: var(--primary);
    color: var(--light-text-color);
  }
}