@layer reset, base, layout, theme, components, utilities;

@layer reset {
    html {
        box-sizing: border-box;
        scrollbar-gutter: stable;
        @media (prefers-reduced-motion: no-preference) {
            interpolate-size: allow-keywords;
        }
    }

    body {
        min-block-size: 100svh;
    }

    *,
    *::before,
    *::after {
        box-sizing: inherit;
    }

    img, picture, figure {
        max-width: 100%;
        height: auto;
    }

    h1, h2, h3, h4, h5, h6 {
        text-wrap: pretty;
    }

    p, div, blockquote, dl, dt, dd {
        text-wrap: pretty;
    }

}

@layer base {
    html {
        --body-fonts: system-ui,  -apple-system,  BlinkMacSystemFont,  "Segoe UI",  Roboto,  "Helvetica Neue",  Arial,  sans-serif;
        --title-fonts: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

        color-scheme: light dark;

        --brand: #b6d9ff;
        --strength: 0.12;
        --strong-color: oklch(from var(--brand) calc(l - 0.12) c h);
        --soft-color: oklch(from var(--brand) calc(l + 0.4) c h);
        --accent-color: oklch(from var(--brand) l c calc(h + 20));
        --brand-border: rgb(from var(--brand) r g b / 0.9);
        --brand-shadow: rgb(from var(--brand) r g b / 0.5);

        --black: oklch(0% 0 0);
        --white: oklch(100% 0 0);
        --off-black: #232323;
        --background: light-dark(var(--soft-color), var(--off-black));
        --text: light-dark(var(--black), var(--white));
        --clr-secondary: light-dark(var(--accent-color), darkslategray);
        --clr-links: light-dark(blue, #6dcf4d);
        --clr-hover: light-dark(var(--brand-border), black);

        --pill-padding-inline: 0.5rem;
        --pill-padding-block: 0.3rem;
    }

    dl {
        dt {
            font-weight: bold;
        }
    }

    /* TODO: Something fancier here. */
    blockquote {
        &:before {
            content: '\1F676';
        }

        &:after {
            content: '\1F677';
        }
    }
}

/* General styling */

@layer layout {
    body {
        display: grid;
        grid-template-rows: auto 1fr auto;
        line-height: 1.75rem;
    }

    .container {
        max-width: 110ch;
        margin: auto auto;
        display: flex;
        flex-wrap: wrap;
        align-items: start;
        gap: 3rem;
        width: 100%;
    }

    .container > main {
        flex-basis: 50ch;
        flex-grow: 9999;
    }

    .container > aside.sidebar {
        flex-basis: 35ch;
        flex-grow: 1;
    }

    main {
        max-width: 70ch;
    }

    /* Center images in the body by default. */
    main p:has(img) {
        display: grid;
        place-content: center;
    }

    body > footer {
        font-size: 0.9rem;
        width: 50%;
        text-align: center;
        margin: auto auto;
        margin-block-start: 1rem;
    }

    aside.sidebar {
        aside {
            margin-block-start: 1rem;
            padding: 1rem;
            padding-block-start: 0;
        }
    }

    .article-list {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        place-content: flex-start;
    }
}

@layer theme {
    body {
        background: var(--background);
        font-family: var(--body-fonts);
    }
    body > footer {
        background-color: var(--clr-secondary);
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--title-fonts);
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.2rem;
    }


    main article {
        border-radius: 1rem;
        border: 1px solid;
        border-color: var(--brand-border);
        padding: 1rem;
        background: var(--background);
        filter: drop-shadow(var(--brand-shadow) 5px 5px 4px);
    }

    p > code {
        font-family: monospace;
        background-color: var(--accent-color);
        padding-inline: 0.3rem;
        font-size: 1.2em;
        color: contrast-color(var(--accent-color));
    }

    aside.sidebar {
        aside {
            border: 1px solid var(--brand-border);
            border-radius: 1rem;
            background: var(--background);
            filter: drop-shadow(var(--brand-shadow) 10px 10px 4px);
        }

        #blog-feed {
            border: none;
            filter: none;
            margin-block-start: 2rem;
        }
    }
}

/* Links */

@layer theme {
    a {
        text-decoration: none;
        color: var(--clr-links);

        &:active, &:focus-visible, &:hover {
            text-decoration: underline;
        }

        &[href^="http"] {
            &:after {
                content: ' \1F310';
            }
        }

        &[href^="https://www.garfieldtech.com"], &:has(img) {
            &:after {
                content: '';
            }
        }
    }

    a#atom-link {
        padding-left: 3rem;
    }
    a#atom-link:before {
        content: url("/images/feed-icon-28x28.png");
    }
}

/* Site header */
@layer layout {
    body {
        padding-block-start: 2rem;
    }

    body > header {
        width: 100%;
        max-width: 110ch;
        text-align: center;
        margin: auto auto;

        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 1.5rem;

        p.site-title {
            font-size: 3.5rem;
            font-family: var(--title-fonts);
            margin-block: 0;
        }

        p.site-slogan {
            font-size: 1.2rem;
            margin-block: 0;
        }

        nav > ul {
            margin: 0 auto;
            list-style: none;
            padding-block: 0.2rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: left;
            gap: 0.5rem;
            font-size: 1.5rem;

            li > a {
                padding-inline: 0.5rem;
            }
        }
    }
}

@layer theme {
    body > header {
        nav {
            background-color: var(--clr-secondary);
        }
        nav > ul {
            li > a {
                &:active, &:focus-visible, &:hover {
                    background-color: var(--clr-hover);
                }
            }
        }

    }
}

@layer theme {
    .posted-date {
        font-style: italic;
    }
}

/* Tags */

@layer layout {
    .tag-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;

        li a::before {
            content: '#';
        }

        li > a {
            padding: 2px;
            font-size: 0.9rem;
        }
    }
}
@layer theme {
    .tag-list {
        li > a {
            border-radius: 100vw;
            border: 1px solid var(--clr-secondary);
            background-color: var(--clr-secondary);
            padding-inline: var(--pill-padding-inline);
            padding-block: var(--pill-padding-block);
        }
    }
}

/* Paginator */

@layer layout {
    aside.paginator {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        margin-block-start: 1rem;
        padding-block-start: 2rem;

        > ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem;

            li {
                font-size: 0.9rem;
            }
        }
    }
}

@layer theme {
    aside.paginator {
        > ul {
            li > a {
                border-radius: 100vw;
                border: 1px solid var(--clr-secondary);
                background-color: var(--clr-secondary);
                padding-inline: var(--pill-padding-inline);
                padding-block: var(--pill-padding-block);
            }

            li:not(:has(a)) {
                border-radius: 100vw;
                border: none;
                background-color: transparent;
            }
        }
    }
}

/* Comments (legacy) */

@layer layout {
    div.comments {
        border-top: 5px var(--clr-secondary);

        article {
            margin-left: 3rem;
            margin-top: 1rem;
            padding: 1rem;

            div.comment-body {
                margin-top: 0.5rem;
            }
        }

        > article {
            margin-left: 1rem;
        }
    }
}

@layer theme {
    div.comments {
        border-top: 5px var(--brand-border);

        article {
            border-radius: 1rem;
            border: 1px solid;
            border-color: var(--brand-border);

            header {
                span.comment-author {
                    font-weight: bold;
                }
                time {
                    font-style: italic;
                }
            }
        }
    }
}