/*
 * BJC book — the page frame.
 *
 * The chrome (chrome.html) is: a sticky <header id="bjc-header"> (the
 * navbar, plus the mobile-only secondary nav with the sidebar toggle and
 * breadcrumbs), then <div id="bjc-page" class="page-columns"> holding
 * the docked unit sidebar, the glass that dims the page behind the mobile
 * drawer, the margin "On this page" TOC and <main class="content">, then
 * the footer.
 *
 * Three layouts, by viewport width:
 *
 *   >= 992px   three columns: docked sidebar | content | margin TOC
 *   768–991px  content | margin TOC; the sidebar becomes a slide-in drawer
 *              opened from the secondary nav
 *   <  768px   content alone
 *
 * The column widths reproduce what Quarto's twelve-named-line grid gave
 * the page (its minmax() values, collapsed track by track into one column
 * each): at 1280px wide the sidebar column is 305.5px, the content column
 * 618px and the margin column 280px, with 1.5rem gutters.
 *
 * Header: sticky, not fixed. The frozen theme fixed the header and padded
 * the body by a hard-coded 64px, which left the mobile secondary nav (a
 * second, variable-height bar) covering the top of the content — the page
 * title was hidden under it. Sticky takes the header's real height out of
 * the flow, whatever it is.
 */

html {
  /* In-page anchors land below the sticky header. */
  scroll-padding-top: calc(var(--bjc-navbar-height) + 1rem);
}

#bjc-header {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Keeps the footer near the bottom of short pages. */
#bjc-page {
  min-height: calc(100vh - 132px);
}

#bjc-page > * {
  padding-top: 14px;
}

#bjc-page > #bjc-sidebar-glass {
  padding-top: 0;
}

main {
  margin-top: 1em;
  margin-bottom: 1em;
}

main.content > p:has(+ section) {
  margin-bottom: 2rem;
}

/* -- the grid -------------------------------------------------------------- */

/* Rows: the content row, then a 60px-minimum spacer row the sidebars span
   too, so the sidebar's divider line runs past the end of the content. */
.page-columns {
  display: grid;
  gap: 0;
  grid-template-rows: [content-top] minmax(max-content, 1fr) [content-bottom] minmax(60px, max-content) [page-bottom];
}

main.content {
  grid-column: content-start / content-end;
  grid-row: content-top / content-bottom;
}

#bjc-sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: content-top / page-bottom;
}

#bjc-margin-sidebar {
  grid-column: margin-start / margin-end;
  grid-row: content-top / page-bottom;
}

#bjc-page.page-columns #bjc-margin-sidebar,
#bjc-page.page-columns #bjc-sidebar {
  z-index: 1;
}

/* Desktop, with the unit sidebar docked (every page inside a unit). The
   sidebar and margin columns stretch between their min and max before the
   content column takes the rest; a trailing 1fr absorbs very wide windows
   once the content column reaches its cap. */
@media (min-width: 992px) {
  body.docked .page-columns {
    grid-template-columns:
      [sidebar-start] minmax(235.5px, 305.5px)
      [sidebar-end] 1.5rem
      [content-start] minmax(500px, calc(2200px - 3rem))
      [content-end] 1.5rem
      [margin-start] minmax(210px, 280px)
      [margin-end] 1fr 1.5rem;
  }

  /* Desktop without a sidebar (the book root, Create Task): the content
     is centered-ish by two flexible outer tracks, Quarto's "article" grid. */
  body:not(.docked) .page-columns {
    grid-template-columns:
      1.5rem 5fr 98px 1.5rem
      [content-start] minmax(500px, calc(2050px - 3rem))
      [content-end] 1.5rem
      [margin-start] minmax(203px, 301px)
      [margin-end] 5fr 1.5rem;
  }
}

/* Tablet: no sidebar column (the sidebar is a drawer, see sidebar.css). */
@media (min-width: 768px) and (max-width: 991.98px) {
  .page-columns {
    grid-template-columns:
      1.5rem
      [content-start] minmax(500px, calc(1950px - 3rem))
      [content-end] 1.5rem
      [margin-start] minmax(175px, 210px)
      [margin-end] 1fr 1.5rem;
  }
}

/* Phone: content alone. */
@media (max-width: 767.98px) {
  .page-columns {
    grid-template-columns: 1.5rem [content-start] minmax(0, 1fr) [content-end] 1.5rem;
  }

  #bjc-margin-sidebar,
  nav[role="doc-toc"] {
    display: none;
  }
}

/* Below the desktop breakpoint the header's secondary nav shows the page
   trail, so the title block tightens up. */
@media (max-width: 991.98px) {
  #bjc-page > * {
    padding-top: 0;
  }

  body.docked #bjc-title-block {
    margin-block-end: 0;
  }

  #bjc-page section:first-of-type h2:first-of-type {
    margin-top: 1rem;
  }
}

/* -- title block ----------------------------------------------------------- */

#bjc-title-block {
  position: relative;
  margin-top: -1px;
  margin-block-end: 1rem;
}

#bjc-title-block a {
  text-decoration: none;
}

#bjc-title-block .bjc-title .title {
  margin-top: 0;
  margin-bottom: 0;
}

p.subtitle {
  margin-top: 0.25em;
  margin-bottom: 0.5em;
}

/* The breadcrumbs above the title (desktop only — d-none d-lg-block). */
.bjc-title-breadcrumbs .breadcrumb {
  margin-bottom: 0.5em;
  font-size: 0.9rem;
}

.bjc-title-breadcrumbs .breadcrumb li:last-of-type a {
  color: var(--bjc-muted);
}

/* -- breadcrumbs (title block and secondary nav) --------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0;
  list-style: none;
}

.breadcrumb-item {
  line-height: 1.2rem;
}

.bjc-breadcrumbs .breadcrumb-item {
  padding-right: 0.33em;
  padding-left: 0;
}

.bjc-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: 0.33em;
  color: var(--bjc-breadcrumb-divider);
  content: ">";
}

/* -- footer ---------------------------------------------------------------- */

footer.footer .nav-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  min-height: 3.5em;
  padding: 0.5rem 1em;
  color: var(--bjc-footer-color);
  background-color: var(--bjc-footer-bg);
  text-align: center;
}

.nav-footer a {
  color: var(--bjc-footer-color);
}

.nav-footer .nav-footer-left,
.nav-footer .nav-footer-center,
.nav-footer .nav-footer-right {
  font-size: 0.825em;
}

.nav-footer-center {
  min-height: 3em;
  text-align: center;
}

footer.footer div.nav-footer p:first-child {
  margin-top: 0;
}

footer.footer div.nav-footer p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .nav-footer-left {
    flex: 1 1 0px;
    text-align: left;
  }

  .nav-footer-center {
    flex: 1 1 0px;
  }

  .nav-footer-right {
    flex: 1 1 0px;
    text-align: right;
  }
}

@media (max-width: 767.98px) {
  .nav-footer-center {
    flex: 100%;
    order: 10;
    margin-top: 3em;
    margin-bottom: 1em;
  }
}

@media (max-width: 575.98px) {
  .nav-footer-left,
  .nav-footer-right {
    flex: 100%;
    margin-bottom: 1em;
  }
}

/* -- print ----------------------------------------------------------------- */

/* (body-qualified: sidebar.css's desktop display rules are id selectors
   loaded after this file, so plain ids here would lose to them.) */
@media print {
  :root {
    font-size: 11pt;
  }

  body #bjc-header,
  body #bjc-sidebar,
  body #bjc-sidebar-glass,
  body #bjc-margin-sidebar,
  body .bjc-secondary-nav,
  body .bjc-page-navigation,
  body footer.footer {
    display: none;
  }

  body .page-columns,
  body.docked .page-columns {
    grid-template-columns: 1.5rem [content-start] minmax(0, 1fr) [content-end] 1.5rem;
  }

  figcaption,
  caption {
    color: #666;
  }
}