/* backend/src/main/resources/static/modules_styles/starter_standard/components/navigation.css */

/* ==============================================
   DESKTOP NAVIGATION — starter-standard

   Flat link styles with subtle hover.
   Visible at lg (1024px+).
   ============================================== */

.nav--desktop {
  display: none;
  margin-left: var(--gb-spacing-xl);
  flex-grow: 1;
}

.nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--gb-spacing-xs);
}

.nav__link {
  font-size: var(--gb-type-secondary-size);
  font-weight: var(--gb-font-weight-medium);
  color: var(--gb-text-secondary);
  text-decoration: none;
  padding: var(--gb-spacing-sm) var(--gb-spacing-md);
  border-radius: var(--gb-radius-md);
  transition:
    color var(--gb-transition-fast),
    background var(--gb-transition-fast);
  display: flex;
  align-items: center;
  gap: var(--gb-spacing-sm);
  white-space: nowrap;
}

.nav__link:hover {
  color: var(--gb-text-primary);
  background: var(--gb-accent-subtle);
}

.nav__link--active {
  color: var(--gb-text-primary);
  background: var(--gb-accent-subtle);
}

/* ==============================================
   DESKTOP (1024px+)
   ============================================== */

@media screen and (min-width: 1024px) {
  .nav--desktop {
    display: flex;
    align-items: center;
  }
}