/* ==========================================================================
   AKSO — Navigation Component
   A floating, centred pill nav — detached from the viewport edges, with a
   restrained glass background. Visible on load; hides with a smooth
   slide+fade on scroll down, reappears immediately on any scroll up.
   Behaviour is global (every page loads this file + nav.js identically).
   Mobile collapses the link list into a full-screen takeover menu; the
   pill itself shrinks to just the logo + toggle.
   Pairs with /assets/js/core/nav.js
   ========================================================================== */

.site-header {
  position: fixed;
  top: var(--space-3);
  left: 50%;
  z-index: var(--z-nav);
  width: max-content;
  max-width: calc(100% - (var(--section-padding-x) * 2));
  transform: translateX(-50%);
  will-change: transform, opacity;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
}

/* Hide-on-scroll-down / reveal-on-scroll-up behaviour. Sliding upward
   and fading out reads as "tucking away" rather than a hard cut, and
   reveal (removal of this class) uses the same transition so it feels
   just as immediate coming back. */
.site-header.is-hidden {
  transform: translateX(-50%) translateY(-140%);
  opacity: 0;
  pointer-events: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 0.85rem var(--space-4);
  border-radius: 999px;
  background-color: rgba(10, 10, 10, 0.42);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(245, 245, 243, 0.09);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

/* Subtle deepening once scrolled — never a stark transparent → solid
   flip, just a slightly more present glass surface. Set by nav.js once
   the user scrolls past a small threshold, or immediately on interior
   pages via the data-nav-solid body attribute. */
.site-header.is-solid .site-header__inner {
  background-color: rgba(10, 10, 10, 0.62);
  border-color: rgba(245, 245, 243, 0.14);
}

/* ---------------------------------------------------------------------
   Logo — every letter shares the same weight, colour and style.
   --------------------------------------------------------------------- */
.site-logo {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-primary);
  text-transform: uppercase;
  z-index: 2;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Desktop nav links
   --------------------------------------------------------------------- */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-links a {
  position: relative;
  font-size: var(--text-nav);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding-block: var(--space-1);
  transition: color var(--duration-fast) var(--ease-standard);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: var(--color-text-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-base) var(--ease-out);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--color-text-primary);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-links a[aria-current="page"] {
  color: var(--color-text-primary);
}

.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------------------------
   Mobile menu toggle
   --------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 2;
  width: 26px;
  height: 16px;
  flex-direction: column;
  justify-content: space-between;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-text-primary);
  transition: transform var(--duration-base) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1024px) {
  .site-header__inner {
    gap: var(--space-3);
    padding: 0.75rem var(--space-3);
  }

  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 1;
    background-color: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-4) var(--space-8);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--duration-slow) var(--ease-in-out),
                opacity var(--duration-base) var(--ease-standard),
                visibility 0s linear var(--duration-slow);
  }

  .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform var(--duration-slow) var(--ease-in-out),
                opacity var(--duration-base) var(--ease-standard),
                visibility 0s linear 0s;
  }

  .nav-links a {
    font-size: clamp(2rem, 8vw, 3rem);
    font-family: var(--font-display);
    color: var(--color-text-primary);
    text-transform: none;
    letter-spacing: var(--tracking-tight);
  }

  .nav-links a::after {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }
}

@media (max-width: 640px) {
  .site-header {
    top: var(--space-2);
  }
}