/* ═══════════════════════════════════════════════════════════════
   FULL-PAGE SCROLL SNAP (shared)
   Adapted from through-the-fire.html landing page.
   Opt-in: add `mf-snap-page` class to <body>.
   - Native vertical swipe on touch (CSS scroll-snap, no JS).
   - One <section> = one viewport pane.
   - <nav>, <footer>, modals are excluded so they don't snap.
   - The right-side dot indicator is intentionally NOT included.
   ═══════════════════════════════════════════════════════════════ */

html:has(body.mf-snap-page) {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  /* Reserve space for the fixed MIF nav so snapped sections don't slide
     behind it. Without this, content scrolls behind the header. */
  scroll-padding-top: calc(var(--mf-nav-h, 72px) + var(--mf-safe-top, 0px));
}

body.mf-snap-page > section {
  min-height: calc(100svh - var(--mf-nav-h, 72px) - var(--mf-safe-top, 0px));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: calc(var(--mf-nav-h, 72px) + var(--mf-safe-top, 0px));
}

/* Don't snap chrome / overlays / footer */
body.mf-snap-page > nav,
body.mf-snap-page > header.mf-nav,
body.mf-snap-page > .mf-nav,
body.mf-snap-page > .mf-nav-spacer,
body.mf-snap-page > .mf-mobile-menu,
body.mf-snap-page > .mf-legal-modal,
body.mf-snap-page > .mf-soon-overlay,
body.mf-snap-page > footer,
body.mf-snap-page > .mf-footer {
  scroll-snap-align: none;
}

/* Tall content / short viewports: relax snap so nothing gets clipped */
@media (max-height: 700px) {
  html:has(body.mf-snap-page) { scroll-snap-type: none; }
  body.mf-snap-page > section { min-height: 0; }
}

/* Reduced motion users: keep snap but skip smooth animation */
@media (prefers-reduced-motion: reduce) {
  html:has(body.mf-snap-page) { scroll-behavior: auto; }
}
