/* A compact, persistent mobile header; the existing menu retains its keyboard behavior. */
@media (max-width: 760px) {
  :root {
    --ao-mobile-header-height: 88px;
    --ao-mobile-header-top: 0px;
    scroll-padding-top: calc(var(--ao-mobile-header-height) + var(--ao-mobile-header-top) + 12px);
  }

  .ao-site .ao-header {
    position: sticky;
    top: var(--ao-mobile-header-top);
    z-index: 100;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--ao-mobile-header-height);
    padding: 8px 18px;
    background: var(--ao-paper);
    box-shadow: 0 3px 12px #133b8914;
  }

  .ao-site .ao-header .ao-brand {
    width: 110px;
    height: 72px;
  }

  .ao-site .ao-header #ao-navigation {
    right: 0;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    max-height: calc(100vh - var(--ao-mobile-header-height) - var(--ao-mobile-header-top) - 12px);
    max-height: calc(100dvh - var(--ao-mobile-header-height) - var(--ao-mobile-header-top) - 12px);
    overscroll-behavior: contain;
  }

  .ao-site .ao-header .ao-menu a { white-space: normal; }
}

/* Keep the logged-in toolbar and header separate at every mobile width. */
@media (max-width: 760px) {
  html:has(.ao-site.admin-bar) { --ao-mobile-header-top: 46px; }
  .ao-site.admin-bar #wpadminbar { position: fixed; }
}