/* ============================================================
   ACS NAV
   ============================================================ */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above full-bleed hero sections (e.g. stats band) so the bar never looks “mixed” with page content */
  z-index: 1000;
  background: var(--color-page);
  border-bottom: 1px solid var(--color-rule);
  isolation: isolate;
  min-height: 60px;
  height: auto;
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  transition: background 350ms ease, border-color 350ms ease, color 350ms ease;
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 60px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.nav-logo__mark {
  /* The ACS lettermark box */
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-text-inverse);
  background: var(--color-dark);
  padding: 5px 8px;
  line-height: 1;
}
.nav-logo__name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* Links
   Explicit line-height: 1 so every nav element (link + CTA) shares the
   same line box height — keeps the row visually even. */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.nav-links a {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--color-text-body);
  transition: color var(--transition-fast);
}
.nav-links a:not(.nav-cta):hover,
.nav-links a.is-active {
  color: var(--color-text-primary);
}
.nav-links a.is-active {
  border-bottom: 1px solid var(--color-orange);
  padding-bottom: 2px; /* slight gap below the text so the clay rule reads as an underline, not as text-decoration */
}

/* CTA
   Sized to sit on the same visual baseline as the surrounding nav links.
   `.nav-links` prefix raises specificity above `.nav-links a:hover`,
   which would otherwise win and force the text back to ink (invisible
   on the ink hover background). */
.nav-links .nav-cta,
.nav-cta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  color: var(--color-text-primary);
  background: transparent;
  border: 1px solid var(--color-rule);
  padding: 7px 14px;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}
.nav-links .nav-cta:hover,
.nav-cta:hover {
  background: var(--color-ink);
  color: var(--color-cream);
  border-color: var(--color-ink);
}

/* When the user is already on the page the CTA points to, hide the
   CTA. Two CTAs that go to the same page is redundant and clutters
   the nav. The remaining "Contact" link still flags the active state. */
.nav-links a.is-active[href*="contact"] ~ .nav-cta {
  display: none;
}

/* Mobile hamburger — keep existing JS logic, update styles only */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
  background: none;
  border: none;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-text-primary);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Mobile nav overlay */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--color-page);
  padding-top: max(80px, calc(env(safe-area-inset-top, 0px) + 64px));
  padding-left: max(var(--container-pad-mobile), env(safe-area-inset-left, 0px));
  padding-right: max(var(--container-pad-mobile), env(safe-area-inset-right, 0px));
  padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom, 0px));
  flex-direction: column;
  gap: var(--space-lg);
}
.nav-overlay.is-open {
  display: flex;
  align-items: center;
}
.nav-overlay a {
  font-family: var(--font-serif);
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 400;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: var(--space-md);
  text-align: center;
  width: 100%;
  max-width: 320px;
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .nav-logo__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(200px, 52vw);
  }
}

/* ============================================================
   NAV — DARK MODE
   Toggled by IntersectionObserver in nav.js when the nav is
   sitting over a section marked [data-nav-theme="dark"]
   (typically .band--dark on the home page).
   ============================================================ */
.nav-logo__name,
.nav-links a,
.nav-cta,
.nav-toggle span {
  transition: color 350ms ease, background 350ms ease, border-color 350ms ease;
}

.site-nav.nav--dark {
  background: var(--color-ink);
  border-bottom-color: rgb(255 255 255 / 0.08);
}
.site-nav.nav--dark .nav-logo__mark {
  background: var(--color-cream);
  color: var(--color-ink);
}
.site-nav.nav--dark .nav-logo__name {
  color: rgb(248 245 238 / 0.7);
}
.site-nav.nav--dark .nav-links a {
  color: rgb(248 245 238 / 0.75);
}
.site-nav.nav--dark .nav-links a:hover,
.site-nav.nav--dark .nav-links a.is-active {
  color: var(--color-cream);
}
.site-nav.nav--dark .nav-links a.is-active {
  border-bottom-color: var(--color-cream);
}
.site-nav.nav--dark .nav-links .nav-cta,
.site-nav.nav--dark .nav-cta {
  color: var(--color-cream);
  border-color: rgb(248 245 238 / 0.35);
}
.site-nav.nav--dark .nav-links .nav-cta:hover,
.site-nav.nav--dark .nav-cta:hover {
  background: var(--color-cream);
  color: var(--color-ink);
  border-color: var(--color-cream);
}
.site-nav.nav--dark .nav-toggle span {
  background: var(--color-cream);
}