/* for migration of main.scss - this should contain top level html elements only; anything else should be in webc components at this point */
@font-face {
    font-family: "League Spartan Variable";
    src: url("/assets/leaguespartan/LeagueSpartan-VF.woff2")
        format("woff2-variations");
    font-weight: 200 900;
}
:root {
    /* FONTS */
    --base-font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --header-font-family:
        "League Spartan Variable", ui-rounded, ui-sans-serif, -apple-system,
        BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --monospace-font-family: "ui-monospace";

    /* SIZING
    do we want to keep doing these rather than swapping to utopia? */
    --base-font-size: 16px;
    --spacing-unit: 30px;
    --thumbnail-width: 400px;

    /* COLOURS - GENERAL */
    --background-colour: #000;
    --text-colour: #ffffff;
    --grey-colour: grey;
    --grey-colour-light: lch(from var(--grey-colour) calc(l + 20) c h);
    --codebg: #272822; /* matches prismJS tomorrow night */
    --link-colour: #ccccff;
    --link-hover-colour: lch(from var(--link-colour) calc(l - 10) c h);
    --rss-colour: lch(from orange l c h / 0.8);

    /* COLOURS - YOUR HOSTS */
    --red-fur-colour: #e9ecfc;
    --red-scale-colour: #705391;
    --red-heart-colour: #d65a4b;
    --red-eye-colour: #559936;

    --purple-fur-colour: #f9e4d6;
    --purple-tail-colour: #836882;

    /* TODO - exact values */
    --pink-fur-colour: lightyellow;
    --pink-mane-colour: pink;

    --red-colour: var(--red-heart-colour);
    --purple-colour: var(--purple-tail-colour);
    --pink-colour: var(--pink-mane-colour);
}

body {
    background-color: var(--background-colour);
    color: var(--text-colour);
    margin: 0;
    font-family: var(--base-font-family);
    font-size: var(--base-font-size);
    /* hopefully prevents bug with android firefox if anything happens to scroll off screen horizontally. */
    max-width: 100vw;
}

figcaption {
    text-align: center;
    font-family: var(--header-font-family);
    color: var(--text-colour);
    max-width: 80%;
    margin: calc(var(--spacing-unit) / 15) auto;
    font-size: calc(1.25 * var(--base-font-size));
    font-weight: 200;

    &:hover {
        color: lch(from var(--text-colour) calc(l - 10) c h);
    }
}

figure.highlight {
    background-color: var(--codebg);
    height: calc(var(--spacing-unit) * 5);
    overflow: auto;
    /* commented out in scss
    color: black; */
    width: 90%;
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
}

h1,
h2,
h3,
h4,
h5,
dt {
    font-family: var(--header-font-family);
    font-weight: 300;
    text-transform: lowercase;
}

h1 {
    margin-block: 0;
    font-size: calc(2.5 * var(--base-font-size));
    /* margin-left: $spacing-unit*3;
    margin-top: -($spacing-unit)*1.75; */
}

h2 {
    font-size: calc(2 * var(--base-font-size));
}

h3 {
    font-size: calc(1.75 * var(--base-font-size));
    margin-left: calc(var(--spacing-unit) / 3);
}

h4 {
    font-size: calc(1.5 * var(--base-font-size));
    margin-left: calc(var(--spacing-unit) / 2);
}

h5,
dt {
    font-size: calc(var(--base-font-size) * 1.25);
    font-weight: 400;
    margin-left: var(--spacing-unit);
}

dt {
    margin: 0.5rem;
    text-transform: none;
}

main {
    width: 90%;
    margin: 0 auto;

    a {
        font-weight: bolder;
        text-decoration: none;
        cursor: pointer;

        &:link,
        &:visited {
            color: var(--link-colour);
        }
        &:hover {
            /* font-weight: 500; */
            cursor: pointer;
            color: var(--link-hover-colour);
        }
    }
    code,
    pre,
    .fakecode {
        color: #ffffcc;
        background-color: var(--codebg);
        max-height: 50vh;
        overflow: auto;
        max-width: clamp(50%, 90ch, 80%);
    }
    pre {
        /* jekyll's code highlighting just did a code block, eleventy's does <pre><code>
        so this is for applying to outer block only */
        margin-left: var(--spacing-unit);
        padding-left: calc(var(--spacing-unit) / 5);
    }
    dt {
        /* TOFIX - i don't think extend exists in regular CSS?
        @extend h5; */
        margin: 0.5rem;
        text-transform: none;
    }

    figure.figures-table {
        /* TOFIX - move to webc */
        text-align: center;
        font-family: var(--header-font-family);
        margin: 0 auto;
        table {
            margin: 0 auto;
            max-width: 90vw;
        }
    }
    .thumbnail {
        /* TOFIX - move to webc
        also thumbnail size is set but this ignores it?*/
        max-width: 410px;
        margin: 0 auto;
        a {
            cursor: zoom-in !important;
            &::after {
                content: none;
            }
        }
        img {
            border: 0.5px solid var(--link-colour);
            padding: calc(var(--spacing-unit) / 6);
            max-width: 100%;
            background-color: var(--link-colour);

            &:hover {
                background-color: var(--link-hover-colour);
                border: 0.5px solid var(--link-hover-colour);
            }
        }
    }
    iframe {
        /* youtube embeds - firefox on android will break if the content goes outside the viewport. */
        max-width: 80%;
        margin: 0 auto;
    }
    img {
        /* TOFIX - may need chopping up and bits moving to webc */
        /* scss comment - todo: some way of scaling */
        display: block;
        /* scss comment - TODO: this seems like it should be somewhere other than here so it didn't have to be overriden for the 88x31 buttons */
        max-width: 50%;
        margin: 0 auto;

        &.header-image {
            max-width: 100%;
            max-height: calc(var(--spacing-unit) * 10);
            margin-top: calc(var(--spacing-unit) / 2);
        }

        &.emoji {
            width: 1rem;
            display: inline;
        }
    }
    p {
        margin-left: calc(var(--spacing-unit) / 6);

        &:first-child {
            margin-block-start: var(--spacing-unit);
        }
    }

    .quote {
        /* TOFIX - move to webc */
        max-width: 75%;
        margin: var(--spacing-unit) auto;
        text-align: center;
        font-family: cursive;
        font-size: calc(var(--base-font-size) * 1.25);
        border: 5px solid white;
        background-color: rgba(0, 0, 0, 0.3);

        cite {
            display: block;
            font-family: var(--header-font-family);
            text-align: end;
            /*scss comment - margin-left: var(--spacing-unit)/2;*/
            font-size: var(--base-font-size);
            padding-right: calc(var(--spacing-unit) * 1.5);
        }
    }

    div.highlighter-rouge {
        /* TOFIX - move to webc */
        /* used during ``` formatted code blocks */
        margin-left: 5%;
        overflow-x: scroll;
        background-color: var(--codebg);

        pre {
            padding-left: 1%;
        }
    }

    #markdown-toc,
    .table-of-contents {
        /* TOFIX - move to webc */
        font-weight: 200;
        font-size: calc(1.5 * var(--base-font-size));
        max-width: 80%;
        font-family: var(--header-font-family);
        margin: 0.5rem 10%;
        padding: 0.5rem;
        background-color: rgba(255, 255, 255, 0.1);

        list-style-position: inside;
        list-style-type: lower-roman;
        text-transform: lowercase; /* in case there are headers where we forgot to type in lowercase to start with */

        ul {
            list-style-type: lower-roman;

            ul {
                /* only top level of TOC should have roman numerals */
                list-style-type: disc;
            }
        }
        a {
            color: var(--text-colour);

            &:hover {
                font-weight: 500 !important;
            }
        }
    }

    table {
        border-collapse: collapse;
        border: 3px solid var(--red-scale-colour);
        tr,
        td,
        th {
            border: 1px solid var(--red-scale-colour);
        }
        td {
            padding: 0.5rem;
        }
    }
}

.rss {
    a {
        color: var(--rss-colour) !important;
        font-size: 75%;
    }
}

a {
    /* external link styling, taken from here https://stackoverflow.com/questions/5379752/css-style-external-links */
    &[href]:not(:where(
    /* exclude hash only links */
    [href^="#"],
    /* exclude relative but not double slash only links */
    [href^="/"]:not([href^="//"]),
    /* domains to exclude */
    [href*="//nullpat.ch"]
    )):after {
        content: " ⧉";
    }
}

.flexy {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-unit);
    justify-content: center;

    figure.thumbnail {
        margin: 0;
    }
}

body.pagebg {
    --bgVar: $background-colour;
    --bgFallback: var(--bgVar);
    --bgRepeat: no-repeat;
    --bgAttachment: scroll;
    --bgSize: auto;

    /* the last background colour is there as a fallback, as firefox android will default to rgba(0,0,0,0), which will be unreadable.
    however, it might introduce a lot of judder in safari */
    background:
        linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)),
        var(--bgVar) var(--bgRepeat); /*, $background-colour;*/
    background-attachment: var(--bgAttachment);
    background-position: center;
    background-size: var(--bgSize);
    width: 97%; /* fixes a bug where it'll otherwise show scroll bars when it shouldn't */
}

@media (prefers-reduced-motion) {
    body.pagebg {
        background:
            linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)),
            var(--bgFallback) var(--bgRepeat); /* , $background-colour; */

        /* not sure if these duplicate elements are necessary but not removing them when doing a lazy SASS removal */
        background-attachment: var(--bgAttachment);
        background-position: center;
        background-size: var(--bgSize);
        width: 97%; /* fixes a bug where it'll otherwise show scroll bars when it shouldn't */
    }
}