/* One opaque navigation surface, independent of scroll position. */
html body .site-header[data-smart-navigation],
html body .site-header[data-smart-navigation]:is(.is-scrolled, :focus-within) {
  position: sticky;
  top: 0;
  z-index: 101;
  background: #111113;
  border-bottom: 1px solid #55555b;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: none;
  transition: transform 220ms var(--ease-standard);
}

html[data-theme="light"] body .site-header[data-smart-navigation],
html[data-theme="light"] body .site-header[data-smart-navigation]:is(.is-scrolled, :focus-within) {
  background: #fffcf7;
  border-bottom-color: #bdb3a7;
  box-shadow: 0 8px 24px rgba(70, 57, 45, 0.12);
}

.site-header[data-smart-navigation] .site-nav a:not(.nav-cta) {
  color: var(--color-text);
  font-weight: 600;
}

html body .site-header[data-smart-navigation].is-navigation-hidden {
  transform: translateY(calc(-100% - 32px));
}

html body.menu-open .site-header[data-smart-navigation],
html body.se-drawer-open .site-header[data-smart-navigation],
html body .site-header[data-smart-navigation]:focus-within {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html body .site-header[data-smart-navigation] {
    transition: none;
  }
}