/*
todo
- figure out how to properly  align the dot to the center of the first line when long titles wrap to two lines
- make the dot look nicer. reduce shadow? add gradient?
- make the font smaller on small displays. same %-based thing as on the post page?
*/
:root {

    /* favorite posts are indicated with a dot next to the post title */
    --fav-color: #E65100;
    --fav-radius: 6px;
}
.tag {
    border-radius: 4px;
    font-size: 0.75em;
    border: 1px solid #ccc;
    color: #666;
    padding: 1px 5px;
    text-box-trim: trim-both;
    display: flex;
    align-items: center;
    margin-left: 0.5em;

    & + .tag {
        margin-left: 0.35em;
    }
}
.premain {
    max-width: var(--width);
    margin: 25px auto;

    .callout {

        /* For proper rounded corners on the left stripe */
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: -1px;
            bottom: -1px;
            width: 5px;
            background-color: #78B159;
            border-radius: 3px 0 0 3px;
        }
        position: relative;
        border: 1px solid #E5F2DC;
        border-left: none;
        border-radius: 3px;
        background: #F8FDF6;
        color: #182C0B;
        font: var(--body-weight) 14px AbitareSans;
        display: flex;
        width: fit-content;
        align-items: center;
        padding: 10px 15px; /* left padding includes the 5px ::before "border" */
        line-height: 1.35;
        text-wrap: pretty;

        svg {
            margin-right: 10px;
            color: #579F32;            /*margin: 5px 10px 5px 15px;*/
            flex: none;
        }
        p {
            .fav {
                margin: 0em 0.3em;
            }
        }
    }
}
main {
    width: var(--width);
    margin: 30px auto;

    div.post-archive {
        display: grid;
        grid-template-columns: 65px 150px 50px 1fr;
        gap: 0.25em 0em;

        a {
            text-underline-offset: 2px;
        }
        .fav + a {
            color: var(--fav-color);
        }
        .year {
            color: #7B7466;
            font: normal 15px Cartridge;
            display: flex;
            flex-direction: column;
            justify-content: center;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            grid-column: 1;
        }
        .month {
            color: #959595;
            font: normal 15px Cartridge;
            display: flex;
            flex-direction: column;
            justify-content: center;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            grid-column: 2;
            text-align: right;
        }
        .post {
            grid-column: 4;
            align-items: center;
            display: flex;
            text-wrap: pretty;
            line-height: 1.6;
            font-size: 16px;
            align-items: center;

            .fav {
                display: inline-block;
                text-align: center;
                width: 2em;
                margin-left: -2em;
            }
        }
        @media (max-width:650px) {
            grid-template-columns: 1fr;

            .year, .month, .post {
                grid-column: 1;
                text-align: left;
                margin-left: 0
            }
            .month {
                padding-bottom: 0.25em;
                margin-bottom: 0.25em;
            }
            .month-separator {
                height: 0.5em;
                grid-column: 1 / -1
            }
            .post {
                .fav {
                    width: auto;
                    padding: 0 0.75em;
                    margin-left: -10px; /* center the dot in the margin, including the bodywide 10px padding */
                }
            }
        }
    }
}
.fav {
    color: var(--fav-color);
    text-shadow: 0 0 10px var(--fav-color);
}