/* Keep documentation compact and readable across themes.
 *
 * IMPORTANT: Material only uses the three-column (nav | content | toc)
 * layout on wide viewports.  Below 76.25em the primary nav becomes an
 * off-canvas drawer that is parked at "left: -12.1rem" and revealed by a
 * transform, and below 60em the table of contents is folded into that
 * drawer.  Any override of the sidebar geometry, of the drawer titles or
 * of the content gutters therefore has to be scoped to the viewport width
 * where that layout actually applies, otherwise the drawer pokes out of
 * the left edge of the screen and the body text runs under it.
 */

html,
body {
    line-height: 1.6;
}

/* Denser typography for desktop reading; phones and small tablets keep
 * Material's stock 125% root size so body text stays legible. */
@media screen and (min-width: 60em) {
    html,
    body {
        font-size: 18px;
    }
}

[data-md-color-scheme="default"] {
    --md-default-bg-color: #ffffff;
    --md-default-fg-color: #24292f;
    --md-default-fg-color--light: #57606a;
    --md-default-fg-color--lighter: #6e7781;
    --md-default-fg-color--lightest: #8c959f;
    --md-typeset-a-color: #0969da;
    --md-accent-fg-color: #0969da;
    --md-primary-fg-color: #ffffff;
    --md-primary-bg-color: #24292f;
}

[data-md-color-scheme="slate"] {
    --md-default-bg-color: #0d1117;
    --md-default-fg-color: #e6edf3;
    --md-default-fg-color--light: #9da7b3;
    --md-default-fg-color--lighter: #7d8590;
    --md-default-fg-color--lightest: #6e7681;
    --md-typeset-a-color: #58a6ff;
    --md-accent-fg-color: #58a6ff;
    --md-primary-fg-color: #0d1117;
    --md-primary-bg-color: #e6edf3;
}

.md-header {
    box-shadow: none;
    border-bottom: 1px solid #d8dee4;
}

[data-md-color-scheme="slate"] .md-header {
    border-bottom-color: #30363d;
}

.md-header__inner {
    min-height: 2.8rem;
}

.md-header__title {
    font-size: 0.8rem;
}

.md-main__inner {
    margin-top: 0;
}

.md-grid {
    max-width: 96rem;
}

/* Primary navigation ---------------------------------------------------- */

/* Only touch the primary sidebar once it is a real sidebar.  Widening it
 * while it is still the off-canvas drawer leaves the difference between
 * the override and Material's "left: -12.1rem" parking position visible
 * as a stripe down the left-hand side of every page. */
@media screen and (min-width: 76.25em) {
    .md-sidebar--primary {
        width: 13rem;
    }

    .md-sidebar__scrollwrap {
        padding-top: 0.6rem;
    }

    /* Redundant on desktop, but on narrow screens these labels are the
     * drawer header and the "back" buttons of every nested nav level. */
    .md-nav--primary .md-nav__title {
        display: none;
    }

    .md-nav--primary .md-nav__item {
        margin: 0;
    }

    /* Tight rows are fine for a mouse; the drawer keeps Material's larger
     * tap targets. */
    .md-nav--primary .md-nav__link {
        font-size: 0.88rem;
        margin-top: 0;
        padding-top: 0.24rem;
        padding-bottom: 0.24rem;
    }

    .md-nav__item--section > .md-nav__link {
        font-size: 0.84rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--md-default-fg-color--light);
        margin-top: 0.85rem;
    }
}

.md-nav__link--active,
.md-nav__link:hover {
    color: var(--md-typeset-a-color);
}

/* Table of contents ----------------------------------------------------- */

/* Below 60em the secondary nav is rendered inside the drawer, so it must
 * keep Material's own geometry there. */
@media screen and (min-width: 60em) {
    .md-sidebar--secondary {
        width: 11rem;
    }

    .md-nav--secondary .md-nav__title {
        font-size: 0.84rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--md-default-fg-color--light);
    }

    .md-nav--secondary .md-nav__link {
        font-size: 0.88rem;
        padding-top: 0.18rem;
        padding-bottom: 0.18rem;
    }
}

/* Content --------------------------------------------------------------- */

.md-content {
    max-width: 68rem;
}

/* No margin override here: Material already gutters the content column
 * (and widens the gutters once the sidebars appear).  Auto margins would
 * collapse to zero on every viewport narrower than the max-width above,
 * putting the text hard against the edge of the screen. */
.md-content__inner {
    padding-top: 1.2rem;
}

h1 {
    font-size: 2.05rem;
    margin: 0.6rem 0 0.8rem;
}

h2 {
    font-size: 1.62rem;
    margin: 1.2rem 0 0.6rem;
}

h3 {
    font-size: 1.34rem;
    margin: 1rem 0 0.5rem;
}

h4 {
    font-size: 1.16rem;
    margin: 0.85rem 0 0.45rem;
}

/* Headings are sized in viewport-independent rem, so long words in a
 * page title can overflow a phone screen; let them wrap instead. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
    overflow-wrap: break-word;
}

p,
ul,
ol {
    margin-bottom: 0.7rem;
}

li {
    margin-bottom: 0.25rem;
}

code,
pre,
kbd {
    font-size: 0.9em;
}

.md-typeset code {
    border-radius: 3px;
}

.md-typeset pre > code {
    font-size: 0.96rem;
}

/* Long paths, flags and URLs in inline code are common here and would
 * otherwise force the whole page to scroll sideways on a phone. */
.md-typeset code {
    overflow-wrap: break-word;
}

img {
    max-width: 100%;
    height: auto;
}