/* ╭──────────────────────────────────────────────╮
/  │               _       _                 _    │
/  │  _ __   ___ | |_ ___| |__   ___   ___ | | __ │
/  │ | '_ \ / _ \| __/ _ \ '_ \ / _ \ / _ \| |/ / │
/  │ | | | | (_) | ||  __/ |_) | (_) | (_) |   <  │
/  │ |_| |_|\___/ \__\___|_.__/ \___/ \___/|_|\_\ │
/  ╰──────────────────────────────────────────────╯
/  notebook - specific styling for the notebook page where blogish things live */

details.notebook.article-category {
    overflow: clip;
    border-radius: .8rem .4rem .8rem .4rem;
    background-color: color-mix(in srgb, var(--accent) 15%, transparent);
    padding-bottom: .01rem;
    /* weird bug ??? without this there is no space underneath so */

    summary {
        span {
            padding-right: .6rem;
        }

        padding: .5rem;
        background: linear-gradient(color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent) 30%, transparent));
        border-bottom: unset !important;
        cursor: pointer;
    }

    .article-card {
        padding: 1rem;
        margin: 1.4rem;
        border-radius: 1rem;
        border: .1rem solid var(--border);
        background-color: var(--background);

        h2 {
            margin-top: 0rem !important;
        }

        .tags-holder {
            margin-top: -.7rem !important;

            a {
                margin-top: -1rem !important;
                transition: all .2s;
                opacity: .9;
                padding: .3rem;
                border: solid .1rem var(--accent);
                border-radius: .4rem;
                font-size: .8rem;
            }

            a:hover {
                opacity: 1;
                text-shadow: none;
            }
        }

        .read {
            transition: all .2s;
            text-decoration: none;
        }

        .read:hover {
            transition: all .2s;
            text-decoration: underline;
        }
    }
}

@media screen and (max-width: 59em) {
    details.notebook {
        .article-card {
            padding: .5rem;
            margin: .6rem;
        }
    }
}

/* ------------------------------------
- addition to above (the post pages ) -
------------------------------------ */

#information.window {
    .post-info {
        p {
            margin: 0rem !important;
        }

        span {
            color: var(--ui-green);
            opacity: .8;
        }

        p:first-child, p:last-child {
            opacity: .5;
        }
    }
}