@import 'unset.less';
@import 'colors.less';

@import 'parts/site-header.less';
@import 'parts/site-nav.less';
@import 'parts/site-footer.less';
@import 'parts/page-header.less';
@import 'parts/page-body.less';
@import 'parts/page-toc.less';
@import 'parts/portableinfobox.less';
@import 'parts/sitenotice.less';
@import 'parts/dropmenu.less';

@font-face {
    font-family: "Libre Caslon";
    src: url('assets/fonts/LibreCaslonText-Regular.ttf');
}

#grid {
    margin-bottom: 0;
    min-height: 100vh;
}

@media (min-width: 1081px) {
    #grid {
        display: grid;
        grid-template-columns:
            [navstart] var(--sidebar-width)
            // [navspacer] var(--navspace-width)
            [pagestart] 1fr 
            [menustart] min-content
            [pageend] calc(var(--sidebar-width))
            // [userend]
        ;
        grid-template-rows:
            [topstart] 3.6em
            [sitenotice] auto
            [title] auto
            [toc] auto
            [pagebody] 1fr
            [bottomstart] auto
        ;
        column-gap: 1vw;
        height: 100%;
        max-width: calc(1200px + var(--sidebar-width) + var(--sidebar-width));
        margin: auto;
        padding-left: var(--space);
        padding-right: var(--space);
    }
}

@media (max-width: 1080px) {
    #grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows:
            [topstart] 7.8em
            [sitenotice] auto
            [title] auto
            [toc] auto
            [pagebody] 1fr
            [bottomstart] auto
        ;
        // padding: var(--space);
        padding-bottom: 0;
    }
}

@media (max-width: 720px) {

}

:root {
    --sidebar-width: 12em;
    --navspace-width: 1em;
    --space: .6em;
    --pi-width: 24em;
}

body {
    margin: 0;
    background-image: linear-gradient(120deg, var(--blue-2), var(--white) 10vw);
    background-repeat: no-repeat;
    // min-height: 100vh;
}

body::selection {
    background-color: var(--blue-4);
}

button {
    cursor: pointer;
}

fieldset {
    margin-top: calc(var(--space) * 3);
}

.mw-list-item.selected {
    display: none;
}

#t-print, #t-upload {
    display: none;
}

// #site-header-user button, #site-header-user-links, #page-menu-button, #page-menu-list, #page-header-options-links {
//     font-size: 1em;
//     overflow: clip;
//     text-overflow: ellipsis;

//     background-image: linear-gradient(120deg, var(--blue-2), var(--blue-3));
//     // border-radius: calc(var(--space) / 2 );
//     // box-shadow: inset 0 0 3px 3px var(--blue-1);
//     color: var(--blue-7);
//     gap: calc(var(--space) * 2);
// }

// #site-header-user-links, #page-menu-button, #page-menu-list, #page-header-options-links {
//     padding: calc(var(--space));
// }

// #site-header-user-links {
//     position: absolute;
//     margin-top: calc(var(--space) / 2);
//     display: none;
//     z-index: 12;
//     // border-top: 3px solid var(--blue-6);
//     border-width: 3px 0 0 0;
//     box-shadow: 0 0 2px .5px var(--blue-7), inset 0 0 3px 3px var(--blue-1);
//     right: 0;
// }

// #site-header-user-links ul {
//     display: flex; 
//     flex-direction: column;
//     width: max-content;
//     gap: var(--space);
// }




    // background:
    //     linear-gradient(300deg, #9fb7ff 0% 40%, #ffffff 40% 100%),
    //     linear-gradient(330deg, #9fb7ff 0% 80%, #ffffff 80% 100%),
    //     linear-gradient(30deg, #9fb7ff 0% 50%, #ffffff 50% 100%),
    //     radial-gradient(circle farthest-corner at 50% 50%, #ecf2ff 0%, #dae4ff 93%);
    // background-blend-mode: color-burn;
    
    // display: flex;
    // flex-direction: column-reverse;
    // align-items: center;
    // 
    // padding: 3em;
    // // border-color: blue;
    // justify-content: center;
    // background: var(--blue-5);
    // color: var(--gold-1);
    // text-shadow: 0 0 2px var(--black);
// background:
//     conic-gradient(from 251deg at 100% 0%, #000000 0% 30%, #667fda 51%, #000000 100% 30%),
//     linear-gradient(to top, #ffffff 0% 0%, #333333 20%, #060606 40%, #060606 60%, #333333 80%, #ffffff 100% 0%),
//     linear-gradient(to right, #ffffff 0% 0%, #151515 10%, #060606 50%, #151515 90%, #ffffff 100% 0%),
//     radial-gradient(circle farthest-corner at 50% 50%, var(--blue-6) 60%, var(--blue-5) 91%, #000000 100% 0%);
//     background-blend-mode: color-dodge;



//     border-style: solid;
//     border-image: linear-gradient(150deg, var(--blue-5), white 30%) 1;
//     background-image: linear-gradient(150deg, var(--blue-5) 0%, var(--blue-3) 6%, var(--blue-2) 12%, white 30%)
// }


// #page-menu:focus-within {
//     border-style: solid;
//     border-image: linear-gradient(102deg, var(--blue-5),white 30%) 1;
//     background-image: linear-gradient(102deg, var(--blue-5) 0%, var(--blue-3) 6%, var(--blue-2) 12%, white 30%)
// }