:root {
  --site-header-height: 104px;
  scroll-padding-top: calc(var(--site-header-height) + 28px);
}

.site-navigation {
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-navigation .header {
  min-height: var(--site-header-height);
}

@media (max-width: 800px) {
  :root {
    --site-header-height: 82px;
  }

  .site-navigation .mobile-nav {
    position: absolute;
    inset: 100% 0 auto;
    max-height: calc(100vh - var(--site-header-height));
    max-height: calc(100dvh - var(--site-header-height));
    overflow-y: auto;
  }
}