// This styles the Table of Contents under the page heading. It does not style the smaller ToC in the navigation sidebar, that is handled by 'site-nav.less'

.tocnumber,
.toctitle {
    display: none;
}

#toc {
    margin-bottom: calc(var(--space) * 2);
    line-height: calc(var(--space) * 3);

}

.toctitle > h2 {
    text-align: center;
}

#toc > ul {
    display: flex;
    justify-content: center;
    column-gap: calc(var(--space) * 2);
    row-gap: calc(var(--space));
    flex-wrap: wrap;
    padding-bottom: var(--space);
}

.toclevel-1 {
    flex-basis: 6em;
}

.toclevel-1 > a:link,
.toclevel-1 > a:visited {
    font-size: 1.2em;
    color: var(--8);
}

.toclevel-2 > a:link,
.toclevel-2 > a:visited {
    color: var(--blue-6);
}

@media (prefers-color-scheme: dark) {
    .toclevel-2 > a {
        color: var(--blue-5);
    }
}

.toclevel-1 ul,
.toclevel-1 {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space) / 2);
    align-items: center;
}

.toctext {
    text-wrap: nowrap;
    font-family: 'Libre Caslon';
}

a:has(> .toctext):hover {
    color: var(--blue-4);
}

#mw-content-text:has(> .mw-parser-output > #pagebody-header),
.mw-parser-output:has(> #pagebody-header) {
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    grid-row: toc / bottomstart;
}

@media (min-width: 1201px) {

}

@media (max-width: 1200px) {
    .toctext {
        font-size: 0.9em;
    }
    #toc > ul {
        column-gap: calc(var(--space));
    }

    .toclevel-1, .toclevel-1 ul {
        row-gap: 0;
    }

    #toc {
        line-height: calc(var(--space) * 2.5);
    }

}