/* Keep the header in the page flow so hiding it never moves the content. */
html[data-mobile-scroll] {
  scroll-padding-top: calc(100px + env(safe-area-inset-top));
}

html[data-mobile-scroll] body {
  /* Unlike hidden, clip does not create an ancestor scroll container. */
  overflow-x: clip;
}

html[data-mobile-scroll] header[data-mobile-scroll] {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top);
  transform: translateY(0);
  transition: transform 200ms ease-out;
}

html[data-mobile-scroll] header[data-mobile-scroll][data-scroll-hidden] {
  transform: translateY(calc(-100% - 1px));
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html[data-mobile-scroll] header[data-mobile-scroll] { transition: none; }
}

@media print {
  html[data-mobile-scroll] header[data-mobile-scroll] {
    position: static;
    transform: none;
  }
}