@import "reset.css" layer(reset);
@import "fonts.css" layer(fonts);
@import "page.css" layer(page);
@import "fiction.css" layer(fiction);
@import "animations.css" layer(animation);
@import "computer.css" layer(computer);

@layer reset, fonts, base, computer, page, fiction, animation;


@property --margin-inline {
    syntax: "<length>";
    inherits: true;
    initial-value: 40px;
}

@property --first-line-indent {
    syntax: "<length>";
    inherits: true;
    initial-value: 1ch;
}

@property --max-content-width {
    syntax: "<length>";
    inherits: true;
    initial-value: 80ch;
}

@property --diminished-colour {
    syntax: "<color>";
    inherits: true;
    initial-value: #565;
}

@property --colour-green {
    syntax: "<color>";
    inherits: true;
    /*noinspection CssInvalidFunction*/
    initial-value: rgb(150 200 150);
}


:root {
    color-scheme: light;
    /*noinspection CssInvalidFunction*/
    --background-colour: light-dark(white, black);
    --first-line-indent: 2ch;
    --max-content-width: 80ch;

    --font-color: black;
    --link-color: var(--font-color);
    --link-hover-color: green;

    --bluesky-colour: #0285FF;

    --nav-font-size: 0.9em;


    --border-light: 1px solid #ddd;

    /* setup plyr */
    --plyr-color-main: var(--colour-green);
}


@layer base {
    html {
        @media (prefers-reduced-motion: no-preference) {
            scroll-behavior: smooth;
        }

        background: var(--background-colour);
        font-size: 18px;
    }

    body {
    }

    a {
        &:hover {
            color: var(--link-hover-color);

        }

        /* Specific link colours */
        &:has(> svg > use[href="#symbol-bluesky"]) {
            &:hover {
                color: var(--bluesky-colour);
            }
        }

        @media (prefers-reduced-motion: no-preference) {
            transition: color 500ms;

            &:hover {
                transition-duration: 100ms;
            }
        }
    }

    .navlink {
        text-underline-offset: 4px;

        &:not(:hover) {
            color: var(--font-color);
            text-decoration: none;
        }
    }

    main {
        /*margin-inline: var(--margin-inline)*/
        margin-inline: auto;
        padding-inline: var(--margin-inline);
        max-width: var(--max-content-width);
    }



    svg:has(> use:only-child) {
        display: inline-block;
        aspect-ratio: 1;
        height: 1em;

        vertical-align: text-bottom;

        padding: 0;
        margin: 0 0 0.2em 0;
    }

    svg:has(> use[href="#symbol-leaf"]:only-child) {
        height: 0.8em;
        fill: darkolivegreen;

        transform-origin: 50% 50%;
        rotate: 45deg;
    }

    main > article {
        & > figure {
            &:has(img) {
                margin-top: 1ch;
                margin-left: calc(var(--margin-inline) * -1);
                width: calc(100% + 2 * var(--margin-inline));
            }

            &:has(img[height="800"]) {
                /*float: left;*/
                /*max-width: 350px;*/
            }
        }
    }

    p {
        text-indent: var(--first-line-indent);

        & + p {
            margin-top: 0.6em;
        }
    }

    .hero {
        height: 100dvh;
        align-content: center;
        margin-bottom: 4rem;


        color: black;       /* Ignore theme. Match background image colous */
        font-size: 1.1em;


        .subtitle {

        }


        a.more {
            /* -- Position -- */
            position: absolute;
            bottom: 1rem;

            /*
            -- Scroll linked animation --
            Don't use in browsers that don't support it, otherwise
            the anchor will remain with opacity 0.
            */
            /*noinspection CssUnknownProperty,CssInvalidFunction*/
            @supports (animation-timeline: view()) {
                animation: fade-out ease-in-out forwards;
                animation-timeline: view(70dvh 1rem);
            }

        }
    }


    :where(header, footer):not(main *) {
        font-size: var(--nav-font-size);

        --towards-edge-size: 0.5rem;        /* space towards edge of screen */
        --towards-content-size: 0.2rem;     /* space towards the content */

        & > nav {
            ul {
                list-style: none;

                padding: 0;

                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 0.5rem;
            }

            li {
                text-align: center;
            }
        }
    }

    header:not(main *) {
        margin-block: var(--towards-edge-size) var(--towards-content-size);
    }



    footer:not(main *) {
        margin-block: var(--towards-content-size) var(--towards-edge-size);
    }



    .unsplash-label {
        display: inline-block;
        margin-top: 1px;

        background: black;
        color: white;

        font-size: 0.8em;
        text-decoration: none;
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;

        padding: 0.2rem 0.5rem;

        svg {
            vertical-align: text-bottom;
        }

        svg + span {
            margin-left: 0.3em;
        }

        &:hover {
            color: lightgreen;
        }

    }

    .margin-overflow {
        margin-left: calc(var(--margin-inline) * -1);
        width: calc(100% + 2 * var(--margin-inline));
    }


    @keyframes fade-out {
        to { opacity: 0 }
    }

    @media (prefers-reduced-motion: no-preference) {
        /* View transition https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition */
        /*noinspection CssInvalidAtRule,CssUnknownProperty*/
        @view-transition {
            navigation: auto;
        }
    }

}