/* The Paprika 4 user guides (Help/V4/Guide) on the Paprika 4 site's layout, once Store:Paprika4IsLive is
   true. The guide keeps its Bootstrap 5 markup, styled by bootstrap5.min.css and custom5.css, which load
   first; home4.css then gives it the site's type, colours and navigation. This file puts back what the
   two disagree on and nothing more, so the guide can still move to the new site properly later. */

/* There is no fixed navbar to make room for: the sticky outline and the Contents bar stick to the top
   of the window, and a heading jumped to lands just under it */
body { padding-top: 0; }
.help[id], .help [id] { scroll-margin-top: 20px; }
@media (min-width: 992px) { .help-toc { top: 16px; max-height: calc(100vh - 32px); } }
@media (max-width: 991.98px) { .help[id], .help [id] { scroll-margin-top: 70px; } }
.help-toc-bar { top: 0; background: var(--surface); border-color: var(--line); }
/* The site's menus open over it, which Bootstrap stacks at 1020 */
.menus .nav-menu, .drop ul { z-index: 1030; }

/* The guide's text on white, as the site's other long text is (a news post, Privacy, Terms): a sheet
   beside the outline from lg up, and the whole page below it, where the outline is a drawer */
@media (min-width: 992px) {
  .help-layout > .col-lg-9 { margin-bottom: 48px; padding: 28px 40px 40px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
}
@media (max-width: 991.98px) { body { background: var(--surface); } }

/* The outline sits against the window's left edge, as it always has, so the site's navigation and
   footer widen to line up with it */
@media (min-width: 992px) { body > .wrap, .foot > .wrap { max-width: none; } }
.foot { margin-bottom: 0; text-align: left; }

/* Bootstrap's .nav is the outline's lists here, and home4.css's is the site's navigation */
.help-toc .nav { position: static; flex-wrap: nowrap; align-items: stretch; gap: 0; padding-block: 0; }

/* home4.css's resets, which the guide's text was written without */
.help-layout p { margin-bottom: 1rem; }
.help-layout h1, .help-layout h2, .help-layout h3 { margin-bottom: .5rem; }
.help-layout img { display: inline; }
/* Links in the guide's text: a muted blue (--link, in home4.css) that sits beside the site's red, softer than Bootstrap's */
.help-layout a:not([class]) { color: var(--link); font-weight: 500; }
.help-layout a:not([class]):hover { color: var(--link-hover); }
.help-layout .help-figure-legend a { color: inherit; }

/* The site's type and red where custom5.css names Montserrat and the old red */
.help-layout h4, .help-layout h5, .help-layout h6, .help-toc .offcanvas-title { font-family: var(--f-display); font-weight: 500; }
.help-toc .nav-link:hover, .help-toc .nav-link.active, .help-platforms-list a:hover, .help-pager a:hover { color: var(--accent); }
.help-toc .nav-link.current { border-left-color: var(--accent); }
.help-platforms-list .active { background: var(--accent); }
.help-pager a:hover { border-color: var(--accent); }
/* Dark mode: custom5.css's light panels, given home4.css's dark colors */
@media (prefers-color-scheme: dark) {
  .help-toc .offcanvas-header { background: var(--surface); border-bottom-color: var(--line); }
  .help-toc-bar button { background: var(--surface); color: var(--ink); border-color: var(--line); }
  .help-platforms-list a:hover { background: var(--accent-soft); }
  .help-figure-stage { background-color: var(--bg); border-color: var(--line); }
  .help .well { background-color: var(--bg); border-color: var(--line); box-shadow: none; }
  .help-pager { border-top-color: var(--line); }
  .help-pager a { color: var(--ink); border-color: var(--line); }
  .help-pager span { color: var(--muted); }
  .help-toc .nav-link { color: var(--muted); border-left-color: var(--line); }
  .help-platforms-list, .help-platforms-list li + li > * { border-color: var(--line); }
  .help-toc-bar-current { color: var(--muted); border-left-color: var(--line); }
  .help .page-header { border-bottom-color: var(--line); }
  .help hr { border-top-color: var(--line); }
}

/* A four-column table, Pricing's, needs a little more room than a phone has at Bootstrap's padding */
@media (max-width: 575.98px) {
  .help table th, .help table td { padding-left: 4px; padding-right: 4px; font-size: 14px; }
}