/*
 * PageChrome — Topbar + flex-grow main + SiteFooter.
 * Footer pins to the bottom on short pages so small content still
 * fills the viewport.
 */

.page-chrome {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.page-chrome-main {
  flex: 1;
  /* Canonical page-top space — every page sits 4rem (64px) below the
     topbar on desktop and 1.5rem (24px) below it on mobile. Don't add
     additional top padding on a page's inner shell; if a particular
     page needs a hero-style top band, do that with the hero element's
     own internal padding so the shared page-top baseline stays uniform.

     Bottom 50dvh gives every page — including long comment threads —
     a half-viewport of empty space before the footer so content never
     feels crammed into it. */
  padding: var(--space-16) 0 50dvh;
}

@media (max-width: 640px) {
  .page-chrome-main { padding: var(--space-6) 0 50dvh; }
}

/* Full-width / full-screen layout — used by editor pages (course
   builder). Drops the generous top + bottom padding so the editor
   chrome sits directly under the topbar with no dead space, and the
   footer is omitted so the editor fills the viewport. */
.page-chrome.is-fullwidth .page-chrome-main {
  padding: 0;
}