/**
 * @file
 * Primary navigation and dropdowns.
 */

.primary-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

@media (min-width: 1024px) {
  .primary-nav {
    display: flex;
  }
}

.primary-nav__item {
  position: relative;
}

.primary-nav__link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.primary-nav__link:hover,
.primary-nav__item.is-open > .primary-nav__link {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.primary-nav__chevron {
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

.primary-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  background: #fff;
  color: var(--foreground);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border);
  padding: 0.25rem 0;
  z-index: 50;
}

.primary-nav__item.is-open > .primary-nav__dropdown,
.primary-nav__item:hover > .primary-nav__dropdown {
  display: block;
}

.primary-nav__dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  transition: background-color 0.15s ease;
}

.primary-nav__dropdown a:hover {
  background: var(--muted);
}

/* Mobile menu */
.mobile-nav {
  display: none;
  background: var(--primary-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav.is-open {
  display: block;
}

@media (min-width: 1024px) {
  .mobile-nav {
    display: none !important;
  }
}

.mobile-nav a {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Drupal menu block fallbacks */
.region-primary-menu .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.region-primary-menu .menu a {
  color: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.region-primary-menu .menu a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}