.custom-top-nav {
  background-color: var(--hh-color-brand-primary, #1c1c1c);
  color: var(--hh-color-day);
}

.custom-top-nav__container {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 2.2500rem;
  padding-bottom: 0.7500rem;
}

@media screen and (min-width: 992px) {
  .custom-top-nav__container {
    padding-top: 6.2500rem;
    padding-bottom: 6.2500rem;
  }
}

.custom-top-nav__nav-list {
  display: none;
}

@media screen and (min-width: 992px) {
  .custom-top-nav__nav-list {
    display: flex;
    gap: 1.3750rem;
    justify-content: center;
  }
}

.custom-top-nav__nav-list-item {
  border: 1px solid var(--hh-color-subdued-secondary, #595959);
  color: var(--hh-color-day);
  padding: 0.3125rem 0.9375rem;
  transition: color var(--hh-duration-default, 300ms) ease,
    background-color var(--hh-duration-default, 300ms) ease;
}

.custom-top-nav__nav-list-item:hover,
.custom-top-nav__nav-list-item.active {
  background-color: var(--hh-color-day);
  color: var(--hh-color-brand-primary, #1c1c1c);
  transition: color var(--hh-duration-default, 300ms) ease,
    background-color var(--hh-duration-default, 300ms) ease;
}

.custom-top-nav__dropdown {
  color: var(--hh-color-brand-primary, #1c1c1c);

  --hh-border-color: var(--hh-color-day);
  --hh-icon-color: var(--hh-color-day);
  --hh-button-text-color: var(--hh-color-day);
}

.container--md {
  max-width: 56.2500rem;
}