/* Page layout: <main> is the single scroll container; every page is a stack
   of full-viewport .page-section blocks (see js/core/section-renderer.js).
   Template roots opt into filling their section via their own `flex: 1`. */

html,
body {
  height: 100%;
}

body {
  overflow: hidden;
}

#page-root {
  height: 100vh;
  height: 100svh;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

.page-section {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
}

html.menu-open #page-root {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  #page-root {
    scroll-behavior: auto;
  }
}