/* ==========================================================================
   Navigation — .site-nav and its mobile drawer. Depends on tokens.css.
   ========================================================================== */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-nav);
  background: var(--color-bg-nav);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  border-bottom: var(--space-px-1) solid var(--overlay-white-10);
  transition: background var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.site-nav.is-scrolled {
  background: var(--color-bg);
  border-bottom-color: var(--overlay-white-08);
}

.nav-container {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-px-40);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-px-12);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold);
}

.nav-logo-icon {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  object-fit: contain;
}

.nav-logo-text {
  color: var(--color-gold);
}

/* Full wordmark lockup (icon + "RecruitingSniper" in one image), replacing
   the icon+text pair above in the nav bar. Rules above kept in case of revert. */
.nav-logo-banner {
  display: block;
  height: 40px;
  width: auto;
}

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

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

/* inline-block + nowrap: as an inline element the label wrapped to two lines
   at tablet widths, leaving an unclickable gap between the line boxes. */
.nav-link {
  display: inline-block;
  white-space: nowrap;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm-alt);
  color: var(--color-text);
  transition: color var(--duration-fast);
}

.nav-cta {
  white-space: nowrap;
}

/* Tighten the rail before the links are forced to collapse. */
@media (max-width: 1200px) {
  .nav-menu,
  .nav-links {
    gap: var(--space-md);
  }

  .nav-container {
    padding-inline: var(--space-px-24);
  }
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-gold);
}

.nav-cta {
  padding: var(--space-px-10) var(--space-px-24);
  background: var(--color-gold);
  border-radius: var(--radius-sm);
  color: var(--color-bg) !important;
  font-weight: var(--font-weight-bold);
  transition: background var(--duration-fast);
}

.nav-cta:hover {
  background: var(--color-gold-hover);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-px-5);
  width: var(--space-px-30);
  height: var(--space-px-30);
}

.nav-toggle-bar {
  display: block;
  width: 100%;
  height: var(--space-px-2);
  background: var(--color-text);
  border-radius: var(--radius-sm);
  transition: transform var(--duration-fast), opacity var(--duration-fast);
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(calc(var(--space-px-2) + var(--space-px-5))) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(calc(-1 * (var(--space-px-2) + var(--space-px-5)))) rotate(-45deg);
}

body.nav-open {
  overflow: hidden;
}

@media (max-width: 1024px) {
  .nav-container {
    padding: var(--space-md) var(--space-px-20);
  }

  .nav-toggle {
    display: flex;
  }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-bg);
    border-bottom: var(--space-px-1) solid var(--overlay-white-10);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--duration-fast) var(--ease-default),
                opacity var(--duration-fast) var(--ease-default);
  }

  .nav-menu.is-open {
    max-height: var(--max-height-expand);
    opacity: 1;
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-link {
    padding: var(--space-sm) var(--space-px-20);
    border-bottom: var(--space-px-1) solid var(--overlay-white-05);
  }

  .nav-cta {
    margin: var(--space-md) var(--space-px-20);
    text-align: center;
  }
}