/* Nav bar: slide out of the way on a phone
   ---------------------------------------------------------------------------
   Upload to:  wp-content/uploads/site/nav.css

   The bar is position:fixed, so on a phone it sat over the article the whole
   way down. Here it slides up when you scroll down and comes back the moment
   you scroll up, which is the pattern people expect from a news site: out of
   the way while reading, one small upward flick away when you want it.

   Only below 720px, the same breakpoint the hamburger appears at. On a desktop
   there is plenty of room and a bar that moves would be a distraction.

   nav.js adds and removes .is-hidden; everything here is just the movement.
   With JavaScript off the class is never added and the bar behaves exactly as
   it did before. */

@media (max-width:720px){
  .site-nav{
    transition:transform .32s cubic-bezier(.4,0,.2,1),
               background-color .25s ease;
    will-change:transform;
  }
  /* 101% rather than 100%, so a shadow or a sub-pixel rounding error cannot
     leave a sliver of the bar visible along the top edge. */
  .site-nav.is-hidden{ transform:translateY(-101%); }

  /* The menu being open always wins: a hidden bar with an open menu would
     leave the panel floating with no way back to the close button. */
  .site-nav.is-open{ transform:none !important; }
}

/* Someone who has asked for less motion gets the same behaviour without the
   slide: the bar simply is not there, rather than animating away. */
@media (max-width:720px) and (prefers-reduced-motion:reduce){
  .site-nav{ transition:none; }
}