@use "@/common/styles/colors" as *

nav
  position: fixed
  top: 0
  left: 0
  right: 0
  z-index: 100
  padding: 2rem 0 0
  transition: padding 0.2s ease, background-color 0.2s ease, border-color 0.2s ease

nav.nav-scrolled
  padding-top: 0.85rem
  padding-bottom: 0.85rem
  background: rgba($background, 0.9)
  backdrop-filter: blur(18px)
  border-bottom: 1px solid $border-color

.nav-inner
  display: grid
  grid-template-columns: 1fr auto 1fr
  align-items: center
  width: min(1180px, calc(100% - 3rem))
  margin: 0 auto
  color: $text

.logo-area
  justify-self: start
  display: inline-flex
  align-items: center
  gap: 0.75rem
  min-width: 0
  padding: 0.45rem 0.75rem
  color: $text
  border: 1px solid transparent
  border-radius: 0.75rem
  text-decoration: none
  transition: background-color 0.15s ease, border-color 0.15s ease

  &:hover
    background-color: $background-card
    border-color: $border-hover

  img
    width: 1.875rem
    height: 1.875rem
    border-radius: 6px
    flex-shrink: 0

  span
    font-size: 1.5rem
    line-height: 1
    font-weight: 700
    letter-spacing: -0.03em

.nav-links
  justify-self: center
  display: inline-flex
  align-items: center
  gap: 0.375rem
  padding: 0.35rem
  background: rgba($background-lighter, 0.68)
  border: 1px solid $border-color
  border-radius: 0.9rem
  box-shadow: $shadow-sm

  a
    display: inline-flex
    align-items: center
    gap: 0.35rem
    min-height: 2.25rem
    padding: 0.45rem 0.8rem
    color: $text-secondary
    font-size: 0.9rem
    font-weight: 600
    line-height: 1
    border: 1px solid transparent
    border-radius: 0.65rem
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease

    &:hover
      color: $text
      background: $background-card
      border-color: $border-color

    &.active
      color: $primary-light
      background: rgba($primary, 0.1)
      border-color: rgba($primary, 0.25)

  .external-icon
    width: 0.65rem
    height: 0.65rem
    color: $text-muted

.nav-actions
  justify-self: end
  display: flex
  align-items: center
  gap: 0.75rem

.github-link,
.mobile-toggle,
.mobile-close
  display: inline-flex
  align-items: center
  justify-content: center
  width: 2.5rem
  height: 2.5rem
  background: transparent
  border: 1px solid $border-color
  border-radius: 0.75rem
  color: $text-secondary
  cursor: pointer
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease

  &:hover
    color: $primary-light
    background: $background-card
    border-color: $border-hover
    transform: translateY(-1px)

  svg
    width: 1.1rem
    height: 1.1rem

.mobile-toggle
  display: none
  font-family: inherit

.mobile-nav
  position: fixed
  top: 0
  right: 0
  width: min(100%, 330px)
  height: 100vh
  z-index: 150
  background: $background-lighter
  border-left: 1px solid $border-color
  transform: translateX(100%)
  transition: transform 0.22s ease
  box-shadow: $shadow-lg

.mobile-nav.mobile-open
  transform: translateX(0)

.mobile-header
  display: flex
  align-items: center
  justify-content: space-between
  padding: 1.25rem 1.5rem
  border-bottom: 1px solid $border-color

.mobile-logo
  display: inline-flex
  align-items: center
  gap: 0.75rem
  color: $text
  text-decoration: none

  img
    width: 1.875rem
    height: 1.875rem
    border-radius: 6px

  span
    font-size: 1.25rem
    font-weight: 700

.mobile-close
  width: 2.25rem
  height: 2.25rem
  background: $background-card

.mobile-links
  display: flex
  flex-direction: column
  gap: 0.35rem
  padding: 1rem

  a
    display: flex
    align-items: center
    justify-content: space-between
    gap: 0.5rem
    padding: 0.9rem 1rem
    color: $text-secondary
    font-size: 1rem
    font-weight: 600
    border: 1px solid transparent
    border-radius: 0.75rem
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease

    &:hover,
    &.active
      color: $text
      background: $background-card
      border-color: $border-color

    &.active
      color: $primary-light

    .external-icon
      width: 0.75rem
      height: 0.75rem
      color: $text-muted

.mobile-overlay
  position: fixed
  inset: 0
  z-index: 140
  background: rgba(0, 0, 0, 0.55)
  backdrop-filter: blur(4px)

@media (max-width: 900px)
  nav
    padding-top: 1rem

  nav.nav-scrolled
    padding-top: 0.8rem
    padding-bottom: 0.8rem

  .nav-inner
    grid-template-columns: 1fr auto
    width: min(100% - 2rem, 1180px)

  .nav-links,
  .github-link
    display: none

  .mobile-toggle
    display: inline-flex

@media (max-width: 480px)
  .nav-inner
    width: min(100% - 1.5rem, 1180px)

  .logo-area
    padding-left: 0.35rem
    padding-right: 0.35rem

    span
      font-size: 1.25rem