/* ---------------------------------------------------------------------------
 * Obarun adapter for mkdocs-material.
 *
 * Maps the Obarun design tokens onto Material's own CSS variables, and styles
 * the components every Obarun Material site shares. Requires obarun.css to be
 * loaded first.
 *
 * Copy this file into a project once, alongside obarun.css, and never edit the
 * copy in place. Project specific rules go in the project's own stylesheet.
 *
 * Reference: ~/Obarun/graphics/  (see README.md)
 * ------------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Chivo:wght@700;800;900&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
    /* Material resolves these through its own font fallback chain. */
    --md-text-font: "IBM Plex Sans";
    --md-code-font: "IBM Plex Mono";
}

/* ---------------------------------------------------------------------------
 * Colour scheme
 * ------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] {
    --md-hue: 210;

    --md-default-bg-color: var(--ob-ink-900);
    --md-default-bg-color--light: var(--ob-ink-800);
    --md-default-bg-color--lighter: var(--ob-ink-700);
    --md-default-bg-color--lightest: var(--ob-ink-600);

    --md-default-fg-color: var(--ob-text);
    --md-default-fg-color--light: var(--ob-muted);
    --md-default-fg-color--lighter: var(--ob-dim);
    --md-default-fg-color--lightest: var(--ob-line);

    --md-primary-fg-color: var(--ob-brand);
    --md-primary-fg-color--light: var(--ob-brand-lit);
    --md-primary-fg-color--dark: var(--ob-ink-850);
    --md-primary-bg-color: var(--ob-text);
    --md-primary-bg-color--light: var(--ob-muted);

    --md-accent-fg-color: var(--ob-brand-lit);
    --md-accent-fg-color--transparent: rgba(36, 148, 190, 0.1);
    --md-accent-bg-color: var(--ob-ink-900);

    --md-typeset-color: var(--ob-text);
    --md-typeset-a-color: var(--ob-brand-lit);
    --md-typeset-mark-color: rgba(36, 148, 190, 0.3);

    --md-code-bg-color: var(--ob-ink-800);
    --md-code-fg-color: var(--ob-text);
    --md-code-hl-comment-color: var(--ob-dim);
    --md-code-hl-string-color: var(--ob-ok);
    --md-code-hl-number-color: var(--ob-signal);
    --md-code-hl-keyword-color: var(--ob-brand-lit);
    --md-code-hl-function-color: var(--ob-brand-lit);
    --md-code-hl-name-color: var(--ob-text);
    --md-code-hl-operator-color: var(--ob-muted);
    --md-code-hl-punctuation-color: var(--ob-muted);
    --md-code-hl-variable-color: var(--ob-signal);

    --md-footer-bg-color: var(--ob-ink-850);
    --md-footer-bg-color--dark: var(--ob-ink-900);
    --md-footer-fg-color: var(--ob-text);
    --md-footer-fg-color--light: var(--ob-muted);
    --md-footer-fg-color--lighter: var(--ob-dim);

    --md-shadow-z1: 0 4px 10px rgba(0, 0, 0, 0.35);
    --md-shadow-z2: 0 6px 18px rgba(0, 0, 0, 0.45);
    --md-shadow-z3: 0 10px 26px rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------------------
 * Header and navigation tabs, dark like the site nav, not brand-filled
 * ------------------------------------------------------------------------- */

.md-header {
    background-color: var(--ob-ink-850);
    border-bottom: 1px solid var(--ob-line);
    box-shadow: none;
}

.md-header__title {
    font-family: var(--ob-display);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* The mark is taller than it is wide, so constrain the height only. */
.md-header__button.md-logo img {
    height: 1.6rem;
    width: auto;
}

.md-tabs {
    background-color: var(--ob-ink-850);
    border-bottom: 1px solid var(--ob-line);
}

.md-tabs__link {
    color: var(--ob-muted);
    opacity: 1;
    font-weight: 500;
    transition: color 0.18s;
}

.md-tabs__link:hover {
    color: var(--ob-text);
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link--active {
    color: var(--ob-brand-lit);
}

.md-search__form {
    background-color: var(--ob-ink-700);
    border: 1px solid var(--ob-line);
}

.md-search__form:hover {
    background-color: var(--ob-ink-600);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    background-color: var(--ob-ink-800);
}

/* ---------------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------------- */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
    font-family: var(--ob-display);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--ob-text);
}

.md-typeset h1 {
    font-weight: 900;
}

.md-typeset h2 {
    margin-top: 2.2em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--ob-line);
}

.md-typeset a {
    text-underline-offset: 0.2em;
}

.md-typeset a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Code, tables, quotes
 * ------------------------------------------------------------------------- */

.md-typeset pre > code,
.md-typeset .highlight {
    border: 1px solid var(--ob-line);
    border-radius: var(--ob-radius);
}

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

.md-typeset table:not([class]) {
    border: 1px solid var(--ob-line);
    border-radius: var(--ob-radius);
    background-color: var(--ob-ink-800);
}

.md-typeset table:not([class]) th {
    background-color: var(--ob-ink-700);
    font-family: var(--ob-display);
    font-weight: 700;
    color: var(--ob-text);
}

.md-typeset table:not([class]) td {
    border-top: 1px solid var(--ob-line);
}

.md-typeset blockquote {
    border-left: 2px solid var(--ob-line-strong);
    color: var(--ob-muted);
}

/* Wide content scrolls inside its own box, the page never scrolls sideways. */
.md-typeset .md-typeset__table,
.md-typeset .highlight {
    overflow-x: auto;
}

/* ---------------------------------------------------------------------------
 * Admonitions
 * ------------------------------------------------------------------------- */

.md-typeset .admonition,
.md-typeset details {
    background-color: var(--ob-ink-800);
    border: 1px solid var(--ob-line);
    border-left-width: 3px;
    border-radius: var(--ob-radius);
    box-shadow: none;
    font-size: 0.75rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
    background-color: transparent;
    font-family: var(--ob-display);
    font-weight: 700;
}

.md-typeset .note,
.md-typeset .info {
    border-left-color: var(--ob-brand);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .info > .admonition-title::before {
    background-color: var(--ob-brand);
}

.md-typeset .warning,
.md-typeset .danger,
.md-typeset .caution {
    border-left-color: var(--ob-signal);
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .danger > .admonition-title::before,
.md-typeset .caution > .admonition-title::before {
    background-color: var(--ob-signal);
}

.md-typeset .tip,
.md-typeset .success,
.md-typeset .example {
    border-left-color: var(--ob-ok);
}

.md-typeset .tip > .admonition-title::before,
.md-typeset .success > .admonition-title::before,
.md-typeset .example > .admonition-title::before {
    background-color: var(--ob-ok);
}

/* ---------------------------------------------------------------------------
 * Card grids, the navigation pattern used on every section index
 * ------------------------------------------------------------------------- */

.md-typeset .grid.cards > ul > li {
    background-color: var(--ob-ink-700);
    border: 1px solid var(--ob-line);
    border-radius: var(--ob-radius);
    box-shadow: none;
    transition: border-color 0.18s, transform 0.18s;
}

.md-typeset .grid.cards > ul > li:hover {
    border-color: var(--ob-line-strong);
    transform: translateY(-2px);
    box-shadow: var(--md-shadow-z2);
}

.md-typeset .grid.cards > ul > li > hr {
    background-color: var(--ob-line);
    margin: 0.6em 0;
}

.md-typeset .grid.cards > ul > li > p:first-child > strong {
    font-family: var(--ob-display);
    font-size: 1.05em;
}

/* ---------------------------------------------------------------------------
 * Sidebars and footer
 * ------------------------------------------------------------------------- */

.md-nav__title {
    font-family: var(--ob-display);
    font-weight: 700;
    color: var(--ob-muted);
}

.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
    color: var(--ob-brand-lit);
}

.md-footer {
    border-top: 1px solid var(--ob-line);
}

.md-footer-meta {
    background-color: var(--ob-ink-900);
}

.md-source {
    color: var(--ob-muted);
}

/* ---------------------------------------------------------------------------
 * Accessibility
 * ------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.md-nav__link:focus-visible,
.md-tabs__link:focus-visible {
    outline: 2px solid var(--ob-brand-lit);
    outline-offset: 2px;
}

/* Same rule as the site mockup, the only place !important is allowed. */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}