/* One desktop menu origin, independent of the current page's header/content.
   Mobile keeps the existing full-screen menu and sticky themed search. */
@media (min-width: 821px) {
  html { scrollbar-gutter: stable; }
  body > .container {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 24px;
    align-content: start;
    padding-top: 24px;
    padding-bottom: 16px;
  }
  body > .container > #mainContent,
  body > .container > #mainContent > .sidebar-layout { display: contents; }
  body > .container #mobileMenu {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 252px;
    box-sizing: border-box;
    align-self: start;
    margin: 0;
  }
  body > .container .sidebar-layout > .content-area {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    width: 100%;
    margin: 0;
  }
  body > .container > .top-bar {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  body > .container > .top-bar > .left-top {
    grid-column: 2;
    grid-row: 1;
    position: static;
    min-width: 0;
    margin: 0;
    gap: 0;
    z-index: auto;
  }
  body > .container > .top-bar > .search-form {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    transform: none;
  }
  body > .container > .top-bar .logo-image {
    width: clamp(144px, 17vw, 232px);
    max-width: 100%;
    height: auto;
  }
  .desktop-content-expanded body > .container { grid-template-columns: minmax(0, 1fr); }
  .desktop-content-expanded body > .container > .top-bar,
  .desktop-content-expanded body > .container .sidebar-layout > .content-area { grid-column: 1; }
  .desktop-content-expanded body > .container > .top-bar { grid-template-columns: minmax(0, 1fr); }
  .desktop-content-expanded body > .container > .top-bar > .left-top { display: none; }
}