/**
 * Mobile slide-in drawers.
 *
 * Winning Numbers drawer (under 1000px):
 *
 * The base stylesheet renders the panel as a 99999px-tall absolutely
 * positioned strip that rides the page scroll, so touch-scrolling the open
 * panel really scrolls the page underneath it, past the end of the panel's
 * content. These overrides make the open panel a fixed drawer that scrolls
 * its own content and freeze the page behind it. Desktop (1000px and up)
 * keeps the slide-down presentation from the base stylesheet.
 */

@media (max-width: 999px) {
  header .region-winningnumbers {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Reaching the drawer's end must not hand the scroll to the page. */
    overscroll-behavior: contain;
    z-index: 100;
    /* Keep the last game clear of the iPhone home indicator. */
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  /* The drawer scrolls itself; the page behind it must not. */
  body.winningNumbersOpen {
    overflow: hidden;
  }
}

/*
 * Mobile navigation drawer (under 800px): the same page-scroll problem, from
 * the left. The blue gradient region inside it also carried height:99999px,
 * which would make a fixed drawer scroll forever, so it is cut back to its
 * content. The Close Menu button is added by main.js because the fixed
 * drawer covers the header, hamburger included.
 */

.menuClose {
  display: none;
}

@media (max-width: 799px) {
  header #navigation {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 100;
  }

  body.menuOpen {
    overflow: hidden;
  }

  header #navigation .region-navigationsecondary {
    height: auto;
    /* keep the blue running to at least the bottom of the drawer */
    min-height: 100vh;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .menuClose {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 14px;
    color: #15315a;
    background: transparent;
    border: none;
    padding: 10px 25px;
    cursor: pointer;
  }

  .menuClose .icon-cross {
    margin-right: 10px;
    font-size: 12px;
    display: inline-block;
  }
}