// This is the base .less file for the Crystal skin. Different components are split up into their own parts/ files, for ease of editing. CSS rules in here should only be for site wide elements.

@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/infobox.less';
@import 'parts/sitenotice.less';
@import 'parts/site-menus.less';
@import 'parts/specialpage.less';
@import 'parts/table.less';
@import 'parts/images.less';
@import 'parts/versions.less';

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

@font-face {
    font-family: "Shippori Mincho";
    src: url('assets/fonts/ShipporiMincho-Regular.ttf');
}

// The site layout breakpoints are below: >1201px, <1200px and <700px.

@media (min-width: 1201px) {

    .layout-touch {
        display: none;
    }

    #grid {
        display: grid;
        grid-template-columns:
            [startgap] minmax(var(--space), 1.5fr)
            [navstart] var(--sidebar-width)
            [navgap] minmax(var(--space), .5fr)
            [pagestart] minmax(auto, 78em)
            [pageend] var(--sidebar-width)
            [endgap] minmax(var(--space), 2fr)
        ;
        grid-template-rows:
            [topstart] 3.6em
            [sitenotice] auto
            [title] auto
            [toc] auto
            [pagebody] 1fr
            [bottomstart] auto
        ;
        height: 100%;
        padding-top: calc(6vw - 6vh);
        box-sizing: border-box;
    }
}

@media (max-width: 1200px) {

    .layout-mouse {
        display: none;
    }

    #grid {
        display: grid;
        grid-template-rows:
            [topstart] 7.8em
            [sitenotice] auto
            [title] auto
            [toc] auto
            [pagebody] 1fr
            [bottomstart] auto
        ;
        padding-bottom: 0;
    }
}

@media (max-width: 720px) {

}

:root {
    --sidebar-width: 12em;
    --space: .6em;
}

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

body {
    margin: 0;
    background-color: var(--0);
    background:
        linear-gradient(100deg, transparent 70%, var(--blue-1)),
        radial-gradient(circle farthest-corner at 160% 100%, var(--0) 90%, var(--blue-1) 120%)
    ;
    background-attachment: fixed, local;

    @media (prefers-color-scheme: dark) {
        background:
            linear-gradient(95deg, transparent 70% , var(--0) 140%),
            radial-gradient(circle farthest-corner at 160% 100%, var(--blue-1) 90%, var(--0) 120%)
        ;
    }
}

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

button {
    cursor: pointer;
}

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

*:focus {
    z-index: 60;
}

// Stuff under here belongs to specific components, but has not been sorted into a /parts file yet.

.mwe-popups-extract a:link,
.mwe-popups-extract a:visited {
    color: black;
}

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

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