/* ==================================================================
   HEADER SCROLL SHOW/HIDE
   Slides the site header up and out of view while the user scrolls
   down, and slides it back in the instant they scroll up — even
   mid-page, not just back at the top.

   Pairs with header-scroll.js, which toggles the .header-hidden
   class on .md-header based on scroll direction. This file only
   defines what that class looks like; the JS decides when to add
   or remove it.

   NOTE: Material for MkDocs has a similar built-in feature
   (`header.autohide` in mkdocs.yml) that hides the header once you
   scroll past it, but doesn't bring it back on scroll-up the way
   this does. Don't enable both at once — they'd both try to drive
   the same .md-header element and fight each other.
   ================================================================== */

.md-header {
  transition: transform 0.3s ease;
  will-change: transform;
}

.md-header.header-hidden {
  transform: translateY(-100%);
}

/* If your site also uses the sticky tabs bar (theme.features:
   navigation.tabs.sticky), uncomment this so the tabs row hides and
   reappears together with the header instead of being left floating
   on its own:

.md-tabs {
  transition: transform 0.3s ease;
  will-change: transform;
}

.md-header.header-hidden + .md-tabs {
  transform: translateY(-100%);
}

*/