kmtnflower/src/app/navbar/navbar.component.scss

@use '../../styles/variables' as *;
@use '../../styles/mixins' as *;

.navbar {
  background: var(--color-primary-dark);
  padding: $spacing-sm 0;
  box-shadow: $shadow-md;

  :global(body.has-stream) & {
    box-shadow: none;
  }
}

.navbar-inner {
  @include flex-between;

  // Mobile: media player inside navbar is hidden (app.html instance shown as fixed strip)
  @media (max-width: #{$bp-md - 1px}) {
    app-media-player {
      display: none;
    }
  }

  // Desktop: grid layout with media player inline
  @media (min-width: $bp-md) {
    display: grid;
    align-items: center;
    grid-template-columns: auto 320px auto;
    grid-template-areas: 'brand player menu';
    gap: $spacing-lg;

    .navbar-brand {
      grid-area: brand;
    }

    app-media-player {
      grid-area: player;
    }

    .navbar-menu {
      grid-area: menu;
    }

    .navbar-toggle {
      display: none;
    }
  }
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  text-decoration: none;
  color: var(--color-white);
}

.brand-flower {
  width: 36px;
  height: 36px;
}

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-mountain {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.08em;
}

.brand-accent {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  @include gradient-text(var(--color-accent-light), var(--color-accent));
}

.brand-tagline {
  font-size: 0.65rem;
  color: var(--color-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.navbar-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: $spacing-xs;

  .bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-white);
    border-radius: 1px;
    transition: $transition-normal;
  }
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: $spacing-lg;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: $spacing-md;

  a {
    color: var(--color-light);
    font-size: 0.95rem;
    font-weight: 500;
    padding: $spacing-xs $spacing-sm;
    border-radius: $radius-sm;
    transition: color $transition-fast, background $transition-fast;

    &:hover,
    &.active {
      color: var(--color-accent-light);
      background: rgba(232, 122, 46, 0.1);
    }
  }

  .nav-admin {
    color: var(--color-accent-light);
    font-weight: 600;
  }
}

// Auth section in navbar
.nav-auth {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  margin-left: $spacing-sm;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: $spacing-sm;

  .user-name {
    color: var(--color-light);
    font-size: 0.875rem;
    font-weight: 500;
  }
}

.btn-logout {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-light);
  padding: $spacing-xs $spacing-sm;
  border-radius: $radius-sm;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color $transition-fast, color $transition-fast;

  &:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-light);
  }
}

.btn-sign-in {
  color: var(--color-accent-light);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  padding: $spacing-xs $spacing-sm;
  border-radius: $radius-sm;
  transition: color $transition-fast, background $transition-fast;

  &:hover {
    color: var(--color-accent);
    background: rgba(232, 122, 46, 0.1);
  }
}

.btn-donate-nav {
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: $radius-md;
  padding: $spacing-xs $spacing-md;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background $transition-fast, transform $transition-fast;

  &:hover {
    background: var(--color-accent-dark);
    transform: translateY(-1px);
  }

  &:active {
    transform: translateY(0);
  }
}

// Responsive
@media (max-width: #{$bp-md - 1px}) {
  .navbar {
    padding: $spacing-xs 0;
  }

  .navbar-inner {
    height: 100%;
  }

  .brand-flower {
    width: 28px;
    height: 28px;
  }

  .brand-name {
    gap: 0;
  }

  .brand-mountain {
    font-size: 1.15rem;
  }

  .brand-accent {
    font-size: 0.9rem;
  }

  .brand-tagline {
    font-size: 0.55rem;
  }

  .navbar-toggle {
    display: flex;
  }

  .navbar-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-primary-dark);
    flex-direction: column;
    padding: $spacing-md;
    gap: $spacing-md;
    box-shadow: $shadow-lg;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform $transition-normal, opacity $transition-normal;

    &.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }
  }

  .nav-links {
    flex-direction: column;
    width: 100%;
    align-items: center;
  }
}