/* Application-owned spacing: preserve the existing GOAT CMS article layout. */
.article-layout {
  grid-template-columns: minmax(0, 1fr);
  padding-top: 0;
}
.article-layout .detail-header,
.article-layout .detail-lede { max-width: none; }
.topbar { margin-bottom: var(--space-5); }
.topbar a.brand:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Common menu presentation; controls.css supplies the button and icon. */
.topbar:has(#menu-toggle) { position: relative; z-index: 20; align-items: center; }
#menu-toggle { display: none; margin-left: auto; color: var(--primary); }
#menu-toggle svg { width: 22px; height: 22px; }
#menu-toggle:hover { border-color: var(--border-strong); background: var(--surface-subtle); }

@media (max-width: 760px) {
  .js #menu-toggle { display: inline-grid; flex: 0 0 auto; place-items: center; }
  .js #primary-navigation {
    position: absolute;
    inset: calc(100% + 10px) 0 auto;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 251, 244, 0.98);
    box-shadow: 0 20px 48px rgba(14, 24, 19, 0.2);
  }
  .js #primary-navigation.is-open {
    display: flex;
    animation: child-menu-reveal 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  #primary-navigation a { display: inline-flex; width: 100%; justify-content: flex-start; }
}

@keyframes child-menu-reveal {
  from { opacity: 0; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .js #primary-navigation.is-open { animation: none; }
}

@media (min-width: 64rem) {
  .article-layout:has(.article-toc) {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem);
  }
}

/* Keep the article header above the inline TOC when the sidebar no longer fits. */
@media (max-width: 63.99rem) {
  .article-layout:has(> .article-toc) > .article-content,
  .article-layout:has(> .article-toc) > .article-content > article {
    display: contents;
  }

  .article-layout:has(> .article-toc) .detail-header {
    order: 0;
    padding-bottom: 0;
  }

  .article-layout > .article-toc {
    order: 1;
    max-height: none;
    overflow-y: visible;
  }

  .article-layout:has(> .article-toc) .article-body {
    order: 2;
  }
}