/**
 * @file
 * Visual styles for menu.
 */

ul.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

[dir="rtl"] ul.menu {
  text-align: right;
}

nav[role="navigation"] ul.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

nav[role="navigation"] ul.menu .menu-item {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-image: none;
}

nav[role="navigation"] ul.menu .menu-item a {
  display: block;
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text-inverse);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

nav[role="navigation"] ul.menu .menu-item a:hover {
  background-color: var(--color-interactive-hover);
  color: var(--color-text-inverse);
}

nav[role="navigation"] ul.menu .menu-item a.is-active {
  background-color: var(--color-interactive-active);
  color: var(--color-text-inverse-background);
}

.menu-item--expanded,
.menu-item--collapsed {
  list-style-type: none;
  list-style-image: none;
}

@media (max-width: 768px) {
  nav[role="navigation"] ul.menu {
    flex-direction: column;
    align-items: stretch;
  }

  nav[role="navigation"] ul.menu .menu-item a {
    padding: var(--space-md) var(--space-xl);
    border-bottom: 1px solid var(--color-interactive-hover);
  }
}