@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import "theme.css"; /* From sphinx_rtd_theme */

html {
  --text-color: #24292e;
  --heading-color: #404040;
  --link-color: #5097ba;
  --sidebar-background-color: #f2f2f2;
  --content-background-color: #ffffff;
}

body {
  font-family: Lato, 'Helvetica Neue', sans-serif;
  font-weight: 400;
  color: var(--text-color);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, legend, .rst-content .toctree-wrapper p.caption {
  font-family: Lato, 'Helvetica Neue', sans-serif;
  font-weight: 600;
  color: var(--heading-color);
}

p {
  line-height: inherit;
}

a {
  color: var(--link-color);
}
/* underlign lins on hover */
a:hover {
  text-decoration: underline;
}

/* Monospace typography */
footer span.commit code,
.rst-content pre.literal-block,
.rst-content div[class^='highlight'] pre,
.rst-content .linenodiv pre,
.rst-content tt,
.rst-content code,
.rst-content pre,
.rst-content kbd,
.rst-content samp {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
}

/* Inline (backticks) code inspired by docusaurus (which Auspice used previously) */
.rst-content code.literal,
.rst-content tt.literal {
  background-color: rgba(27,31,35,.05);
  border-radius: 3px;
  border: 0;
  color: inherit;
  margin: 0;
  padding: 3.2px 6.4px;
}

/* Sidebar */
.wy-nav-side {
  background: var(--sidebar-background-color);
}

/* main content section */
.wy-nav-content {
  background: var(--content-background-color);
}

/* don't change the background for the area on the RHS of the main content */
.wy-nav-content-wrap {
  background: inherit;
}

/* Sub-project name, version (optional) and link back to the main docs */
.wy-side-nav-search > div.subproject {
  margin-top: -1rem;
}
.wy-side-nav-search > div.subproject > a { /* subproject name */
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--heading-color);
}
.wy-side-nav-search > div.subproject > span { /* version name */
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--heading-color);
}
.wy-side-nav-search > div.subproject + div { /* go back to main docs link */
  font-style: italic;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1rem;
  color: var(--heading-color);
  margin-bottom: 1.2rem;
}

/* Remove blue accent border */
.wy-side-nav-search input[type="text"] {
  border-color: #ccc;
}

.wy-menu-vertical header,
.wy-menu-vertical p.caption,
.wy-menu-vertical a {
  font-size: 1rem;
}

.wy-menu-vertical li ul li a {
  font-weight: 300;
}

/* Remove sidebar TOC link colors, hover states, and borders */
.wy-menu-vertical a {
  color: var(--text-color);
  background: none !important;
}

.wy-menu-vertical a:hover {
  color: var(--link-color) !important;
  background: none !important;
}

.wy-menu-vertical li.current {
  background: none !important;
}

.wy-menu-vertical li.current a {
  border-right: none;
}

.wy-menu-vertical li.current > a {
  border-right: 2px solid var(--link-color);
}

.wy-menu-vertical li.toctree-l1.current > a {
  border-top: none;
  border-bottom: none;
}

/* Remove sidebar TOC heading/caption color */
.wy-menu-vertical p.caption {
  color: var(--heading-color);
}

/* the buttons (previous / next) at the bottom of each doc page */
.wy-nav-content a.btn {
  border: 1px solid #24292e;
  border-radius: 3px;
  color: inherit;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2em;
  padding: 10px;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: background .3s,color .3s;
  box-shadow: none;
  font-family: inherit;
  background-color: inherit;
}
/* following needs !important to override sphynx CSS which itself uses !important */
.wy-nav-content a.btn-neutral {
  background-color: var(--content-background-color) !important;
  color: var(--text-color) !important;
}
.wy-nav-content a.btn-neutral:hover {
  background-color: var(--text-color) !important;
  color: var(--content-background-color) !important;
}

/* Footer styles. Largely chosen to mimic the previous rendering of the docs. See
https://github.com/nextstrain/nextstrain.org/blob/b1e09e57e91ed0c9343e1cd3104877ec3c5344a4/static-site/src/components/Footer/index.jsx
*/
footer {
  color: var(--text-color);
}
footer div {
  margin: 20px 0px 0px 0px;
}
footer .footer-small-text {
  font-weight: 300;
  font-size: 0.9rem;
}
footer .copyright {
  font-weight: 300;
  font-size: 0.8rem;
  text-align: center;
}
footer div.logo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0px;
  padding: 10px 0px 0px 0px;
}
footer a.logo {
  /* Using flex here (to vertically align the child img) causes aspect-ratio issues */
  flex-basis: 120px;
  margin: 10px auto 10px auto;
  text-align: center;
}
footer span.logo {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
footer img.logo {
  display: inline-block;
  vertical-align: middle;
  height: auto;
}
footer p.avatar {
  font-weight: 300;
  font-size: 1.1rem;
  text-align: center;
  margin: 16px 0px -10px 0px;
}
footer div.avatar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 2.5
}
footer div.avatar > span {
  white-space: nowrap;
}
footer div.avatar > span > a {
  font-weight: 300;
  color: #333;
  margin-left: 2px;
  margin-right: 2px;
}
footer div.avatar > span > a > img {
  margin-left: 5px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: middle;
}