/* Navbar: change nav styling here rather than in _navbar.html.erb. Links mark
   the current page with aria-current, which these rules style. */
.navbar {
  background-color: var(--color-green-800);
  border-bottom: 1px solid var(--color-green-800);
}
.nav-mobile-panel {
  background-color: var(--color-green-800);
  border-top: 1px solid var(--color-green-700);
}
.nav-divider {
  border-top: 1px solid var(--color-green-700);
}

/* Logo + wordmark */
.nav-brand {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: var(--font-weight-bold);
  color: var(--color-paper);
  transition: color .15s cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) {
  .nav-brand:hover { color: var(--color-highlight); }
}
/* Trim Martel's tall ascent/descent so the wordmark centers on the logo */
.nav-brand-text {
  text-box: trim-both cap alphabetic;
}

/* Top-level links and dropdown triggers */
.nav-link {
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-paper);
  transition: color .15s cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) {
  .nav-link:hover { color: var(--color-highlight); }
}
.nav-link[aria-current] {
  color: var(--color-highlight);
}
/* Full-width rows in the mobile menu */
.nav-link-block {
  display: block;
  padding-block: calc(var(--spacing) * 2);
}
.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
}

/* Dropdown panel and its items. Keep `hidden` on the panel in the markup;
   the dropdown controller toggles it. */
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  margin-top: calc(var(--spacing) * 2);
  width: calc(var(--spacing) * 48);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-200);
  background-color: var(--color-paper);
  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
}
.nav-dropdown-item {
  display: block;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink);
}
@media (hover: hover) {
  .nav-dropdown-item:hover { background-color: var(--color-grey-green); }
}
.nav-dropdown-item[aria-current] {
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

/* Feedback megaphone (desktop icon, mobile labeled row) */
.nav-feedback {
  cursor: pointer;
  color: var(--color-orange-400);
}
@media (hover: hover) {
  .nav-feedback:hover { color: var(--color-orange-300); }
}

/* Mobile hamburger */
.nav-toggle {
  cursor: pointer;
  padding: calc(var(--spacing) * 1);
  color: var(--color-paper);
}
@media (hover: hover) {
  .nav-toggle:hover { color: var(--color-highlight); }
}