/* Native cross-document transitions keep the navigation visually stationary.
   https://developer.chrome.com/docs/web-platform/view-transitions/cross-document */
@view-transition { navigation: auto; }
:root { --site-nav-height: 75px; --taco-page-ease: cubic-bezier(.22,1,.36,1); }
html { scrollbar-gutter: stable; }

.taco-navigation {
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: 24px;
  height: var(--site-nav-height);
  padding: 16px 32px;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(16px);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--leading-ui);
  view-transition-name: taco-navigation;
}
.taco-navigation *, .taco-navigation *::before, .taco-navigation *::after { box-sizing: border-box; }
.taco-navigation a { text-decoration: none; }
.taco-navigation__brand {
  justify-self: start;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wordmark);
}
.taco-navigation__links { display: flex; align-items: center; justify-content: center; gap: 28px; }
.taco-navigation__links a { color: var(--muted); font-weight: var(--weight-medium); white-space: nowrap; }
.taco-navigation__links a[aria-current='page'] { color: var(--ink); }
.taco-navigation__links a:hover, .taco-navigation__brand:hover { color: var(--link); }
.taco-navigation__action {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 146px;
  min-height: 42px;
  padding: 10px 20px;
  border-radius: 999px;
  white-space: nowrap;
}
/* The main header scrolls away. Product tabs then occupy the viewport top. */
[data-subnav] { top: 0 !important; z-index: 90 !important; }
html:not([data-main-navigation-offscreen='true']) [data-subnav] {
  visibility: hidden !important;
  pointer-events: none !important;
}
[id] { scroll-margin-top: 88px; }
.ds { padding-top: calc(var(--site-nav-height) + 32px); }

/* The old content holds while the export mounts, then content crossfades.
   The header does not translate, and no full-screen curtain covers the UI. */
::view-transition-group(root), ::view-transition-group(taco-navigation) { animation: none; }
::view-transition-old(root) { animation: taco-content-out 220ms var(--taco-page-ease) both; }
::view-transition-new(root) { animation: taco-content-in 280ms var(--taco-page-ease) both; }
::view-transition-old(taco-navigation) { animation: taco-content-out 220ms ease both; }
::view-transition-new(taco-navigation) { animation: taco-content-in 220ms ease both; }
::view-transition-old(root), ::view-transition-new(root),
::view-transition-old(taco-navigation), ::view-transition-new(taco-navigation) { mix-blend-mode: normal; }
html:not([data-page-transition='ready'])::view-transition-old(root),
html:not([data-page-transition='ready'])::view-transition-new(root),
html:not([data-page-transition='ready'])::view-transition-old(taco-navigation),
html:not([data-page-transition='ready'])::view-transition-new(taco-navigation) { animation-play-state: paused; }
@keyframes taco-content-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes taco-content-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 680px) {
  :root { --site-nav-height: 109px; }
  .taco-navigation { grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 20px; }
  .taco-navigation__links { grid-column: 1 / -1; grid-row: 2; gap: 26px; }
  .taco-navigation__action { grid-column: 2; grid-row: 1; min-width: 146px; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(taco-navigation), ::view-transition-new(taco-navigation) { animation: none; }
}