/* Improve table readability with a distinct header and subtle zebra striping. */
.doc table.tableblock > thead > tr > th {
    background-color: #e9ecef;
}

.doc table.tableblock > tbody > tr:nth-of-type(even) {
    background-color: #fafafa;
}

/* Let long unbreakable cell content (e.g. property names in code) wrap, so tables
   fit their column instead of overflowing into the TOC. The theme only does this
   for AsciiDoc cells (td.tableblock > .content). */
.doc table.tableblock th,
.doc table.tableblock td {
    overflow-wrap: anywhere;
}

.datastore-logos img {
    vertical-align: middle;
}

/* Keep the footer visible while scrolling, reserving space so the final content stays readable. */
:root {
    --footer-height: 2.5rem;
}

@media screen {
    html {
        scroll-padding-bottom: var(--footer-height);
    }

    main.article {
        padding-bottom: var(--footer-height);
    }

    footer.footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        background: #fff;
    }

    body.landing footer.footer {
        background: #191919;
    }

    /* Leave the mobile navigation's version selector above the fixed footer. */
    .nav {
        height: calc(100vh - 6rem - var(--footer-height));
    }
}

footer.footer {
    box-sizing: border-box;
    height: var(--footer-height);
    /* imprint centred, GitHub icon on the right */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 1rem;
    /* same line as the sidebar's version selector (.nav-panel-explore .context), so both align */
    box-shadow: 0 -1px 0 #e1e1e1;
    color: #8e8e8e;
    font-size: .75rem;
}

footer.footer a {
    color: inherit;
    text-decoration: none;
}

footer.footer a:hover {
    color: #191919;
    text-decoration: underline;
}

footer.footer .footer-imprint {
    grid-column: 2;
}

footer.footer .footer-github {
    grid-column: 3;
    justify-self: end;
    display: flex;
}

footer.footer .footer-github svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Recreate the full-screen cover used by the former Docsy landing page. */
body.landing {
    background-image: linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)),
    url("../../docs/latest/_images/featured-background.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}

body.landing .body,
body.landing main.article {
    min-height: calc(100vh - 3.5rem);
}

body.landing main.article {
    background-color: transparent;
}

body.landing .content {
    box-sizing: border-box;
    padding-top: 20vh;
}

body.landing .doc {
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgb(0 0 0 / 60%);
}

body.landing footer.footer {
    box-shadow: none;
    color: rgb(255 255 255 / 75%);
    text-shadow: 0 1px 2px rgb(0 0 0 / 60%);
}

body.landing footer.footer a:hover {
    color: #fff;
}

body.landing .doc h1.page {
    color: #fff;
    font-size: 4em;
    font-weight: 700;
}

/* Maximize main content column width and align TOC to the right */
@media screen and (min-width: 1024px) {
    /* Start the footer after the sidebar so its version selector stays accessible. */
    footer.footer {
        left: 15rem;
    }

    .nav {
        height: calc(100vh - 3.5rem);
    }

    .article {
        max-width: none !important;
        width: 100% !important;
    }

    .content {
        max-width: none !important;
        width: 100% !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .doc {
        order: 1 !important;
        flex: 1 1 auto !important;
        max-width: none !important;
        width: auto !important;
        margin-right: clamp(1rem, 2vw, 2rem) !important;
    }

    /* Keep fixed-size images (e.g. logos) inside the content column */
    .doc img {
        max-width: 100%;
        object-fit: contain;
    }

    /* TOC narrows with the window (about 12.5rem at 1024px, full 16rem from about 1310px) */
    .toc.sidebar {
        order: 2 !important;
        flex: 0 0 clamp(10rem, 22vw, 16rem) !important;
        width: clamp(10rem, 22vw, 16rem) !important;
        margin-left: 0 !important;
        position: sticky !important;
        top: 5rem !important;
        height: calc(100vh - 6rem - var(--footer-height)) !important;
        overflow-y: auto !important;
    }

    /* Fill short pages while reserving the footer's space in the content column. */
    main.article {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 3.5rem);
    }

    body.landing .doc {
        max-width: 1200px;
        margin: auto;
    }

    body.landing .nav-container {
        display: none;
    }

    body.landing footer.footer {
        left: 0;
    }

    body.landing .toolbar {
        display: none;
    }


}

.doc .admonitionblock td.content {
    display: table-cell !important;
}