// This file handles the various elements in a Mediawiki generated page that do not belong to a discrete component. May need to be split into multiple files if it becomes too unwieldy.

#page {
    grid-row: title / bottomstart;
    line-height: calc(var(--space) * 3);
    margin-left: var(--space);
    margin-right: var(--space);

    @media (prefers-color-scheme: dark) {
        color: var(--gold-1);
    }
}

// Link styling.

a:link {
    color: var(--blue-6);
}

a.new,
p a.new:visited {
    color: #ff0000;
    text-decoration: underline wavy;
}

a:not(.new):visited {
    color: var(--pink-6);
}

a:hover,
a:visited:hover {
    color: var(--blue-4);
}

@media (prefers-color-scheme: dark) {
    a:link {
        color: var(--blue-5);
    }
    a:not(.new):visited {
        color: var(--pink-5);
    }
    a:hover , a:visited:hover {
        color: var(--blue-4);
    }
}

// Heading elements.

.mw-heading {
    margin-top: calc(var(--space) * 2);
    position: relative;
    display: flex;
    margin-bottom: calc(var(--space) * 2);
}

.mw-heading h2{
    margin-left: calc(var(--space) * 2);
    margin-bottom: calc(var(--space) / 2);
    font-family: 'Libre Caslon', serif;
    font-weight: normal;
}

.mw-heading2 {
    border-bottom: 1px solid;
    margin-bottom: calc(var(--space));
    margin-top: calc(var(--space) * 6);
    border-image: linear-gradient(90deg, transparent 2.5%, var(--gold-7) 6%, transparent 90%) 30;
    @media (prefers-color-scheme: dark) {
        border-image: linear-gradient(90deg, transparent 2.5%, var(--gold-1) 6%, transparent 90%) 30;
    }
}

.mw-heading3 {
    margin-top: calc(var(--space) * 4);
    gap: var(--space);
}

.mw-heading h3 {

    font-family: 'Libre Caslon', serif;
    font-weight: normal;
}

.mw-heading h4 {
    margin-bottom: 0;
    margin-top: var(--space);
}

.mw-heading3 .mw-editsection,
.mw-heading4 .mw-editsection {
    display: none;
}

// Styles the collapsible section toggles.

.mw-collapsible-toggle .mw-collapsible-text.mw-collapsible-text {
    color: var(--8);
    text-decoration: underline;
}

.mw-collapsible-toggle .mw-collapsible-text.mw-collapsible-text:hover {
    color: var(--blue-4);
    text-decoration: underline;
}

.mw-collapsible-toggle-default::before,
.mw-collapsible-toggle-default::after {
    display: none;
}



#pagebody-header {
    grid-row: toc;
}

.pagebody p,
.pagebody dl,
.pagebody ul {
    margin-bottom: calc(var(--space) * 2);
}

.pagebody ol li {
    list-style: decimal-leading-zero;
}

.pagebody li::marker {
    font-weight: bold;
}

.pagebody dd {
    margin-left: var(--space);
    margin-bottom: calc(var(--space) / 2);
    margin-top: var(--space);
    font-weight: bold;
}

.pagebody dt {
    margin-left: calc(var(--space) * 2);
}

#mw-content-text {
    grid-row: toc / bottomstart;
}

sup {
    line-height: 1;
}

pre {
    text-wrap: wrap;
}

.mw-editsection-bracket {
    display: none;
}

.mw-editsection.mw-editsection a:link,
.mw-editsection.mw-editsection a:visited {
    color: var(--blue-7);
}

.mw-editsection.mw-editsection a:hover {
    color: var(--blue-4);
}

.page-source-list {
    margin-bottom: calc(var(--space) * 6);
}

@media (min-width: 1201px) {

    #page {
        margin-top: calc(var(--space) * 6);
        grid-column: pagestart / pageend ;
        grid-row: title / bottomstart ;
        display: grid;
        grid-template-rows: subgrid;
        grid-template-columns: 1fr;
    }

    .pagebody {
        grid-row: pagebody
    }


    .mw-heading2 {
        align-items: end;
        justify-content: space-between;
    }

}

@media (max-width: 1200px) {

    #page {
        grid-column: 1;

        display: grid;
        grid-template-rows: subgrid;
        grid-template-columns: subgrid;
        margin-top: calc(var(--space) * 4);
    }

    .pagebody {
        grid-row: 2;
    }

    .mw-heading > .mw-editsection {
        position: absolute;
        right: 0;
    }

}


@media (max-width: 720px) {

}