/* --- Light mode (default scheme) ----------------------------------------- */
:root > * {
    /* Primary color — header, sidebar, text links (in classic variant) */
    --md-primary-fg-color: #286071;
    --md-primary-fg-color--light: #286071;
    --md-primary-fg-color--dark: #286071;

    /* Accent color — hovered links, buttons, scrollbars */
    /* --md-accent-fg-color:         #526cfe; */
    /* --md-accent-bg-color:         #526cfe; */
    /* --md-accent-bg-color--light:  #526cfe1a; */

    /* Default foreground (text) colors */
    /* --md-default-fg-color:          rgba(0, 0, 0, 0.87);  */
    /* --md-default-fg-color--light:   rgba(0, 0, 0, 0.54);  */
    /* --md-default-fg-color--lighter: rgba(0, 0, 0, 0.32);  */
    /* --md-default-fg-color--lightest:rgba(0, 0, 0, 0.07);  */

    /* Default background colors */
    /* --md-default-bg-color: #ffffff; */
    /* --md-default-bg-color--light: #ffffff; */
    --md-default-bg-color--lighter: #ffffff;
    --md-default-bg-color--lightest: #ffffff;

    /* Typography colors */
    /* --md-typeset-color:            rgba(0, 0, 0, 0.87); */
    /* --md-typeset-a-color:          var(--md-accent-fg-color); */

    /* Code block colors */
    /* --md-code-fg-color:            #36464e; */
    --md-code-bg-color: #f4ecd6;
    /* --md-code-bg-color--light:     #f5f5f5b3; */
    /* --md-code-bg-color--lighter:   #f5f5f54d; */

    /* Code syntax highlighting */
    /* --md-code-hl-color:            #4287ff; */
    /* --md-code-hl-color--light:     #4287ff1a; */
    /* --md-code-hl-number-color:     #d52a2a; */
    /* --md-code-hl-special-color:    #db1457; */
    /* --md-code-hl-function-color:   #a846b8; */
    /* --md-code-hl-constant-color:   #6e59d9; */
    /* --md-code-hl-keyword-color:    #3f6ec6; */
    /* --md-code-hl-string-color:     #1c7d4e; */
    /* --md-code-hl-name-color:       var(--md-code-fg-color); */
    /* --md-code-hl-operator-color:   var(--md-default-fg-color--light); */
    /* --md-code-hl-punctuation-color:var(--md-default-fg-color--light); */
    /* --md-code-hl-comment-color:    var(--md-default-fg-color--light); */
    /* --md-code-hl-generic-color:    var(--md-default-fg-color--light); */
    /* --md-code-hl-variable-color:   var(--md-default-fg-color--light); */

    /* Admonition (callout box) colors */
    /* --md-admonition-fg-color: var(--md-default-fg-color); */
    /* --md-admonition-bg-color: var(--md-default-bg-color); */

    /* Warning banner */
    /* --md-warning-fg-color:         #000000; */
    /* --md-warning-bg-color:         #ff9100; */

    /* Table colors */
    /* --md-typeset-table-color:      rgba(0, 0, 0, 0.12); */
    /* --md-typeset-table-color--light: rgba(0, 0, 0, 0.035); */

    /* Inline markup colors */
    /* --md-typeset-mark-color:       #ffff0080; */
    /* --md-typeset-del-color:        #f5503d26; */
    /* --md-typeset-ins-color:        #0bd57026; */
    /* --md-typeset-kbd-color:        #fafafa; */
    /* --md-typeset-kbd-accent-color: #ffffff; */
    /* --md-typeset-kbd-border-color: #b8b8b8; */

    /* Fonts — override with any Google Font name */
    /* --md-text-font: "Roboto"; */
    /* --md-code-font: "Roboto Mono"; */
}

/* --- Mermaid diagrams ----------------------------------------------------- */
/* The theme leaves diagrams flush left; center them within the content area. */
.md-typeset .mermaid {
    text-align: center;
}

/* --- Embedded interface demos -------------------------------------------- */
.md-typeset .ui-demo-figure {
    margin: 1.5rem 0;
    width: 100%;
}

.md-typeset .ui-demo-flow {
    display: flow-root;
    margin: 1.5rem 0;
}

.md-typeset .ui-demo-flow--float .ui-demo-copy--lead > :first-child {
    margin-top: 0;
}

.md-typeset .ui-demo-flow--float .ui-demo-copy--lead > :last-child {
    margin-bottom: 0;
}

.md-typeset .ui-demo-frame {
    display: block;
    width: 100%;
    height: 30rem;
    border: 0;
    background: transparent;
}

.md-typeset .ui-demo-frame--details {
    height: 43rem;
}

.md-typeset .ui-demo-frame--viewer {
    margin: 0.75rem 0 1.5rem;
}

.md-typeset .ui-demo-frame--georeference {
    height: 38rem;
    margin: 0.75rem 0 1.5rem;
}

.md-typeset .ui-demo-figure figcaption {
    margin-top: 0.5rem;
    color: var(--md-default-fg-color--light);
    font-size: inherit;
    text-align: center;
}

@media screen and (min-width: 45em) {
    .md-typeset .ui-demo-flow--float .ui-demo-copy--lead {
        float: left;
        width: 55%;
    }

    .md-typeset .ui-demo-flow--float .ui-demo-figure {
        float: right;
        margin: 0;
        width: 42%;
    }

    .md-typeset .ui-demo-flow--card .ui-demo-figure {
        max-width: 15rem;
    }
}

/* --- Badges --------------------------------------------------------------- */
/* Inline equivalents of the badges shown on image cards. Colors are the app's
   Bootstrap theme colors (see docs/usage/demos/ui-demo.css); the orange needs
   dark text to stay readable, so text color is set per-modifier.
   Usage: **Easy**{ .badge .badge--easy } */
.md-typeset .badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    border-radius: 0.375rem;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.md-typeset .badge--easy {
    background-color: #527448;
    color: #fff;
}

.md-typeset .badge--medium {
    background-color: #dc8434;
    color: #0b1722;
}

.md-typeset .badge--difficult {
    background-color: #d52e1c;
    color: #fff;
}

.md-typeset .badge--skip {
    background-color: #747375;
    color: #fff;
}

/* --- Dark mode (slate scheme) -------------------------------------------- */
/* Uncomment to customize dark mode separately.                              */
[data-md-color-scheme="slate"] {
    --md-default-fg-color: #f4ecd6;
    --md-default-bg-color: #0b1722;
    --md-code-bg-color: #272727;
    --md-typeset-a-color: #afacaf;
}