.navigation {
  --_btn-color: var(--primary-medium);
  --_btn-icon-size: 1.5rem;
  --_btn-size: 2.5rem;
  --_navigation-bg-color: var(--gray-lighter);
  background-color: var(--_navigation-bg-color);
}

.navigation .section__inner, .navigation .navigation__nav-list, .navigation .navigation__toggle-btn {
  position: relative;
}

.navigation .navigation__nav-list {
  list-style: none;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  gap: 0.25rem;
  justify-content: center;
}

.navigation .navigation__nav-item {
  cursor: pointer;
  margin: 0;
  font-size: clamp(0.875rem, 2cqi, 1rem);
  font-weight: 600;
  line-height: 1;
  padding: clamp(0.625rem, 2cqi, 0.9375rem) clamp(0.9375rem, 3cqi, 1.25rem);
  scroll-margin-block-start: 6.25rem;
  transition: color 200ms ease-in-out, border-color 200ms ease-in-out;
}

.navigation .navigation__nav-item:hover {
  color: var(--primary-medium);
}

.navigation .navigation__nav-item--active {
  color: var(--primary-medium);
  border-bottom: solid 0.125rem currentColor;
}

.navigation .navigation__toggle-btn {
  display: none;
  border: 0.0625rem solid var(--_btn-color);
  border-radius: 0.25rem;
  padding: 0;
  margin: 0;
  line-height: 1;
  width: var(--_btn-size);
  height: var(--_btn-size);
}

.navigation .navigation__toggle-btn .navigation__toggle-icon {
  width: var(--_btn-icon-size);
  height: var(--_btn-icon-size);
  stroke: var(--_btn-color);
}

body .navigation {
  --_top: 70px;
  position: sticky;
  z-index: 10;
  top: var(--_top);
  left: 0;
  width: 100%;
}

@media screen and (max-width: 850px) {
  .navigation .section__inner {
    padding-block: 0.3125rem;
  }

  .navigation .navigation__nav-list {
    background-color: var(--_navigation-bg-color);
    position: absolute;
    flex-flow: column nowrap;
    top: calc(100% + 0.3125rem);
    right: 0;
    transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
  }

  .navigation .navigation__nav-list[aria-hidden=true] {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
  }

  .navigation .navigation__toggle-btn {
    margin-inline: auto 0;
    display: block;
  }

  body:has(.header-wrapper.stuck) .navigation {
    position: fixed;
  }
}

@media screen and (min-width: 850px) {
  body.admin-bar .navigation {
    --_top: 102px;
  }
}