/* ============================================
   Nav Component
   Square corners, Mocha-1 background.
   Logo: Mocha-5 color.
   Variants: default, with-progress (project pages)
   ============================================ */

.nav {
  --nav-stroke: color-mix(in srgb, var(--color-text-secondary) 72%, var(--color-border) 28%);
  /* Current-section box: min width = floor (short labels don’t shrink it); max = long labels + ellipsis */
  --nav-section-box-min: 22ch;
  --nav-section-box-max: 32ch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  background-color: var(--color-nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-nav-border);
  border-radius: 0;
  gap: var(--space-2);
  transition: background-color 0.2s ease, border-color 0.2s ease;

  /* Sticky — floats at top-padding offset as content scrolls beneath */
  position: sticky;
  top: var(--page-padding-y);
  z-index: 100;
}

/* Prevent navbar height collapse before JS injects markup */
.nav:empty {
  min-height: calc(var(--space-2) * 2 + var(--text-sm) * var(--leading-normal) + 2px);
}

.nav__left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav__center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.nav__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  background-color: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--nav-stroke);
  inline-size: calc(var(--space-2) * 2 + var(--text-sm) * var(--leading-normal));
  block-size: calc(var(--space-2) * 2 + var(--text-sm) * var(--leading-normal));
  padding: 0;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav__logo svg {
  /* Match text height since we added padding to the container */
  height: calc(var(--text-sm) * var(--leading-normal));
  width: auto;
  display: block;
}

.nav__logo:hover {
  background-color: var(--color-surface-dark);
  color: var(--color-text-inverse);
  border-color: transparent;
}

/* Scroll progress indicator (project pages only)
   Boxed like the buttons — border, matching padding, fills remaining space */
.nav__progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 clamp(10rem, 23vw, 14rem);
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--nav-stroke);
  transition: border-color 0.2s ease;
}

.nav__progress-track {
  position: relative;
  flex: 1;
  height: 1px;
  background-color: color-mix(in srgb, var(--color-text-secondary) 36%, var(--color-border) 64%);
  overflow: hidden;
  transition: background-color 0.2s ease;
}

/* Keep nav strokes visible over content while scrolling */
.nav .btn--inactive,
.nav .btn--icon {
  border-color: var(--nav-stroke);
}

.nav .btn--inactive:hover,
.nav .btn--icon:hover {
  border-color: transparent;
}

.nav__progress-fill {
  position: absolute;
  inset: 0;
  right: auto;
  width: 0%;
  background-color: var(--color-text-primary);
  transition: width 0.08s linear, background-color 0.2s ease;
}

.nav__progress-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking);
  color: var(--color-text-secondary);
  white-space: nowrap;
  min-width: 3.5ch;
  text-align: right;
  transition: color 0.2s ease;
}

.nav__section-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  box-sizing: border-box;
  padding: var(--space-2);
  border: 1px solid var(--nav-stroke);
  block-size: calc(var(--space-2) * 2 + var(--text-sm) * var(--leading-normal));
  flex: 0 0 auto;
  min-width: var(--nav-section-box-min);
  max-width: var(--nav-section-box-max);
  transition: border-color 0.2s ease;
}

.nav__progress-dot {
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 auto;
  background-color: var(--color-text-primary);
}

.nav__progress-section-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

.nav__section-indicator.is-changing .nav__progress-section-label,
.nav__section-indicator.is-changing .nav__progress-dot {
  animation: navSectionBlurFade 0.24s ease;
}

@keyframes navSectionBlurFade {
  0% {
    opacity: 1;
    filter: blur(0);
  }
  50% {
    opacity: 0.4;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* Tablet + mobile: hide LinkedIn — higher specificity beats .btn */
@media (max-width: 1024px) {
  .nav__right .nav__linkedin {
    display: none;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .nav {
    gap: var(--space-1);
    padding: var(--space-1);
  }

  .nav__left {
    gap: var(--space-1);
  }

  .nav__right {
    gap: var(--space-1);
  }

  .nav__center {
    gap: var(--space-1);
  }

  .nav__logo {
    inline-size: calc(var(--space-2) * 2 + var(--text-sm) * var(--leading-normal));
    block-size: calc(var(--space-2) * 2 + var(--text-sm) * var(--leading-normal));
  }

  .nav__logo svg {
    /* Match standard button text height */
    height: calc(var(--text-sm) * var(--leading-normal));
    width: auto;
  }

  /* Progress bar hidden on mobile — not enough room */
  .nav__progress {
    display: none;
  }

  .nav__section-indicator {
    display: none;
  }
}