/* ── SITE HEADER / TOP NAV ── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  height: var(--nav-height);
  background: var(--themeBasePrimary);
}

.site-nav {
  height: 100%;
  width: 100%;
  border-bottom: var(--borderThickness) solid transparent;
  transition:
    border-color var(--trans),
    background var(--trans),
    backdrop-filter var(--trans);
}

.site-nav.scrolled {
  border-bottom: var(--borderThickness) solid var(--divider);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(var(--textCaption));
  -webkit-backdrop-filter: blur(var(--textCaption));
}

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  padding: 0 var(--paddingXL);
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ── BRAND ── */
.site-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.nav-brand {
  display: flex;
  align-items: baseline;
  gap: 0;
  text-decoration: none;
  font-size: var(--textHeadline);
  line-height: 1;
  letter-spacing: var(--ls-logo);
}

.nav-brand__first {
  font-weight: 700;
  color: var(--secondary);
  font-style: normal;
}

.nav-brand__last {
  font-weight: 400;
  color: var(--text-muted);
  transition: color var(--trans);
}

.nav-brand:hover .nav-brand__last {
  color: var(--text);
}

.site-brand__meta {
  display: inline-flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--paddingXS);
  height: var(--textCaption);
  margin-top: var(--paddingXS);
  max-width: var(--size-nav-meta-max);
  overflow: hidden;
}

.site-brand__meta-line {
  align-self: stretch;
  background: var(--text);
  flex: 0 0 var(--borderThickness);
  width: var(--borderThickness);
}

.site-brand__meta-copy {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
  width: var(--size-nav-meta-copy);
}

.site-brand__type {
  color: var(--text);
  font-family: var(--font);
  font-size: var(--textMicro);
  font-weight: 400;
  line-height: var(--lh-micro);
  overflow-wrap: break-word;
  white-space: pre-line;
}

.site-brand__type::after {
  animation: site-brand-type-caret 0.8s steps(1, end) infinite;
  background: var(--text);
  content: "";
  display: inline-block;
  height: var(--lh-micro);
  margin-left: calc(var(--borderThickness) / 2);
  width: calc(var(--borderThickness) / 2);
}

@keyframes site-brand-type-caret {
  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

/* ── CENTER LINKS ── */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--paddingXL);
  justify-content: center;
}

.nav-links a {
  font-size: var(--textCallout);
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: var(--ls-link);
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  transition: color var(--trans);
}

.nav-num {
  font-family: var(--font-heading);
  font-size: var(--textCaption);
  font-weight: 800;
  color: var(--brandPrimary);
  opacity: 1;
  letter-spacing: var(--ls-label);
  transition: color var(--trans);
  line-height: 1;
}

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

.nav-links a:hover .nav-num,
.nav-links a.active .nav-num {
  color: var(--secondary);
  opacity: 1;
}

/* ── RIGHT ACTIONS ── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--paddingMD);
  justify-content: flex-end;
}

/* ── ACTIVE STATE VIA PAGE BODY CLASS ── */
.about-page .nav-links a[href="about.html"],
.portfolio-page .nav-links a[href="portfolio.html"],
.job-detail-page .nav-links a[href="portfolio.html"],
.contact-page .nav-links a[href="contact.html"],
.testimonials-page .nav-links a[href="testimonials.html"] {
  color: var(--text);
}

.about-page .nav-links a[href="about.html"] .nav-num,
.portfolio-page .nav-links a[href="portfolio.html"] .nav-num,
.job-detail-page .nav-links a[href="portfolio.html"] .nav-num,
.contact-page .nav-links a[href="contact.html"] .nav-num,
.testimonials-page .nav-links a[href="testimonials.html"] .nav-num {
  color: var(--secondary);
  opacity: 1;
}

/* ── MOBILE ICON DOCK (matches v1's floating nav-mobile) ── */
/* .nav-mobile-back (job detail pages) shares this pill/shimmer treatment
   but stays a distinct class so it isn't swept up by the JS that detaches
   and re-renders the real .nav-mobile icon dock. */
.nav-mobile,
.nav-mobile-back {
  --cut: var(--borderThickness);
  display: none;
  position: fixed;
  left: 50%;
  top: auto;
  bottom: var(--paddingMD);
  z-index: 2100;
  flex-direction: row;
  align-items: center;
  gap: var(--paddingSM);
  background: transparent;
  border-radius: var(--radiusFull);
  padding: var(--paddingSM) var(--paddingSM);
  border: 0;
  box-shadow: 0 var(--paddingSM) var(--paddingLG) rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(2px);
  overflow: hidden;
  isolation: isolate;
  margin: 0 auto;
  transform: translateX(-50%);
}

.nav-mobile::before,
.nav-mobile-back::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 500%;
  height: 500%;
  opacity: 0.5;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 300deg,
    var(--shimmer-edge) 326deg,
    var(--shimmer-peak) 344deg,
    var(--shimmer-edge) 356deg,
    transparent 360deg
  );
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: center;
  animation: nav-mobile-shimmer-rotate 3.3s linear infinite;
  pointer-events: none;
  will-change: transform;
}

.nav-mobile::after,
.nav-mobile-back::after {
  content: "";
  position: absolute;
  inset: var(--cut);
  z-index: 1;
  border-radius: var(--radiusFull);
  background: var(--themeBaseSurface);
  pointer-events: none;
}

@keyframes nav-mobile-shimmer-rotate {
  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

.nav-mobile.is-load-expanding {
  justify-content: center;
  gap: 0;
  pointer-events: auto;
  width: var(--size-icon-lg);
}

.nav-mobile.is-load-expanding a:not(.active) {
  opacity: 0;
  width: 0;
  pointer-events: none;
}

.nav-mobile a,
.nav-mobile-back a {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--themeBaseMuted);
  font-size: var(--textCallout);
  transition: all var(--trans);
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.nav-mobile a.active,
.nav-mobile a:hover,
.nav-mobile-back a.active,
.nav-mobile-back a:hover {
  color: var(--basicText);
  background: var(--brandPrimary);
  box-shadow: var(--rmds-elevation-2);
}

.nav-mobile a.active :is(svg, .material-icons),
.nav-mobile-back a.active :is(svg, .material-icons) {
  color: var(--basicText);
  stroke: currentColor;
  fill: none;
}

.nav-mobile a svg,
.nav-mobile-back a svg {
  width: var(--textHeadline);
  height: var(--textHeadline);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.nav-mobile a svg.nav-icon--mui {
  fill: currentColor;
  stroke: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-mobile.is-load-expanding {
    animation: none;
    pointer-events: auto;
    width: auto;
  }

  .nav-mobile.is-load-expanding a:not(.active) {
    opacity: 1;
    width: var(--size-icon-lg);
    pointer-events: auto;
  }
}

/* ── RESPONSIVE ── */
@media (max-width: 1199px) {
  /* Case-study pages show a single back button (.nav-mobile-back) in the
     same pill dock instead of the full icon dock (.nav-mobile). */
  .nav-mobile,
  .nav-mobile-back {
    display: flex;
  }

  .job-detail-page .nav-mobile {
    display: none;
  }

  .nav-inner {
    grid-template-columns: 1fr auto;
  }

  .site-brand__meta {
    display: none;
  }

  .nav-links {
    display: none;
  }

  .nav-actions .btn {
    display: none;
  }
}

@media (max-width: 767px) {
  .site-header {
    position: relative;
  }
}