/*
 * Content routes under the brand v2 site shell (the blog, tools, playbooks,
 * versus and developer pages; src/lib/render-site-shell.mjs,
 * renderContentShell). Loaded after overloop-brand-v2-shell.css on those
 * routes only.
 *
 * The header and the footer take the place of each template's own
 * navigation and footer (data-ovl-shell-slot names the template), and the
 * page between them keeps its position (Kenneth, 2026-10-06: old pages keep
 * their current look). Below the 65px header (64px bar, 1px line) a reserve
 * keeps the rest of the room the old navigation took, margins included.
 * The values are measured on every content route at every template
 * breakpoint (docs/design/homepage-brand-v2.md, site-wide shell, phase 3).
 * The footer keeps the space the old footer left above it.
 *
 * Breakpoints are each template's own (blog 991/479, tools 640, developer
 * pages 479), so this is a v1 file, outside the brand v2 lint.
 */

/* The room each template's navigation took, kept by an empty block after
   the header (.ovl-shell-reserve): a height, unlike a margin on the header,
   never merges with the margin of what follows, like the old navigation's
   own height. Blog: a 72px floating bar 16px down (12px up to 991px, a 64px
   bar up to 479px); hubs pull their hero up under it with a negative margin,
   which still lands where it did. */
html[data-ovl-shell="v2"] .ovl-shell-reserve {
  display: block;
  height: 0;
}

html[data-ovl-shell="v2"] .ovl-shell-reserve[data-ovl-shell-slot="blog"] {
  height: 23px;
}

/* Tools: a 72px bar (60px under 640px) whose 48px (32px) margin the hero
   cancels with a negative one, which now lands on the reserve. */
html[data-ovl-shell="v2"] .ovl-shell-reserve[data-ovl-shell-slot="tools"] {
  height: 55px;
}

/* Developer pages: a 72px floating bar 16px down (64px up to 479px). */
html[data-ovl-shell="v2"] .ovl-shell-reserve[data-ovl-shell-slot="developers"] {
  height: 23px;
}

/* Playbooks and versus pages: a 56px bar; the header overlaps the top of
   the first section by its 9px of extra height. */
html[data-ovl-shell="v2"] .ovl-shell-reserve:is([data-ovl-shell-slot="playbooks"], [data-ovl-shell-slot="versus"]) {
  margin-bottom: -9px;
}

/* Footers (the slot adds the class of the footer replaced): the blog's 4 to
   8rem above its footer card, the tools' dark footer.sf 80px (64px under
   640px) and their footer.footer 4rem, the developer pages' 2rem. The
   playbooks and versus pages had their footer flush. */
html[data-ovl-shell="v2"] .ob-footer[data-ovl-shell-slot~="blog"] {
  margin-top: clamp(4rem, 8vw, 8rem);
}

html[data-ovl-shell="v2"] .ob-footer[data-ovl-shell-slot="tools sf"] {
  margin-top: 80px;
}

html[data-ovl-shell="v2"] .ob-footer[data-ovl-shell-slot="tools footer"] {
  margin-top: 4rem;
}

html[data-ovl-shell="v2"] .ob-footer[data-ovl-shell-slot~="developers"] {
  margin-top: 2rem;
}

/* A few article stylesheets style bare elements (header, footer, p, a, ul,
   li: /blog/ai-instructions, /blog/overloop-vs-heyreach). The shell's own
   rules outrank them wherever they set a property; these reset the rest to
   what the shell inherits, at one class of specificity: above a bare element
   rule, below every shell rule. */
:where(html[data-ovl-shell="v2"]) :is(.ob-nav, .ob-footer) {
  padding: 0;
  border-top: 0;
  background-image: none;
}

:where(html[data-ovl-shell="v2"]) :is(.ob-nav, .ob-footer) :where(p, a, ul, ol, li) {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* The articles' reading progress bar (fixed, 3px, at the top of the
   viewport) drew above the floating bar; it stays above the header. */
html[data-ovl-shell="v2"] #reading-progress {
  z-index: 1001;
}

@media (max-width: 991px) {
  html[data-ovl-shell="v2"] .ovl-shell-reserve[data-ovl-shell-slot="blog"] {
    height: 19px;
  }
}

@media (max-width: 639px) {
  html[data-ovl-shell="v2"] .ovl-shell-reserve[data-ovl-shell-slot="tools"] {
    height: 27px;
  }

  html[data-ovl-shell="v2"] .ob-footer[data-ovl-shell-slot="tools sf"] {
    margin-top: 64px;
  }
}

@media (max-width: 479px) {
  html[data-ovl-shell="v2"] .ovl-shell-reserve[data-ovl-shell-slot="blog"] {
    height: 11px;
  }

  html[data-ovl-shell="v2"] .ovl-shell-reserve[data-ovl-shell-slot="developers"] {
    height: 15px;
  }
}