/* 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 */
.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);
}
/* 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); }
}