/* One header and navigation system for Home, Support, and Privacy. */
.site-header {
  width: min(1120px, calc(100% - 96px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 28px;
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  font: 600 30px/1 var(--serif);
  letter-spacing: -.04em;
}
.site-header .wordmark { font: inherit; letter-spacing: inherit; }
.site-header .brand-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  background: var(--toolbar);
  border: 1px solid white;
  color: var(--forest);
  box-shadow: 0 4px 16px #213b3705;
}
.site-header .brand-mark .icon { display: block; width: 27px; height: 27px; }
.site-header .site-nav {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(98px, 1fr));
  gap: 4px;
  padding: 5px;
  background: var(--toolbar);
  border: 1px solid white;
  border-radius: 100px;
}
.site-nav-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: calc(5px + var(--active-index) * ((100% - 18px) / 3 + 4px));
  width: calc((100% - 18px) / 3);
  border-radius: 100px;
  background: white;
  box-shadow: 0 2px 6px #213b3705;
  pointer-events: none;
  view-transition-name: site-nav-pill;
}
.site-header .site-nav a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 20px;
  border-radius: 100px;
  color: var(--forest);
  font: 550 14px/1.6 var(--sans);
  letter-spacing: normal;
  text-decoration: none;
  background: transparent;
  transition: color 160ms ease;
}
.site-header .site-nav a:hover { color: #132e25; }
.site-nav-label { pointer-events: none; }
.site-nav-label-home { view-transition-name: site-nav-home; }
.site-nav-label-support { view-transition-name: site-nav-support; }
.site-nav-label-privacy { view-transition-name: site-nav-privacy; }
.site-header a:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 4px;
}

/* Keep the header live while the content and selection animate separately. */
@view-transition { navigation: auto; }
:root { view-transition-name: none; }
::view-transition { pointer-events: none; }
/* Separate snapshots preserve each page's position, including restored scroll. */
.direction-app-explorer .page-content { view-transition-name: home-content; }
.page-support .page-content { view-transition-name: support-content; }
.page-privacy .page-content { view-transition-name: privacy-content; }
::view-transition-group(home-content),
::view-transition-group(support-content),
::view-transition-group(privacy-content) { animation: none; z-index: 1; }
/* Finish the outgoing text before revealing the next page; no doubled headings. */
::view-transition-old(home-content),
::view-transition-old(support-content),
::view-transition-old(privacy-content) {
  height: auto;
  mix-blend-mode: normal;
  animation: 90ms ease-in both page-leave;
}
::view-transition-new(home-content),
::view-transition-new(support-content),
::view-transition-new(privacy-content) {
  height: auto;
  mix-blend-mode: normal;
  animation: 180ms 90ms ease-out both page-enter;
}
@keyframes page-leave { from { opacity: 1; } to { opacity: 0; } }
@keyframes page-enter { from { opacity: 0; } to { opacity: 1; } }
::view-transition-old(site-nav-pill) { display: none; }
::view-transition-new(site-nav-pill) { animation: none; }
::view-transition-group(site-nav-pill) {
  animation-duration: 340ms;
  animation-timing-function: cubic-bezier(.22, .8, .25, 1);
  z-index: 3;
}
/* Keep the stationary labels above the moving white pill. */
::view-transition-group(site-nav-home),
::view-transition-group(site-nav-support),
::view-transition-group(site-nav-privacy) { animation: none; z-index: 4; }
::view-transition-old(site-nav-home),
::view-transition-old(site-nav-support),
::view-transition-old(site-nav-privacy) { display: none; }
::view-transition-new(site-nav-home),
::view-transition-new(site-nav-support),
::view-transition-new(site-nav-privacy) { animation: none; }

@media (max-width: 1000px) {
  .site-header { width: calc(100% - 64px); }
}
@media (max-width: 720px) {
  .site-header { width: calc(100% - 40px); padding-block: 22px; gap: 16px; }
  .site-header .brand { gap: 9px; font-size: 26px; }
  .site-header .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .site-header .brand-mark .icon { width: 23px; height: 23px; }
  .site-header .site-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-header .site-nav a { padding-inline: 15px; font-size: 13px; }
}
@media (max-width: 620px) {
  .site-header { flex-direction: column; align-items: stretch; gap: 14px; padding-bottom: 16px; }
  .site-header .brand { align-self: flex-start; }
}
@media (max-width: 360px) {
  .site-header { width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .site-header a { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}