/* put wide header on top */
.custom-global-header {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    left: 0;
    right: 0;
    box-sizing: border-box;

    height: 50px;
    background: #ffffff;
    color: #000000;
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 999;
    position: fixed;
    top: 0;
}

/* Sepia theme */
.book.color-theme-1 .custom-global-header {
    background-color: #f3eacb;
    color: #704214;
    border-bottom-color: #d8c99b;
}

/* Night theme */
.book.color-theme-2 .custom-global-header {
    background-color: #1f1f1f;
    color: #c1c6cc;
    border-bottom-color: #444444;
}

/* highlight table header (mostly used for parameters) */
.markdown-section table th {
    background-color: #f5f5fa;
    color: #000000;
}

/* put contents center */
.book {
    top: 50px !important;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

body {
    background-color: #f9f9f9;
}

.book-summary, .book-body {
    background-color: #ffffff;
}

/*
  disable sidebar toggle button not to conflict with custom header area
  NOTE: 's' shortcut key is not disabled yet.
*/
.book-header > a.js-toolbar-action:has(.fa-align-justify) {
    display: none;
}

.book.color-theme-1 #book-search-input {
    background-color: #f3eacb;
    color: #704214;
}

.book.color-theme-2 #book-search-input {
    background-color: #1f1f1f;
    color: #c1c6cc;
}

/* FOOTER.md holds supplementary information, so render it smaller */
.markdown-section .localized-footer {
    font-size: 0.75em;
}

/* accent color of the partial-summary navigation cards */
:root { --ps-accent: #4183c4; }
.book.color-theme-1 { --ps-accent: #8b5a2b; }  /* Sepia */
.book.color-theme-2 { --ps-accent: #6aa9e9; }  /* Night */

/*
  Show the navigation links generated by partial-summary as a grid of cards.

  partial-summary appends the link list to the end of page.content, then
  localized-footer appends its contents right after it with a single newline,
  so the footer ends up inside the last <li>. That nested .localized-footer is
  what identifies the list; an adjacent sibling selector does not match it.

  Pages whose body just ends with a bullet list are nested the same way, so
  narrow it down further (note that :has() cannot be nested in another :has()):
    :has(> li > a:only-of-type)         -> items are bare links, not sentences
    :not(:has(> li > a[href^="http"]))  -> no external links
*/
.markdown-section > ul:has(> li > .localized-footer):has(> li > a:only-of-type):not(:has(> li > a[href^="http"])) {
    display: grid;
    /* at most 2 columns: every track takes half of the list width (minus the
       gap), and falls back to a single column once two 16rem cards no longer fit */
    grid-template-columns: repeat(
        auto-fit,
        minmax(max(min(100%, 16rem), calc(50% - 0.5rem)), 1fr)
    );
    gap: 1rem;
    margin: 2rem 0 3rem;
    padding: 0;

    /* promote the links to grid items, so that the footer carried by the last
       <li> gets a row of its own instead of becoming a part of a card */
    & > li {
        display: contents;
    }

    & > li > .localized-footer {
        grid-column: 1 / -1;
        margin-top: 1rem;
    }

    & > li > a {
        display: flex;
        align-items: center;
        min-height: 5rem;
        padding: 1rem 1.25rem;

        color: inherit;  /* follow the text color of the current theme */
        border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
        border-radius: 0.5rem;

        text-decoration: none;
        transition: all 0.15s ease;
    }

    & > li > a::after {
        content: "\203A";  /* U+203A SINGLE RIGHT-POINTING ANGLE QUOTATION MARK */
        margin-left: auto;
        padding-left: 1rem;

        color: var(--ps-accent);
        font-size: 1.5rem;
        line-height: 1;
    }

    & > li > a:hover {
        color: var(--ps-accent);
        background-color: color-mix(in srgb, var(--ps-accent) 6%, transparent);
        border-color: var(--ps-accent);
    }
}