/* Mobile menu (mmenu, opened with the burger): the page moves aside as the menu
   slides in, instead of the menu lying over it. The menu itself is in front
   (position-front), so mmenu moves nothing; the parts of the page move here, each
   on its own, so the fixed header stays at the top while it moves. Same distance
   and timing as the menu: 80% of the width, at least 240px, at most 440px. */
main,
footer {
  transition: transform .4s ease;
}
/* The header also slides up and down when it gets small (margin-top, scroll-ui.css). */
#head {
  transition: transform .4s ease, margin-top .35s cubic-bezier(.4, 0, .2, 1), background-color .3s ease, box-shadow .3s ease;
}
body.mm-wrapper_opening #head,
body.mm-wrapper_opening main,
body.mm-wrapper_opening footer {
  transform: translate3d(calc(-1 * clamp(240px, 80vw, 440px)), 0, 0);
}
/* mmenu takes the body's divs (header.php's div#page, which holds only the fixed
   header, and the fixed banner and consent dialog) as "the page", wraps them, and
   makes that wrapper a screen tall while the menu is open. That pushed the content
   a whole screen down and left the area beside the menu white. */
body.mm-wrapper_opened .mm-page {
  min-height: 0;
}