@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Light mode */
:root {
    --bg-colour: #fff9f2;
    --fg-colour: #fff2f9;
    --theme-primary-colour: #83254f;
    --theme-secondary-colour: #E58F3E;
    --text-colour: #000000;
    --text-deemphasised-slightly-colour: #4a4847;
    --text-deemphasised-colour: #595551;
    --post-header-bg-colour: var(--bg-colour);
    --post-footer-bg-colour: var(--bg-colour);
    --post-border-colour: #DED9D3;
    --post-body-bg-colour: #ffffff;
    --main-drop-shadow-filter: drop-shadow(0px 4px 5px rgba(25, 25, 25, 0.14)) drop-shadow(0px 1px 10px rgba(25, 25, 25, 0.12)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
    --main-drop-shadow-box-shadow: 0px 4px 5px rgba(25,25,25,.14),0px 1px 10px rgba(25,25,25,.12),0px 2px 4px rgba(0,0,0,.2);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-colour: #191919;
        --fg-colour: #07000e;
        --text-colour: #ffffff;
        --text-deemphasised-slightly-colour: #ded9d3;
        --text-deemphasised-colour: #bfbab5;
        --post-border-colour: #4a4847;
        --post-body-bg-colour: #000000;
        --main-drop-shadow-filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2));
        --main-drop-shadow-box-shadow: 0px 4px 5px rgba(0,0,0,.14),0px 1px 10px rgba(0,0,0,.12),0px 2px 4px rgba(0,0,0,.2);
    }
}

:root {
    font-family: Atkinson Hyperlegible, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
    --post-max-width: 42em;
    --layout-column-size-l: 24em;
    --layout-column-size-m: 20em;
    --layout-column-size-s: 16em;
    --layout-post-border: var(--post-border-colour) solid 1px;
    background-color: var(--bg-colour);
    color: var(--text-colour);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

.dashboard-page, .tag-page {
    margin-top: 1em;
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1em 1fr 1em;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        '.      menu        .'
        '.      posts       .'
    ;
}

@media (min-width: 44em) {
    .dashboard-page, .tag-page {
        margin-top: 1em;
        grid-template-columns: 1fr min(calc(100% - 2em), var(--post-max-width)) 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            'menu   posts   .'
            '.      posts   .'
        ;
    }
}

body {
    & > header {
        /*height: 8em;*/
        /*background-color: var(--theme-primary-colour);*/
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 1em;
        /*margin-bottom: 1em;*/
    }

    & > footer {
        height: 100%;
    }
}

header, footer {
    & > a {
        color: var(--text-colour);
        text-decoration: none;
    }

    & > a:hover {
        text-decoration: underline;
    }
}

.banner {
    grid-area: banner;
    max-height: 350px;
}

.profile {
    grid-area: profile;
    background-color: var(--theme-primary-colour);
}

.profile-nav {
    grid-area: profile-nav;
    background-color: var(--theme-primary-colour);
}

.posts {
    grid-area: posts;
}

.thread, .info-box {
    position: relative;
    border-radius: 0.5em;
    margin-bottom: 2em;
    border: var(--layout-post-border);
    background-color: var(--post-body-bg-colour);
    --thread-bar-padding: 0.75em;
    --post-bar-padding: 0.5em 0.75em;
    box-shadow: var(--main-drop-shadow-box-shadow);
}

.thread > header {
    display: flex;
    flex-direction: row;
    padding: var(--thread-bar-padding);
    border-bottom: var(--layout-post-border);
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    background-color: var(--post-header-bg-colour);
}

.thread header, .post header {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 0.5em;

    & .profile-display-name {
        font-weight: bold;
    }

    & .profile-name {
        color: var(--text-deemphasised-slightly-colour);
    }

    & time {
        font-size: 0.75em;
        color: var(--text-deemphasised-colour);
    }
}

.thread > footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--thread-bar-padding);
    /*border-top: var(--layout-post-border);*/
    background-color: var(--post-footer-bg-colour);

    & > .buttons > *, & > .buttons > * > * {
        width: 1.5em;
        height: 1.5em;
    }
}

.post {
    /* TODO: This is for the footer, but that's been removed for now */
    /*border-bottom: var(--layout-post-border);*/
    overflow: hidden;
    line-height: 1.75;
}

.post > * {
    padding-left: var(--thread-bar-padding);
    padding-right: var(--thread-bar-padding);
}

.post > header {
    padding: var(--post-bar-padding);
    border-bottom: var(--layout-post-border);
    background-color: var(--post-header-bg-colour);
}

.avatar {
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    --avatar-size: 2em;
    height: var(--avatar-size);
    width: var(--avatar-size);

    & > img {
        max-width: 100%;
        object-fit: cover;
    }
}

.comments .avatar {
    --avatar-size: 3em;
}

@media (width >= 64em) { /* --layout-column-size-s * 4 */
    .thread > header > .avatar {
        --avatar-size: 4em;
        position: absolute;
        top: 0;
        right: calc(100% + 1.5rem);
        filter: var(--main-drop-shadow-filter);
    }
}

body > header > .avatar {
    --avatar-size: min(12em, 90vw);
    filter: var(--main-drop-shadow-filter);
}

.post {
    & > h3 {
        & > a {
            color: inherit;
            text-decoration: none;
        }

        & > a:hover {
            text-decoration: underline;
        }
    }

    & > .post-content {
        margin-top: 1em;
    }

    & > a.read-more {
        display: inline-block;
        color: var(--theme-secondary-colour);
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: bold;
        text-decoration-line: none;
        margin-bottom: var(--thread-bar-padding);

        &:hover {
            text-decoration-line: underline;
        }
    }

    & > .tags {
        margin: var(--thread-bar-padding) 0;
        color: var(--text-deemphasised-colour);

        & > a {
            color: inherit;
            text-decoration: none;
        }

        & > a:hover {
            text-decoration: underline;
        }
    }

    a {
        color: inherit;
    }
}

button {
    /*"co-filled-button tracking-wider whitespace-nowrap flex h-10 items-center justify-center self-center rounded-lg bg-foreground py-2 px-3 leading-none"*/
    border-radius: 0.5rem;
    background-color: #E58F3E;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    border: none;
    cursor: pointer;
}

.info-box {
    background: #FFE8D4;
    color: #191919;
    padding: 0.75em;

    h3 {
        font-size: 1.5em;
        line-height: calc(2 / 1.5);
        margin-top: 0.5rem;
    }

    .badge-row {
        display: flex;
        flex-direction: row;
        gap: 0.5em;
        margin-bottom: 0.5em;

        img {
            align-self: center;
        }

        textarea {
            flex-grow: 1;
        }

        button {
            align-self: flex-end;
        }
    }
}

@media (width < 28em) {
    .info-box .badge-row {
        flex-direction: column;
    }
}