/* The top bar's menu (menu.js). On a wide screen the button is gone and the panel is display: contents,
   so its two navs sit in the bar's grid as before; on a phone they fold under one button. */
.menu-btn { display: none; }
.menu-panel { display: contents; }

@media (max-width: 760px) {
  .has-menu { grid-template-columns: auto 1fr auto; padding: 0 20px; } /* 20px: the gutter of every page on a phone */
  .has-menu .menu-btn {
    grid-column: 3; justify-self: end;
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: -12px; padding: 0 12px;
    border: 0; background: none; color: #F4F1E8; cursor: pointer;
    font-family: "Alliance No.1", ui-sans-serif, system-ui, sans-serif; font-size: 15px; letter-spacing: 0.02em;
  }
  .menu-icon { position: relative; width: 18px; height: 10px; }
  .menu-icon span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform 0.2s ease, top 0.2s ease; }
  .menu-icon span:first-child { top: 0; }
  .menu-icon span:last-child { top: 8.5px; }
  .menu-open .menu-icon span:first-child { top: 4.25px; transform: rotate(45deg); }
  .menu-open .menu-icon span:last-child { top: 4.25px; transform: rotate(-45deg); }
  .has-menu .menu-btn:focus-visible { outline: 1px solid #F4F1E8; outline-offset: -6px; }
  .has-menu > a:first-child { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } /* the logo link: a whole tap target */

  /* .menu-panel.menu-panel outranks the docs header's rule for its last cell (styles.css), so the panel spans the bar on every page */
  .has-menu .menu-panel.menu-panel {
    grid-column: auto; justify-self: auto; /* auto: positioned against the whole bar, edge to edge */
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    padding: 8px 20px 16px; background: #0A0A0A; border-bottom: 1px solid rgb(244 241 232 / 0.14);
  }
  .has-menu.menu-open .menu-panel.menu-panel { display: block; }
  .has-menu .menu-panel .home-nav { display: flex; flex-direction: column; gap: 0; justify-self: stretch; }
  .has-menu .menu-panel .home-nav + .home-nav { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgb(244 241 232 / 0.14); }
  /* the same links on every page: the docs, product and GLAD pages' own link styles (font, underline) stay out of the panel */
  .has-menu .menu-panel .home-nav a {
    display: flex; align-items: center; min-height: 48px; padding: 0;
    color: #F4F1E8; font-family: "Alliance No.1", ui-sans-serif, system-ui, sans-serif;
    font-size: 20px; letter-spacing: -0.01em; white-space: normal; text-decoration: none; opacity: 0.85;
  }
  .has-menu .menu-panel .home-nav a[aria-current="page"] { opacity: 1; text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) { .menu-icon span { transition: none; } }
/* Past a phone the bar's links are a tablet's touch targets too: a 44px tall tap area around the same text. */
@media (min-width: 761px) { .home-nav a { padding-block: 13px; } }