/* ==========================================================================
   Navigation Components
   ========================================================================== */

/* Clickable route links (SPA navigation) */
[data-route] {
  cursor: pointer;
}

/* Nav Header
   ---------------------------------------- */
.nav-header {
  height: var(--size-touch-lg);
  display: flex;
  border-block-end: var(--border-normal) var(--np-color-inverse-surface);
}

.nav-header__logo {
  width: var(--size-touch-lg);
  height: 100%;
  flex-shrink: 0;
  border-inline-end: var(--border-normal) var(--np-color-inverse-surface);
}

.nav-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
}

.nav-header__title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-logo-size);
  font-weight: var(--text-logo-weight);
  line-height: var(--text-logo-line-height);
  letter-spacing: var(--text-logo-letter-spacing);
  text-transform: uppercase;
}

/* Nav List
   ---------------------------------------- */
.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-list li a.nav-item {
  height: var(--size-touch);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline-start: var(--space-3);
  border-block-end: var(--border-normal) var(--np-color-inverse-surface);
  font-size: var(--text-nav-button-size);
  line-height: var(--text-nav-button-line-height);
  letter-spacing: var(--text-nav-button-letter-spacing);
  text-decoration: none;
  color: inherit;
}

.nav-list li a.nav-item:hover {
  background-color: var(--np-color-surface-container-high);
}

.nav-list li a.nav-item.active {
  background-color: var(--np-color-tertiary);
  color: var(--np-color-on-tertiary);
}

/* Nav item with action button */
.nav-item--with-action {
  display: flex;
  align-items: center;
  height: var(--size-touch);
  border-block-end: var(--border-normal) var(--np-color-inverse-surface);
}

.nav-list li.nav-item--with-action a.nav-item {
  flex: 1;
  height: auto;
  align-self: stretch;
  border-block-end: none;
}

.nav-item__action {
  width: var(--size-touch);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-inline-start: var(--border-normal) var(--np-color-inverse-surface);
  background: transparent;
  cursor: pointer;
  color: inherit;
}

.nav-item__action:hover {
  background-color: var(--np-color-surface-container-high);
}

/* Nav Item - Large (Profile / Admin blocks)
   ---------------------------------------- */
.nav-item--lg {
  height: var(--size-touch-lg);
  display: flex;
  border-block-start: var(--border-normal) var(--np-color-inverse-surface);
}

.nav-item--lg__content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  text-decoration: none;
  color: inherit;
}

.nav-item--lg__content:hover {
  background-color: var(--np-color-surface-container-high);
}

/* Admin card - center the text */
.nav-item--lg__content--centered {
  justify-content: center;
}

/* Avatar styles moved to components/avatar.css */

.nav-item--lg__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-item--lg__content.active {
  background-color: var(--np-color-tertiary);
  color: var(--np-color-inverse-on-surface);
}

.nav-item--lg__action {
  width: var(--size-touch-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-inline-start: var(--border-normal) var(--np-color-inverse-surface);
  flex-shrink: 0;
}

.nav-item--lg__action:hover {
  background-color: var(--np-color-surface-container-high);
}

.nav-item--lg__action.active {
  background-color: var(--np-color-tertiary);
  color: var(--np-color-inverse-on-surface);
}

.nav-item--lg__action a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.nav-item--lg__action .material-symbols-outlined {
  font-size: var(--size-icon-xl);
  width: var(--size-touch);
  height: var(--size-touch);
}

.nav-item--lg__action-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--text-nav-label-size);
  font-weight: var(--text-nav-label-weight);
  line-height: var(--text-nav-label-line-height);
  letter-spacing: var(--text-nav-label-letter-spacing);
  text-transform: uppercase;
}

/* Nav Item Large - with banner (impersonation mode) */
.nav-item--lg--with-banner {
  height: calc(var(--size-touch-lg) + var(--space-6));
  flex-direction: column;
}

.nav-item--lg__banner {
  height: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-4);
  background-color: var(--np-color-inverse-surface);
  color: var(--np-color-inverse-on-surface);
  font-size: var(--text-nav-label-size);
  font-weight: var(--text-nav-label-weight);
  line-height: var(--text-nav-label-line-height);
  letter-spacing: var(--text-nav-label-letter-spacing);
  text-transform: uppercase;
}

.nav-item--lg--with-banner .nav-item--lg__main {
  flex: 1;
  display: flex;
}

.nav-item--lg--with-banner .nav-item--lg__content {
  flex: 1;
}