/* COLOURS ------------------------------- */

body {
    --pico-h2-color:               var(--pico-primary);
    --pico-h3-color:               var(--pico-secondary-hover);
    --pico-h4-color:               var(--pico-muted-color);

    --h1-border-color:             var(--pico-secondary-border);
    --h2-border-color:             var(--pico-primary-border);

    --strong-color:                var(--pico-contrast);
    --link-strong-color:           var(--pico-primary-hover);

    --table-cell-padding:          calc(var(--pico-spacing) / 4);

    --sidebar-border-color:        var(--pico-form-element-border-color);
    --sidebar-background-color:    var(--pico-card-sectioning-background-color);
    --sidebar-marker-color:        var(--pico-muted-color);
    --sidebar-border-radius:       var(--pico-border-radius);

    --doc-menu-border-color:       var(--pico-secondary-border);
    --doc-menu-border-color-high:  var(--pico-primary-border);
    --doc-menu-border-color-low:   var(--pico-form-element-border-color);
    --doc-menu-border-color-hover: var(--pico-primary-hover-border);
    --doc-menu-border-radius:      var(--pico-border-radius);
    --doc-menu-icon-color:         var(--pico-muted-color);
    --doc-menu-background-color:   var(--pico-card-background-color);
    --doc-menu-shadow:             var(--pico-card-box-shadow);

    --dev-color:                   var(--pico-color-orange-500);
    --dev-color-hover:             var(--pico-color-orange-400);
}


/* LAYOUT -------------------------------- */

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header"
        "main";

    > header { grid-area: header; }
    > aside  { grid-area: sidebar; }
    > main   { grid-area: main; }

    > aside  {
        display: none;
    }

    @media screen and (min-width: 1024px) {
        width: calc(100vw - 2rem);
        max-width: 1360px;
        margin-inline: auto;
        gap: 0 3rem;
        grid-template-columns: 13rem 1fr;
        grid-template-areas:
            "header header"
            "sidebar main";

        > header,
        > main {
            max-width: unset;
        }

        > aside {
            display: block;
        }
    }
}


/* HEADER & NAV --------------------------- */

body > header {
    hgroup {
        margin-bottom: 0;
    }

    h1 {
        --pico-font-size: 1.5rem;
    }

    > nav {
        flex-wrap: wrap;
        gap: 0 2rem;

        ul {
            flex-wrap: wrap;
        }

        a[role="button"] {
            display: flex;
            align-items: center;
            gap: 0.3em;

            svg,
            img {
                height: 1.2em;
                width: auto;
            }
        }
    }
}


/* SIDEBAR -------------------------------- */

body > aside {
    position: sticky;
    top: 1rem;
    align-self: start;
    padding: 0.75rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.1;
    background-color: var(--sidebar-background-color);
    border: 1px solid var(--sidebar-border-color);
    border-radius: var(--sidebar-border-radius);

    ul {
        padding-left: 1.2rem;
    }

    li {
        padding: 0;
        display: list-item;

        &::marker {
            color: var(--sidebar-marker-color);
        }
    }

    h3 {
        margin-bottom: 0.5rem;
        font-size: 1.1rem;

        &:not(:first-child) {
            margin-top: 1.4rem;
            padding-top: 0.5rem;
            border-top: 1px solid var(--sidebar-border-color);
        }
    }

    h4 {
        margin: 0.5rem 0 0.4rem 0.2rem;
        font-size: 1rem;
        font-weight: normal;
    }

    :last-child {
        margin-bottom: 0.5rem;
    }
}


/* TEXT ----------------------------------- */

strong {
  font-weight: bold;
  --pico-color: var(--strong-color);
}

a strong {
  --pico-color: var(--link-strong-color);
}


/* MENU LISTS ----------------------------- */

main > :is(h1, h2, h3) + ul {
    margin-top: 2rem;
    padding: 0;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));

    li {
        list-style: none;

        a {
            text-decoration: none;
            display: grid;
            gap: 0.3rem;
            place-items: center;
            width: 100%;
            aspect-ratio: 7 / 8;
            border: 2px solid var(--doc-menu-border-color);
            background-color: var(--doc-menu-background-color);
            padding: 0.5rem;
            text-align: center;
            line-height: 1.2;
            box-shadow: var(--doc-menu-shadow);
            border-radius: var(--doc-menu-border-radius);
            transition: all 250ms;

            &:hover {
                border-color: var(--doc-menu-border-color-hover);
                box-shadow: 0 0.25rem 1rem #0004;
            }

            main > h1:first-child + ul li & {
                border-color: var(--doc-menu-border-color-high);
            }

            main > h3:last-of-type + ul li & {
                border-color: var(--doc-menu-border-color-low);
            }


            /* ICONS ------------------------------------- */

            > :first-child { order: 1; }
            &::before      { order: 2; }
            > :last-child  { order: 3; }

            &::before {
                content: "";
                display: block;
                width: 40%;
                aspect-ratio: 1;
                background-color: var(--doc-menu-icon-color);
                mask-size: contain;
                mask-repeat: no-repeat;
                mask-position: center;
            }

            /* Task */
            &[href*="/instructions/instructions.html"]::before      { mask-image: url('../images/icons/task.svg'); }
            &[href*="/instructions/checklist.html"]::before         { mask-image: url('../images/icons/checks.svg'); }
            &[href*="/instructions/ideas.html"]::before             { mask-image: url('../images/icons/idea.svg'); }
            &[href*="/instructions/as"][href$=".pdf"]::before       { mask-image: url('../images/icons/std.svg'); }

            /* Evidence */
            &[href*="/evidence/sprint-0-requirements.html"]::before { mask-image: url('../images/icons/sprint0.svg'); }
            &[href*="/evidence/sprint-1-prototype.html"]::before    { mask-image: url('../images/icons/sprint1.svg'); }
            &[href*="/evidence/sprint-2-database.html"]::before     { mask-image: url('../images/icons/sprint2.svg'); }
            &[href*="/evidence/sprint-3-mvp.html"]::before          { mask-image: url('../images/icons/sprint3.svg'); }
            &[href*="/evidence/sprint-4-final.html"]::before        { mask-image: url('../images/icons/sprint4.svg'); }
            &[href*="/evidence/system-review.html"]::before         { mask-image: url('../images/icons/review.svg'); }

            /* Guides */
            &[href*="/guides/quick.html"]::before     { mask-image: url('../images/icons/run.svg'); }
            &[href*="/guides/flask.html"]::before     { mask-image: url('../images/icons/how.svg'); }
            &[href*="/guides/structure.html"]::before { mask-image: url('../images/icons/struct.svg'); }
            &[href*="/guides/crud.html"]::before      { mask-image: url('../images/icons/app.svg'); }

            &[href*="/guides/setup.html"]::before     { mask-image: url('../images/icons/settings.svg'); }
            &[href*="/guides/routes.html"]::before    { mask-image: url('../images/icons/route.svg'); }
            &[href*="/guides/flash.html"]::before     { mask-image: url('../images/icons/message.svg'); }
            &[href*="/guides/session.html"]::before   { mask-image: url('../images/icons/session.svg'); }
            &[href*="/guides/jinja.html"]::before     { mask-image: url('../images/icons/template.svg'); }
            &[href*="/guides/schema.html"]::before    { mask-image: url('../images/icons/database.svg'); }
            &[href*="/guides/sqlite.html"]::before    { mask-image: url('../images/icons/query.svg'); }
            &[href*="/guides/forms.html"]::before     { mask-image: url('../images/icons/form.svg'); }
            &[href*="/guides/images.html"]::before    { mask-image: url('../images/icons/image.svg'); }
            &[href*="/guides/auth.html"]::before      { mask-image: url('../images/icons/auth.svg'); }

            &[href*="/guides/tools.html"]::before     { mask-image: url('../images/icons/tools.svg'); }
            &[href*="/guides/vscode.html"]::before    { mask-image: url('../images/icons/extend.svg'); }
            &[href*="/guides/git.html"]::before       { mask-image: url('../images/icons/github.svg'); }
            &[href*="/guides/hosting.html"]::before   { mask-image: url('../images/icons/server.svg'); }
            &[href*="/guides/pages.html"]::before     { mask-image: url('../images/icons/docs.svg'); }
            &[href*="/guides/learn.html"]::before     { mask-image: url('../images/icons/learn.svg'); }
        }
    }
}


/* HEADINGS & CONTENT ---------------------- */

body > main {
    padding-top: 0;

    > h1 {
        --pico-font-size: 2rem;

        &:not(:first-of-type) {
            margin-top: 4rem;
            border-top: 3px solid var(--h1-border-color);
            padding-top: 0.75rem;
        }
    }

    > h2 {
        --pico-font-size: 1.6rem;

        margin-top: 2.5rem;
        border-bottom: 2px solid var(--h2-border-color);
        padding-bottom: 0.5rem;
    }

    > h3 {
        --pico-font-size: 1.4rem;
    }

    > p > img {
        display: block;
        max-width: 100%;
        margin: 1.5rem auto;
    }

    > iframe {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        margin: 1.5rem auto;
    }

    table {
        width: auto;

        td, th {
            padding-block: var(--table-cell-padding);
        }
    }

    pre code.hljs {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;

        &.language-plaintext {
            line-height: 1.2;
        }
    }
}


/* DEV MODE ------------------------------ */

body.dev-mode {
    &::after {
        content: "DEV";
        display: block;
        position: fixed;
        left: -3.5rem;
        top: 0.5rem;
        transform: rotate(-40deg);
        padding: 0.2rem 4rem;
        background-color: var(--dev-color);
        box-shadow: 0 0.1rem 0.5rem #0002;
        color: white;
        font-weight: bold;
    }

    .guides {
        --pico-primary-background:       var(--dev-color);
        --pico-primary-border:           var(--dev-color);
        --pico-primary-hover-background: var(--dev-color-hover);
        --pico-primary-hover-border:     var(--dev-color-hover);

        border-color: var(--pico-primary-border);
    }
}