ul.site-nav {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: 'FiraCodeNerdMono', monospace;
}

ul.site-nav li {
  position: relative;
}

ul.site-nav li a {
  display: inline-block;
  padding: 0.5em 0.5em;
  color: #e0e0e0;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}

ul.site-nav li a:hover {
  color: #00aaff;
}

ul.site-nav li.current a {
  color: #ffaa00;
  background-color: #1e1e1e;
  border-radius: 4px;
}

ul.site-nav li.current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #ffaa00;
  border-radius: 4px 0 0 4px;
}

ul.site-nav li ul {
  display: none; /* oculta sub-itens */
}

ul.site-nav li:hover > ul {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #121212;
  padding: 0.5rem;
  list-style: none;
  border: 1px solid #333;
  border-radius: 4px;
}

ul.site-nav li:hover > ul li a {
  padding: 0.4em 0.8em;
  display: block;
}