/* powerape site: additions to the pkgdown Bootstrap 5 template. The look
   follows the bootmakr site (https://jespernwulff.github.io/bootmakr/). */

:root {
  --pa-navy: #1e2f5c;
  --pa-maroon: #8a2846;
  --pa-ink: #1b2130;
  --pa-muted: #5a6478;
  --pa-panel: #f5f7fb;
  --pa-border: #dbe0ea;
}

body {
  color: var(--pa-ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

code,
pre,
kbd,
samp {
  font-family: "IBM Plex Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* ---- Navigation bar ------------------------------------------------------ */

/* Light text on the navy bar (the template's own rules assume a light bar). */
.navbar.bg-primary {
  --bs-navbar-color: rgba(255, 255, 255, 0.82);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.35);
}

.navbar.bg-primary .navbar-brand {
  font-family: "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  color: #fff;
}

.navbar.bg-primary .nav-link,
.navbar.bg-primary .navbar-nav > .nav-item > .nav-link {
  color: rgba(255, 255, 255, 0.82);
}

.navbar.bg-primary .nav-link:hover,
.navbar.bg-primary .nav-link:focus,
.navbar.bg-primary .nav-link.active,
.navbar.bg-primary .nav-item.active > .nav-link {
  color: #fff;
}

.navbar.bg-primary small,
.navbar.bg-primary .text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}

.navbar.bg-primary input[type="search"] {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.navbar.bg-primary input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.navbar.bg-primary input[type="search"]:focus {
  background: #fff;
  color: var(--pa-ink);
}

/* Running text keeps a readable measure; code and tables may run wider. */
main p,
main li,
main figcaption {
  max-width: 44rem;
}

main h2 {
  margin-top: 2.5rem;
}

/* ---- Code and output ---------------------------------------------------- */

pre {
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* One-line commands that are meant to be pasted (installation): wrap on
   narrow screens instead of scrolling. Copying still gives a single line. */
.wrap-code pre,
.wrap-code pre code,
#install-r pre,
#install-r pre code,
#install-stata pre,
#install-stata pre code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* What Stata printed: set apart from the commands above it. */
pre.stata-output,
pre.stata-help {
  background: #fff;
  border: 1px solid var(--pa-border);
  border-left: 3px solid var(--pa-navy);
  color: var(--pa-ink);
  padding: 0.75rem 1rem;
  overflow-x: auto;
  white-space: pre;
}

pre.stata-output code,
pre.stata-help code {
  white-space: pre;
}

/* ---- R | Stata tabs ------------------------------------------------------- */

.lang-tabs {
  margin: 1.25rem 0 1.75rem;
}

.lang-tabs .nav-tabs {
  border-bottom: 1px solid var(--pa-border);
}

.lang-tabs .nav-link {
  font-family: var(--bs-font-monospace);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 1rem;
  color: var(--pa-muted);
  border-radius: 0.3rem 0.3rem 0 0;
}

.lang-tabs .nav-link:hover {
  color: var(--pa-navy);
  border-color: transparent transparent var(--pa-border);
}

.lang-tabs .nav-link.active {
  color: var(--pa-navy);
  font-weight: 600;
  background: #fff;
  border-color: var(--pa-border) var(--pa-border) #fff;
  border-top: 2px solid var(--pa-navy);
}

.lang-tabs .tab-content {
  border: 1px solid var(--pa-border);
  border-top: 0;
  border-radius: 0 0 0.3rem 0.3rem;
  padding: 1rem 1rem 0.25rem;
}

.lang-tabs .tab-pane > :last-child {
  margin-bottom: 0.75rem;
}

.lang-tabs figure {
  margin: 0.5rem 0 1rem;
}

/* ---- Figures ---------------------------------------------------------------- */

main figure img,
main p > img {
  max-width: 100%;
  height: auto;
}

main .float {
  margin: 1.25rem 0 1.5rem;
}

main .float img {
  display: block;
  max-width: 100%;
  height: auto;
}

main figcaption,
main .figcaption,
main .caption {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--pa-muted);
  margin-top: 0.5rem;
  max-width: 44rem;
}

/* ---- Home page ------------------------------------------------------------ */

.template-home .page-header {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.template-home .page-header h1,
.template-home main > h1,
.template-home main h1 {
  font-family: var(--bs-font-monospace);
  font-weight: 600;
  font-size: 3rem;
  letter-spacing: -0.03em;
  color: var(--pa-navy);
  margin-bottom: 0.75rem;
}

.template-home .lead {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.45;
  max-width: 38rem;
  margin-bottom: 1.25rem;
}

.home-actions {
  margin-bottom: 0.5rem;
}

.home-actions .btn {
  margin: 0 0.5rem 0.5rem 0;
}

.home-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  margin: 1.25rem 0 0.5rem;
}

.home-features p {
  margin: 0;
  max-width: none;
  padding-top: 0.75rem;
  border-top: 2px solid var(--pa-navy);
}

.home-figure {
  margin: 2rem 0 0.5rem;
  max-width: 44rem;
}

.home-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--pa-border);
  border-radius: 0.3rem;
}

.home-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
}

/* pandoc wraps the links in a paragraph; let them be the grid items. */
.home-cards > p {
  display: contents;
}

.home-card {
  display: block;
  padding: 0.9rem 1rem;
  border: 1px solid var(--pa-border);
  border-radius: 0.3rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.home-card:hover,
.home-card:focus-visible {
  border-color: var(--pa-navy);
  box-shadow: inset 0 -2px 0 var(--pa-navy);
  color: inherit;
  text-decoration: none;
}

.home-card-title {
  display: block;
  font-weight: 600;
  color: var(--pa-navy);
  margin-bottom: 0.15rem;
}

.home-card-text {
  display: block;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--pa-muted);
}

@media (max-width: 767.98px) {
  /* as specific as the 3rem rule above, so that it wins on phones (beside
     the logo, "powerape" at 3rem breaks into two lines) */
  .template-home .page-header h1,
  .template-home main h1 {
    font-size: 2.25rem;
  }

  .template-home .lead {
    font-size: 1.125rem;
  }

  .home-features,
  .home-cards {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .home-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Tables in the guides ----------------------------------------------- */

main table {
  font-size: 0.9rem;
}

/* Code in tables may wrap: the R and Stata calls in "R and Stata side by
   side" are long, and kept on one line they push the last column under the
   page's table of contents. */
main table code {
  white-space: normal;
}