/* Mobile nav. The hamburger and drawer are built by js/mobile-nav.js from the
   links already in the header, so each page only needs this file and that one. */

.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  margin-right:-8px;padding:0;border:none;border-radius:10px;background:transparent;cursor:pointer;color:#fff}
.nav-toggle:hover{background:rgba(255,255,255,.08)}
.nav-toggle:focus-visible{outline:2px solid var(--blue,#00B0F0);outline-offset:2px}
.nav-toggle .bars{position:relative;display:block;width:24px;height:2px;border-radius:2px;background:currentColor;
  transition:background .15s}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:24px;height:2px;
  border-radius:2px;background:currentColor;transition:transform .18s ease}
.nav-toggle .bars::before{top:-7px}
.nav-toggle .bars::after{top:7px}
.nav-toggle[aria-expanded="true"] .bars{background:transparent}
.nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-7px) rotate(-45deg)}

.nav-drawer{display:none;position:absolute;top:100%;left:0;right:0;
  background:rgba(11,35,48,.98);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 18px 34px -18px rgba(0,0,0,.7);
  max-height:calc(100vh - 70px);overflow-y:auto}
.nav-drawer .wrap{padding-top:14px;padding-bottom:22px}
.nav-drawer a:not(.btn){display:block;padding:14px 2px;color:#cfe0e9;font-weight:600;font-size:16px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.nav-drawer a:not(.btn):hover,.nav-drawer a.active{color:#fff}
.nav-drawer .btn{margin-top:18px;width:100%;justify-content:center}

@media(max-width:860px){
  /* Repeated here so the pages that lack their own mobile rules match the rest. */
  nav.links,.nav-cta .btn.ghost{display:none}
  .nav-toggle{display:inline-flex}
  .nav-in > .nav-cta,.nav-in > .btn{display:none}
  .nav-drawer.open{display:block}
}