/*
 * MRS branding for the stock daux.io theme ("daux-blue").
 *
 * daux picks this file up automatically (docs/style.css -> <base_url>style.css)
 * and loads it after the theme CSS. The theme is driven by CSS variables, so
 * most of the MRS look is just a different set of variables.
 *
 * The MRS documentation is designed for a light background only. The theme's
 * dark mode (toggle + prefers-color-scheme) is therefore switched off: the
 * light values are also applied to `body.dark`, and the toggle is hidden.
 */

:root,
body.dark {
    /* brand */
    --color-primary: #2272B4;
    --color-secondary: #3f4657;
    --color-text: #222;
    --brand-color: #fff;
    --brand-background: #2272B4;
    --body-background: #fff;

    /* sidebar */
    --sidebar-background: #fff;
    --sidebar-border-color: #e9e7e9;
    --sidebar-link-color: var(--color-secondary);
    --sidebar-link-active-background: #aecdf7;
    --sidebar-link-hover-background: #aecdf7;
    --sidebar-link-arrow-color: var(--color-secondary);
    --sidebar-link-secondary-color: var(--color-text);

    /* page */
    --code-tag-color: var(--color-secondary);
    --code-tag-background-color: var(--lightest-gray);
    --code-tag-border-color: var(--light-gray);
    --pager-background-color: var(--body-background);
    --pager-border-color: var(--lighter-gray);
    --pager-hover-background-color: #aecdf7;
    --toc--border-color: #efefef;
    --toc--inner-border-color: var(--lighter-gray);
    --page-header-separator-color: #eee;
    --page-header-details-color: var(--gray);
    --hr-color: var(--lighter-gray);
    --table-border: var(--light-gray);
    --table-background: #fff;
    --table-background-odd: var(--lightest-gray);
    --table-header-background: var(--lighter-gray);
    --search-field-color: #555;
    --search-field-border-color: var(--lighter-gray);
    --search-field-background: #fff;

    /* callouts / details */
    --admonition-bg-color: #fafafa;
    --admonition-title-bg-color: #efefef;
    --admonition-info-border-color: var(--color-info);
    --admonition-info-background: #e6fcff;
    --admonition-info-title-background: #b3f5ff;
    --admonition-warning-border-color: var(--color-warning);
    --admonition-warning-background: #fff4e6;
    --admonition-warning-title-background: #ffdeb3;
    --admonition-danger-border-color: var(--color-danger);
    --admonition-danger-background: #ffe6ef;
    --admonition-danger-title-background: #ffb3ce;
    --details-bg-color: #efefef;

    /* landing page */
    --homepage-navbar-background: #2272B4;
    --homepage-hero-background: #fff;
    --homepage-hero-color: var(--color-secondary);
    --homepage-bullet-color: #2272B4;
    --homepage-footer-color: #2272B4;
    --homepage-footer-background: #fff;
    --homepage-body-background: #fff;
    --hero-button-block-background: #fff;
    --hero-button-primary-border-color: var(--color-secondary);
    --hero-button-primary-color: #f7f7f7;
    --hero-button-primary-background: #2272B4;
    --hero-button-secondary-border-color: var(--color-secondary);
    --hero-button-secondary-color: var(--color-secondary);
    --hero-button-secondary-background: #c5c5cb;
}

/* dark mode is not supported, see above */
.DarkModeToggler {
    display: none;
}

/* justified body text on wide screens; links and landing page lists stay left-aligned */
@media (min-width: 850px) {
    html {
        text-align: justify;
    }
}

.s-content a,
.HomepageContent ul li,
.HomepageContent ol li {
    text-align: left;
}

/* images are centered */
.s-content img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/* small button icons inside a sentence (class="inline-image") stay in the text line */
.s-content img.inline-image {
    display: inline;
    margin: 0 2px;
    vertical-align: middle;
}

/* videos are centered and never wider than the column; the width/height attributes in the markup
   are only the maximum size */
.s-content video {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1em auto;
}

/* the "#" permalink next to headings (visible on hover) must not shift the heading text */
.s-content h1,
.s-content h2,
.s-content h3,
.s-content h4,
.s-content h5,
.s-content h6 {
    position: relative;
}

.s-content .Permalink {
    position: absolute;
    left: -.9em;
    margin-left: 0;
}

/* the page body is MRS blue on wide screens (visible below short pages like the landing page) */
@media screen and (min-width: 769px) {
    body {
        background-color: var(--color-primary);
    }
}

.Columns__right__content {
    background-color: var(--body-background);
}

.Links,
.Twitter {
    font-size: .75rem;
}

@media (min-width: 969px) {
    .HomepageContent {
        padding: 10px 20px;
    }
}

/* table of contents box */
.TableOfContentsContainer {
    max-width: 75%;
}

.TableOfContentsContainer__title {
    padding: .5rem 1rem;
    font-weight: bold;
    background: var(--color-primary);
    color: #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.TableOfContentsContainer ul {
    list-style-type: none;
}

.TableOfContentsContainer ul ul {
    padding-left: .75em;
}

.TableOfContentsContainer__content {
    border-width: 1px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, .25);
    margin-bottom: 1em;
}