/* Mobile Apps header: match the Websites liquid-glass navigation shell. */
@media (max-width: 800px) {
  .site-header {
    display: flex;
    max-height: none;
    overflow: visible;
    transition:
      background 220ms ease,
      box-shadow 220ms ease;
  }

  .site-header .wordmark,
  .site-header .menu-button {
    position: relative;
    z-index: 2;
  }

  .site-header .site-nav {
    display: none;
    width: 100%;
    padding: 1rem 0.5rem 0.5rem;
  }

  .site-header:not(.is-open) {
    border-radius: 999px;
    background: rgba(5, 4, 7, 0.28);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .site-header:not(.is-open)::before {
    display: block;
  }

  .site-header:not(.is-open).is-scrolled {
    background: rgba(5, 4, 7, 0.84);
    box-shadow:
      0 1rem 3rem rgba(0, 0, 0, 0.3),
      inset 0 1px 1px rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }

  .site-header.is-open {
    max-height: none;
    flex-wrap: wrap;
    overflow: visible;
    border-radius: 1.5rem;
    background: rgba(5, 4, 7, 0.94);
  }

  .site-header.is-open .site-nav {
    display: grid;
  }
}