:root {
    --md-primary-fg-color: #289151;
    --md-accent-fg-color: #289151;
    --md-primary-fg-color--light: #75e8a2;
    --md-primary-fg-color--dark: #208047;
    /* "custom" primary/accent only sets the two variables above; every
       derived variable below is left undefined by the theme and quietly
       falls back to its default (indigo) value unless we set it too */
    --md-primary-bg-color: #ffffff;
    --md-primary-bg-color--light: #ffffffb3;
    --md-accent-fg-color--transparent: #2891511a;
    /* custom */
    --code-bg-color-dark: #414141;
    --footer-text-color: #b5d0c0;
    --footer-link-hover-color: #ffffff;
}

html {
    background-color: var(--md-primary-fg-color);
}

::selection {
    color: #ffffff;
    background-color: var(--md-primary-fg-color);
}

/* The "modern" theme variant gives the header a translucent neutral
   background instead of "classic"'s solid primary-color bar; restore
   the colored bar look */
.md-header {
    background-color: var(--md-primary-fg-color);
    color: var(--md-primary-bg-color);
}

/* Footer colors */
.md-footer-meta__inner {
    background-color: var(--md-primary-fg-color);
}

/* Footer text and links */
.md-copyright, html .md-footer-meta.md-typeset a:not(:focus, :hover), .md-social__link:not(:focus, :hover),
html .md-footer-meta.md-typeset a:not(:focus, :hover) {
    color: var(--footer-text-color);
}

html .md-footer-meta.md-typeset a:focus,
html .md-footer-meta.md-typeset a:hover {
    color: var(--footer-link-hover-color);
}

.md-grid {
    /* make the content area stretch to the full available screen space */
    max-width: initial;
}

/* The search button follows --md-default-fg-color, which is scheme-dependent
   (dark in light mode, light in dark mode) - fine against modern's neutral
   header, but low-contrast in light mode against our colored header. Use the
   same light color in both modes, matching how "classic" styles it. */
.md-search__button {
    color: var(--md-primary-bg-color);
    background-color: #00000042;
}

/* :hover/:focus has its own scheme-dependent color/background in the theme
   (and a pseudo-class beats our plain .md-search__button on specificity, so
   it wins even though this file loads after main.css) */
.md-search__button:focus,
.md-search__button:hover {
    color: var(--md-primary-bg-color);
    background-color: #00000060;
}

/* The magnifying-glass icon is a CSS mask filled via background-color (not
   color/currentColor), and the "Ctrl+K" badge has its own background -
   neither follows the .md-search__button color override above */
.md-search__button:before {
    background-color: var(--md-primary-bg-color);
}

.md-search__button:after {
    background-color: hsla(0, 0%, 0%, 0.54);
}

/* Adjust illustration colors for dark mode */
[data-md-color-scheme=slate] img[src$="illustration"] {
    filter: invert(100%) sepia(0%) saturate(7496%) hue-rotate(56deg) brightness(93%) contrast(92%);
}

/* GLightbox paints a background behind the lightbox image; the illustrations
   are transparent, so without this the invert/saturate filter above turns
   that background green instead of leaving it transparent over the overlay */
[data-md-color-scheme=slate] .gslide-image img[src$="illustration"] {
    background: none;
}

[data-md-color-scheme=slate] code {
    background-color: var(--code-bg-color-dark);
}

/* The manual numbers its sub-steps (a), (b), (c) under each numbered step;
   nested ordered lists reproduce that without hard-coding the letters */
.md-typeset ol ol {
    list-style-type: lower-alpha;
}

.md-typeset ol ol ol {
    list-style-type: lower-roman;
}

/* Hidden page markers ([](){ #p-em-11 }) must not take up space or catch
   clicks; they only serve as link targets for cross-references */
.md-typeset a[id^="p-"]:empty {
    display: inline-block;
    height: 0;
    width: 0;
}

.md-typeset a[id^="p-"]:empty:only-child {
    display: none;
}

/* Move the search bar to the right on wide screens */
@media screen and (min-width: 76.25em) {
    [dir="ltr"] .md-header__source {
        margin-left: 0.4rem;
    }
}

@media screen and (min-width: 60em) {
    .md-header__source {
        width: auto;
    }
}