/* =============================================================================
   Aclarity.ai — Shared site-wide traveling nav
   Single source of truth for both the homepage and /ask/ (markup + scroll
   behavior in nav.js, styling here) - a nav change is made once, never
   duplicated per page.

   Token note: home.css and brand.css currently maintain two separate,
   pre-existing token namespaces for the same locked hex values
   (--onyx/--linen/--gilded/--ease-calm in home.css vs --color-onyx/
   --color-linen/--color-gilded in brand.css) - the homepage only loads
   home.css, /ask/ only loads brand.css/app.css, and this file has to
   render correctly under either one. Each color/easing value below falls
   back through both namespaces to the locked hex/curve itself as a last
   resort, rather than picking one namespace and breaking on the other
   page. This is a read of the existing split, not a third new token set -
   flag if the two namespaces get reconciled later, this fallback chain
   can drop to one name.
   ============================================================================= */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 20px 48px;
  /* Always a full-width solid Onyx bar (was transparent-until-scroll) - the
     nav is fixed/overlaid on top of the hero, so an opaque bar here reads
     as "solid bar, then hero directly beneath" with no gap, since the nav
     covers only its own height and the hero is already flush behind it. */
  background: var(--color-onyx, var(--onyx, #111313));
  border-bottom: 1px solid transparent;
  transition:
    background-color 320ms var(--ease-calm, cubic-bezier(0.4, 0, 0.2, 1)),
    border-color 320ms var(--ease-calm, cubic-bezier(0.4, 0, 0.2, 1));
}

.site-nav__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-nav__row--top {
  position: relative;
  min-height: 44px;
}

.site-nav__row--links {
  justify-content: center;
  gap: 32px;
  margin-top: 14px;
  font-family: var(--font-ui, "Jost", sans-serif);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-linen, var(--linen, #F5EFE1));
}

/* Scroll-triggered solid state - transparent-over-hero until the user
   actually scrolls, per the locked "minimal and transparent until
   scroll-triggered" spec. */
.site-nav.site-nav--solid {
  background: var(--color-onyx, var(--onyx, #111313));
  border-bottom-color: var(--border-subtle, rgba(245, 239, 225, 0.14));
}

@media (prefers-reduced-motion: reduce) {
  .site-nav {
    transition: none;
  }
}

.site-nav__group {
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-nav__group--left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 1px;
}
.site-nav__group--right {
  justify-content: flex-end;
}

.site-nav__link,
.site-nav__logo-link,
.site-nav__account-link,
.site-nav__upgrade-pill,
.site-nav__drawer-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.site-nav__link {
  color: var(--color-linen, var(--linen, #F5EFE1));
  transition: color 150ms var(--ease-calm, cubic-bezier(0.4, 0, 0.2, 1));
}
.site-nav__link:hover {
  color: var(--color-gilded, var(--gilded, #C9A85F));
}
.site-nav__link--active {
  color: var(--color-gilded, var(--gilded, #C9A85F));
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__link {
    transition: none;
  }
}

.site-nav__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 44px;
  display: block;
}

/* Free/logged-out utility pill - Linen-outlined, never a Gilded fill (that
   background is reserved for the mobile drawer's own Forest CTA, not this
   pill, so it can't be confused with it at a glance). */
.site-nav__upgrade-pill {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--color-linen, var(--linen, #F5EFE1));
  border-radius: 999px;
  font-family: var(--font-ui, "Jost", sans-serif);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-linen, var(--linen, #F5EFE1));
  transition: color 150ms var(--ease-calm, cubic-bezier(0.4, 0, 0.2, 1)),
    border-color 150ms var(--ease-calm, cubic-bezier(0.4, 0, 0.2, 1));
}
.site-nav__upgrade-pill:hover {
  color: var(--color-gilded, var(--gilded, #C9A85F));
  border-color: var(--color-gilded, var(--gilded, #C9A85F));
}

.site-nav__account-link {
  display: inline-flex;
  color: var(--color-linen, var(--linen, #F5EFE1));
  transition: color 150ms var(--ease-calm, cubic-bezier(0.4, 0, 0.2, 1));
}
.site-nav__account-link:hover {
  color: var(--color-gilded, var(--gilded, #C9A85F));
}

.site-nav__login-link {
  color: var(--color-linen, var(--linen, #F5EFE1));
  font-family: var(--font-ui, "Jost", sans-serif);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 150ms var(--ease-calm, cubic-bezier(0.4, 0, 0.2, 1));
}
.site-nav__login-link:hover {
  color: var(--color-gilded, var(--gilded, #C9A85F));
}

/* Hamburger - hidden on desktop, shown at the mobile breakpoint below. */
.site-nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.site-nav__hamburger span {
  display: block;
  height: 2px;
  background: var(--color-linen, var(--linen, #F5EFE1));
}

.site-nav__drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--color-onyx, var(--onyx, #111313));
  padding: 20px 24px;
  overflow-y: auto;
}
.site-nav__drawer[hidden] {
  display: none;
}

.site-nav__drawer-header {
  display: flex;
  justify-content: flex-end;
}
.site-nav__drawer-close {
  border: none;
  background: transparent;
  color: var(--color-linen, var(--linen, #F5EFE1));
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.site-nav__drawer-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin: 48px 0;
}
.site-nav__drawer-link {
  font-family: var(--font-ui, "Jost", sans-serif);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-linen, var(--linen, #F5EFE1));
}
.site-nav__drawer-link--active {
  color: var(--color-gilded, var(--gilded, #C9A85F));
}

/* Forest background, Linen text - never Gilded here, contrast fails on
   small screens (locked mobile CTA rule). */
.site-nav__drawer-cta {
  display: block;
  margin: 0 auto;
  padding: 14px 28px;
  text-align: center;
  border-radius: 6px;
  background: var(--color-forest, #122C21);
  color: var(--color-linen, var(--linen, #F5EFE1));
  font-family: var(--font-ui, "Jost", sans-serif);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .site-nav {
    padding: 16px 20px;
  }
  .site-nav__logo {
    /* Keep the desktop's absolute-center trick on mobile too - switching to
       position:static here let flexbox space-between distribute the logo
       unevenly (the empty left group and wider right group aren't the same
       width), rendering it visibly off-center. Only the size changes. */
    height: 32px;
  }
  .site-nav__row--links {
    display: none;
  }
  .site-nav__hamburger {
    display: flex;
  }
}