/* Mobile navigation drawer for the LEGACY pages' embedded sidebar chrome.
 * Below the 1280px breakpoint their inline standalone CSS hides .gs-sidebar
 * outright; this sheet (linked AFTER that inline block by
 * scripts/add_mobile_drawer.py) turns it into a slide-in drawer with a
 * hamburger in the banner — same look and behavior as the templated pages
 * (src/css/site.css + src/js/site.js). Shared file: fix drawer behavior here
 * once, every legacy page picks it up. */

.gs-menu-btn {
  display: none;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: #fff;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
}
.gs-menu-btn:hover { background: rgba(255, 255, 255, 0.08); }

@media (max-width: 1279px) {
  body.standalone .gs-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* The inline block says display:none!important at this width — this file
     loads later in the document, so an equal-importance rule here wins. */
  body.standalone .gs-sidebar {
    display: block !important;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1250;
  }
  /* Shadow only while open — on the closed drawer it bled past the parked
     sidebar's edge and drew a grey fade down the left side of the page. */
  body.standalone.nav-open .gs-sidebar {
    transform: translateX(0);
    box-shadow: 2px 0 18px rgba(0, 0, 0, 0.6);
  }
  /* Under the banner, whatever the banner measures. Both of these used to be
     written as numbers — 64 here and 48 in a second block below — from before
     the bar had a third height: at 420px and under, the call to action wraps
     to a second line and the banner is 76px. The drawer stayed at 48 and the
     bar covered the top 28px of it, which is the wordmark row, which is where
     the theme switch now is. --banner-h is what banner-metrics.css declares
     for exactly this, and the legacy chrome injects the two together. */
  body.standalone .gs-sidebar { top: var(--banner-h, 64px); }
  body.standalone .gs-scrim {
    position: fixed;
    top: var(--banner-h, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1240;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.standalone.nav-open .gs-scrim {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (min-width: 1280px) {
  .gs-scrim { display: none; }
}

/* Room for the hamburger next to the centred banner text. The drawer and the
   scrim used to be pinned to 48px here as well; they follow --banner-h in the
   block above now, which is that number at this width and the right one at
   the two others. */
@media (max-width: 600px) {
  body.standalone .gs-banner { padding-left: 48px; }
}

/* Keyboard-accessible sidebar group toggles: the <button>s (group labels on
   hrefless groups, chevrons on linked groups) restyled to match the anchors
   they replaced. */
.gs-l1-in>button.gs-section{display:block;width:100%;text-align:left;background:none;border:0;margin:0;position:relative;padding:0 0 0 4px;font-family:Roboto,sans-serif;font-size:17.6px;line-height:1.6;font-weight:400;color:rgb(249,249,249);cursor:pointer;overflow:hidden;text-overflow:ellipsis}
.gs-l1-in>button.gs-section:hover{background:rgba(255,255,255,0.06)}
button.gs-chev{background:none;border:0;margin:0;padding:0 0 0 12px;cursor:pointer;color:rgb(249,249,249)}