/* ========================================
    CSS overrides for Gaffer documentation
======================================== */

/* As of 2019, the most up-to-date reset */
@import url("normalize.css");

body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    background-color: #fff;
}

/* ========================================
    Navigation sidebar
======================================== */

/* Remove nav link dotted outline */
.wy-menu-vertical a {
    outline: none;
}

/* Remove on-click active link BG colour */
.wy-menu-vertical a:active {
    background-color: initial;
}

/* Match nav main BG to Gaffer brand colors */
.wy-side-nav-search {
    background-color: #343131;
}

/* Match mobile nav background to Gaffer brand colors */
.wy-nav-top {
    background-color: #b92227;
}

/* Increase nav version text color visibility */
.wy-side-nav-search > div.version {
    color: inherit;
}

/* Add "Gaffer" in front of nav version (this sidesteps changing the Sphinx template) */
.wy-side-nav-search > div.version::before {
    content: "Gaffer ";
}

/* Make nav search simpler and a little duller when not focused */
.wy-side-nav-search input[type="text"] {
    border-width: 2px;
    border-color: transparent;
    background-color: lightgrey;
    background-clip:  padding-box;
    transition: all 0.3s linear;
}

/* Transition search bar to white bg with Gaffer red border on focus */
.wy-side-nav-search input[type="text"]:focus {
    border-color: #b92227;
    background-color: white;
}

/* Give all nav links a highlight on hover */
.wy-menu-vertical li.current a:hover {
    background-color: rgba(255, 255, 255, 0.6) !important;
    transition: background-color 0.1s linear;
}

/* Make all unrolled nav links the same color */
.wy-menu-vertical li.toctree-l1.current li.toctree-l2 > a,
.wy-menu-vertical li.toctree-l2.current li.toctree-l3 > a,
.wy-menu-vertical li.toctree-l3.current li.toctree-l4 > a {
    background-color: #dddddd;
    border: none;
}

/* Active nav links: adjust text weight, make duller, remove unnecessary border */
.wy-menu-vertical li.on a,
.wy-menu-vertical li.current > a {
    font-weight: bolder;
    background-color: #dddddd !important;
    border: none;
}

/* Current nav link: make same colour as article BG */
.wy-menu-vertical li.on a[href="#"],
.wy-menu-vertical li.current > a[href="#"] {
    background-color: rgb(252, 252, 252) !important;
}

/* Increase font size for mobile header title */
.wy-nav-top a {
    font-size: 120%;
}

/* Adjust the mobile menu button (and center-align mobile header title) */
.wy-nav-top i {
    display: block;
    position: absolute;
    left: 15px;
    top: 15px;
}

/* ========================================
    Scrollspy navigation
======================================== */

/* Remove grey BG in article negative space */
.wy-nav-content-wrap {
    background-color: unset;
}

#nav-scroll {
    visibility: hidden;
    position: fixed;
    padding: 1rem;
    right: 0;
    width: 287px;
    height: 100%;
    overflow-y: auto;
    box-shadow: 0 1px 15px 0 rgba(128,128,128,0.15);
}

/* Show scrollspy only on desktop */
@media only screen and (min-width: 1400px) {
    #nav-scroll {
        visibility: visible;
    }
}

#nav-scroll a {
    outline: none;
}

#nav-scroll h1 {
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
}

#nav-scroll .nav {
    font-size: 0.8125rem;
}

#nav-scroll .nav ul {
    list-style-type: none;
    margin-bottom: 0.5rem;
}

#nav-scroll .nav ul li {
    padding-left: 1rem;
    margin-bottom: 0.5rem;
}

/* No padding on H2 level */
#nav-scroll .nav > ul > li {
    padding-left: 0;
}

#nav-scroll .nav li:first-child {
    margin-top: 0.5rem;
}

#nav-scroll .nav a {
    display: block;
    padding-left: 0.5rem;
    border-left: 2px solid transparent;
    text-decoration: none;
    color: #b0b0b0;
    line-height: 1.5;
}

#nav-scroll .nav li.active > a {
    color: #404040;
    border-left-color: #808080;
}

/* Hide the lists under H2-level links until active */
#nav-scroll .nav > ul > li > ul {
    /* visibility: hidden; */
    display: none;
    height: 0;
}

#nav-scroll .nav > ul > li.active > ul {
    /* visibility: visible; */
    display: initial;
    height: initial;
}

/* Make sure the lists under H2-level links don't appear on mobile */
@media only screen and (max-width: 1399px) {
    #nav-scroll .nav > ul > li > ul {
        visibility: hidden !important;
    }
}

#nav-scroll .nav a:hover {
    color: #b92227 !important;
}

#nav-scroll .nav li.active > a:hover {
    border-left-color: #b92227;
}

/* ========================================
    Links
======================================== */

/* Add icon after external links */
a[href^="http"]:after {
    content: "\a0\f08e";
    font-family: FontAwesome;
    font-size: 0.625em;
}

/* ========================================
    Headings
======================================== */

/* Restyle headings. Objectives are:
  1. Keep font sizes as small as possible.
  2. Avoid Roboto-Slab (inappropriate as a heading font).
  3. Make H2-H4 (most common) easily distinguishable without being distracting.
  4. Make H5-H6 distinct, but assume they'll be used rarely (if ever).
  */
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: bolder;
    margin: 2rem 0 0.5rem;
}

h1 {
    font-size: 2rem;
}

h2 {
    margin-bottom: 1rem;
    border-bottom: 1px solid #e1e4e5;
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1rem;
}

h5, h6 {
    color: #808080;
}

h5 {
    font-size: 1rem;
    letter-spacing: 1px;
}

h6 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ========================================
    Paragraphs
======================================== */

/* Override paragraph settings to conform to body */
.rst-content p {
    font-size: inherit;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

/* ========================================
    Lists
======================================== */

/* Balance spacing of lists, nested lists, and their contents. Objectives are:
  1. The same 1.5rem spacing between two <p>s before and after a top-level list (but not nested lists).
  2. Consistent margins for images inside lists. Unfortunately, all images in Markdown are inline, making it impossible to distinguish between large and small images in pure CSS.
  3. Small but noticeable spacing between each <li>.
  4. Make line-height consistent with <body>.
  */
.rst-content .section ol,
.rst-content .section ul {
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.rst-content .section ol ol, .rst-content .section ol ul,
.rst-content .section ul ul, .rst-content .section ul ol {
    margin-bottom: 0;
}

.rst-content .section ol p,
.rst-content .section ul p {
    margin-bottom: 0.5rem;
}

.rst-content .section ol li,
.rst-content .section ul li {
    margin-bottom: 0.5rem;
}

.rst-content .section ol > li:first-of-type,
.rst-content .section ul > li:first-of-type {
    margin-top: 0.5rem;
}

/* Adjust margins of admonitions inside lists */
.rst-content .section ol .admonition,
.rst-content .section ul .admonition {
    margin-bottom: 0;
}

/* ========================================
    Images
======================================== */

/* Conform reST figure bottom margin */
.rst-content div.figure {
    margin-bottom: 1.5rem;
}

/* Add border to figures */
.rst-content .figure img {
    border: 1px solid #e8e8e8;
    border-radius: 2px;
}

/* Shrink caption text, adjust line height */
p.caption {
    margin-top: 0.5rem;
    font-size: 0.875em;
    line-height: 1.4em;
}

/* ========================================
    Tables
======================================== */

/* Conform table font size */
.wy-table td,
.rst-content table.docutils td,
.rst-content table.field-list td,
.wy-table th,
.rst-content table.docutils th,
.rst-content table.field-list th {
    font-size: 0.9375em;
}

/* Enable word-wrapping and multiple lines for table cells */
table.docutils td {    
    white-space: initial !important;
    vertical-align: initial !important;
}

/* Fix font size and spacing with multi-line table cells */
table.docutils td p {
    font-size: inherit;
    margin-bottom: 0.75rem;
}

/* Fix erroneous black middle borders in table headers */
table.docutils th.head {
    border-color: #e1e4e5;
}

/* ========================================
    Code formatting
======================================== */

/* Adjust code block */
div[class^='highlight'] pre {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875em;
}

/* Adjust inline code */
code.literal {
    color: #404040 !important;
}

/* Make inline code text dark with slightly dark bg */
.rst-content code {
    border: none;
    background-color: rgba(255, 128, 128, 0.1);
    padding: 2px 2px 1px 2px;
    line-height: 0;
    border-radius: 1px;
    font-size: 0.875em;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Add custom keystroke class */
kbd, code.kbd {
    display: inline-block;
    line-height: 1.25;
    font-size: 0.875em;
    border: 1px solid #a0a0a0;
    border-bottom-width: 2px;
    border-radius: 3px;
    background-color: #fcfcfc;
    padding: 0 3px 1px;
    min-width: 1.5em;
    font-family: inherit;
    color: #404040 !important;
    vertical-align: text-bottom;
    text-align: center;
}

/* Since we've made <kbd> inline-block, force the text to stick to the baseline */
kbd > *, code.kbd > * {
    vertical-align: baseline;
}

.rst-content .tip, .rst-content .note, .rst-content .important, .rst-content .caution,  .rst-content .warning {
    margin-bottom: 1.5rem;
}

/* ========================================
    Admonitions
======================================== */

/* Change icon of "Note" admonition to paperclip */
.admonition.note p.first.admonition-title::before {
    content: "\f0c6";
}

/* Change color of "Note" admonition to muted blue */
.admonition.note {
    background-color: #f3f6f6;
}

.admonition.note p.first.admonition-title {
    background-color: #7796ab;
}

/* Change icon of "Tip" admonition to pointing hand */
.admonition.tip p.first.admonition-title::before {
    content: "\f0a4";
}

/* Change icon of "Important" admonition to star */
.admonition.important p.first.admonition-title::before {
    content: "\f005";
    color: #ffffcc;
}

/* Change color of "Important" admonition to standard blue */
.admonition.important {
    background-color: #e7f2fa;
}

.admonition.important p.first.admonition-title {
    background-color:#6ab0de
}

/* Change icon of "Caution" admonition to triangular exclamation */
.admonition.caution p.first.admonition-title::before {
    content: "\f071";
}

/* Change icon of "Warning" admonition to "no" sign */
.admonition.warning p.first.admonition-title::before {
    content: "\f05e";
}

/* Change color of "Warning" admonition to Gaffer red */
.admonition.warning {
    background-color: #fff0f0;
}

.admonition.warning p.first.admonition-title {
    background-color: #b92227;
}