/**
 * Shared top bar for subpages: same width as homepage hero column + Home control + primary nav.
 * Does not use .tf-home__shell zoom — spacer + fixed bar use real viewport px (see homepage header).
 */

:root {
  --site-header-max: 1200px;
  /* Matches .tf-*__shell horizontal padding (e.g. gallery, about, team) */
  --site-header-gutter: 16px;
  /* Shell gutter + main panel horizontal padding (e.g. 16 + 64 on desktop, 16 + 24 ≤768px) */
  --site-header-inset-x: calc(var(--site-header-gutter) + 64px);
}

.tf-site-header {
  width: 100%;
}

/*
 * Bar width = shell outer width (max 1200px), not (100vw − 32px) — that was narrower than
 * gallery / about / team shells and broke alignment on many viewports.
 */
.tf-site-header__bar {
  position: fixed;
  top: 0;
  left: 50%;
  right: auto;
  z-index: 100;
  box-sizing: border-box;
  width: min(var(--site-header-max), 100vw);
  max-width: 100%;
  transform: translateX(-50%);
  padding: max(12px, env(safe-area-inset-top, 0px)) 0 12px;
  background-color: var(--color-canvas);
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

.tf-site-header__inner {
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding-left: var(--site-header-inset-x);
  padding-right: var(--site-header-inset-x);
  min-height: 40px;
}

/* Compact Home control — same language as back-link.css, single row with nav */
.tf-site-header__home {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 8px;
  padding: 6px 12px;
  margin: 0;
  border: 1px solid rgb(255 255 255 / 0.4);
  background: var(--color-black);
  color: var(--color-white);
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.tf-site-header__home:hover {
  border-color: rgb(255 255 255 / 0.65);
  background: var(--color-black);
}

.tf-site-header__home:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
}

.tf-site-header__home-chevron {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

.tf-site-header__home-logo {
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center;
}

.tf-site-header__home-label {
  font-family: var(--font-family-headline);
  font-weight: 700;
  font-size: var(--type-body-s);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.tf-site-header__nav {
  display: flex;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(12px, 3vw, 48px);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body);
  font-size: clamp(12px, 1.85vw, var(--type-body-m));
  line-height: 40px;
  color: var(--color-white);
}

.tf-site-header__nav a {
  flex-shrink: 0;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

.tf-site-header__nav a:hover {
  color: var(--color-orange);
}

.tf-site-header__nav a[aria-current="page"] {
  color: var(--color-white);
}

.tf-site-header__nav-link--gallery {
  display: inline;
}

.tf-site-header-spacer {
  flex-shrink: 0;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  height: calc(max(12px, env(safe-area-inset-top, 0px)) + 12px + 40px + 1px);
  pointer-events: none;
}

/* Match .tf-gallery__body / .tf-about__body etc. at ≤768px: 24px horizontal inside shell */
@media (max-width: 768px) {
  :root {
    --site-header-inset-x: calc(var(--site-header-gutter) + 24px);
  }
}

@media (max-width: 640px) {
  .tf-site-header__inner {
    gap: 8px;
    justify-content: flex-start;
  }

  .tf-site-header__nav {
    display: none;
  }

  .tf-site-header__home {
    padding: 6px 10px;
    gap: 6px;
  }

  .tf-site-header__home-chevron {
    width: 18px;
    height: 18px;
  }

  .tf-site-header__home-logo {
    width: 24px;
    height: 24px;
  }

  .tf-site-header__home-label {
    font-size: var(--type-body-xs);
  }

  .tf-site-header-spacer {
    height: calc(max(10px, env(safe-area-inset-top, 0px)) + 10px + 40px + 1px);
  }
}

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