.hes-nav-bar__mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--hes-color-border);
  border-radius: var(--hes-radius-sm);
  cursor: pointer;
}
.hes-nav-bar__mobile-toggle:focus-visible {
  outline: 2px solid var(--hes-color-link);
  outline-offset: 2px;
}

/* Three-bar hamburger drawn with box-shadow, no icon font/library. */
.hes-nav-bar__mobile-toggle-icon,
.hes-nav-bar__mobile-toggle-icon::before,
.hes-nav-bar__mobile-toggle-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--hes-color-text-primary);
  position: relative;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.hes-nav-bar__mobile-toggle-icon::before,
.hes-nav-bar__mobile-toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
}
.hes-nav-bar__mobile-toggle-icon::before { top: -6px; }
.hes-nav-bar__mobile-toggle-icon::after { top: 6px; }

/* Open state - hamburger becomes an X. */
.hes-nav-bar__mobile-toggle[aria-expanded="true"] .hes-nav-bar__mobile-toggle-icon {
  background: transparent;
}
.hes-nav-bar__mobile-toggle[aria-expanded="true"] .hes-nav-bar__mobile-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.hes-nav-bar__mobile-toggle[aria-expanded="true"] .hes-nav-bar__mobile-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.hes-nav-bar__list {
  display: flex;
  align-items: center;
  gap: var(--hes-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

/* Below tablet (matches Layer 1's --hes-breakpoint-tablet, 768px - see
   tokens.css's file header on why this is hardcoded here rather than
   read from the custom property): collapse to a hamburger-toggled
   vertical menu instead of wrapping to a second row. */
@media (max-width: 767px) {
  .hes-nav-bar__mobile-toggle {
    display: inline-flex;
  }

  .hes-nav-bar__list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin-top: var(--hes-space-3);
  }

  .hes-nav-bar__mobile-toggle[aria-expanded="true"] ~ .hes-nav-bar__list {
    display: flex;
  }

  .hes-nav-bar__item {
    padding-block: var(--hes-space-2);
    border-bottom: 1px solid var(--hes-color-border);
  }
  .hes-nav-bar__item:last-child {
    border-bottom: none;
  }

  .hes-nav-bar__dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    margin-top: var(--hes-space-2);
    padding-left: var(--hes-space-3);
  }
}

/* Nav links read as plain nav items, not inline body-text links - the
   underline the base link component uses for in-content text would be
   noisy repeated across every nav item. */
.hes-nav-bar__item .hes-link {
  text-decoration: none;
  font-weight: 600;
  font-size: var(--hes-text-small-size);
  color: var(--hes-color-text-primary);
}
.hes-nav-bar__item .hes-link:hover {
  color: var(--hes-color-link);
}

.hes-nav-bar__dropdown {
  position: relative;
}

.hes-nav-bar__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--hes-space-1);
  font-family: var(--hes-font-family-base);
  font-size: var(--hes-text-small-size);
  font-weight: 600;
  color: var(--hes-color-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--hes-space-1) 0;
}
.hes-nav-bar__dropdown-toggle:hover {
  color: var(--hes-color-link);
}
.hes-nav-bar__dropdown-toggle:focus-visible {
  outline: 2px solid var(--hes-color-link);
  outline-offset: 2px;
}

.hes-nav-bar__dropdown-caret {
  font-size: 0.65em;
  transition: transform 0.15s ease;
}
.hes-nav-bar__dropdown-toggle[aria-expanded="true"] .hes-nav-bar__dropdown-caret {
  transform: rotate(180deg);
}

.hes-nav-bar__dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  margin: var(--hes-space-2) 0 0;
  padding: var(--hes-space-2);
  list-style: none;
  background: var(--hes-color-background);
  border: 1px solid var(--hes-color-border);
  border-radius: var(--hes-radius-md);
  box-shadow: var(--hes-shadow-md);
  z-index: var(--hes-z-dropdown);
}

.hes-nav-bar__dropdown-toggle[aria-expanded="true"] + .hes-nav-bar__dropdown-menu {
  display: block;
}

.hes-nav-bar__dropdown-menu li {
  padding: var(--hes-space-1) var(--hes-space-2);
}

.hes-nav-bar__dropdown-menu .hes-link {
  display: block;
}