/* =====================================================
   Miscellaneous Notes
===================================================== */



/* -----------------------------------------------------
   Tag navigation
----------------------------------------------------- */

.misc-notes-tags {

    display: flex;

    flex-wrap: wrap;

    gap: .3rem;

    margin: 2rem 0 2.5rem;

}

.misc-notes-tag {

    display: inline-flex;

    align-items: center;

    gap: .1rem;

    padding: .3rem;

    border: 1px solid;

    border-radius: 10px;

    background: #fff;

    font: inherit;
    font-size: .9rem;
    letter-spacing: inherit;

    line-height: 1.4;

    cursor: pointer;

    transition:
        background-color .15s ease,
        color .15s ease;

}


/* -----------------------------------------------------
   Tag colors
----------------------------------------------------- */

.misc-notes-tag.tag-black {

    border-color: #000;

    color: #000;

}


.misc-notes-tag.tag-red {

    border-color: var(--red);

    color: var(--red);

}


.misc-notes-tag.tag-blue {

    border-color: var(--blue);

    color: var(--blue);

}

/* -----------------------------------------------------
   Selected tag
----------------------------------------------------- */

.misc-notes-tag.active {

    font-weight: 700;

}


.misc-notes-tag.tag-black.active {

    background: #000;

    color: #fff;

}


.misc-notes-tag.tag-red.active {

    background: var(--red);

    color: #fff;

}


.misc-notes-tag.tag-blue.active {

    background: var(--blue);

    color: #fff;

}

/* -----------------------------------------------------
   Hover
----------------------------------------------------- */

.misc-notes-tag:hover {

    opacity: .8;

}


/* -----------------------------------------------------
   Result count
----------------------------------------------------- */

.misc-notes-count {

    margin: 0 0 1rem;

    color: #000;

    font-size: .9rem;

}


/* -----------------------------------------------------
   Post list
----------------------------------------------------- */

.misc-notes-posts {

    margin: 0;

    padding: 0;

    list-style: none;

}

/* -----------------------------------------------------
   Post
----------------------------------------------------- */

.misc-notes-post {

    display: grid;

    grid-template-columns:
        3.5rem
        minmax(0, 1fr)
        7rem
        12rem;

    column-gap: 1rem;

    align-items: baseline;

    padding: .7rem 0;

    border-bottom: 1px solid #e5e5e5;

}

/* -----------------------------------------------------
   header
----------------------------------------------------- */

.misc-notes-post-header {

    display: grid;

    grid-template-columns:
        3.5rem
        minmax(0, 1fr)
        7rem
        12rem;

    column-gap: 1rem;

    padding: .5rem 0;

    border-bottom: 1px solid #000;

    font-weight: 700;

}

.misc-notes-post-header span {

    text-align: center;

}

.misc-notes-post:last-child {

    border-bottom: 1px solid #000;

}

/* -----------------------------------------------------
   Number
----------------------------------------------------- */

.misc-notes-post-number {

    color: #000;

    font-size: .85rem;

    text-align: center;

    font-variant-numeric:
        tabular-nums;

}


/* -----------------------------------------------------
   Title
----------------------------------------------------- */

.misc-notes-post a {

    color: #000;

    text-decoration: none;

}


.misc-notes-post a:hover {

    text-decoration: underline;

}

.misc-notes-new {

    display: inline-block;

    margin-left: .5rem;

    padding: .1rem .35rem;

    border: 1px solid var(--red);

    border-radius: 4px;

    color: var(--red);

    font-size: .7rem;

    font-weight: 700;

    line-height: 1.2;

    vertical-align: middle;

}

.misc-notes-comment-count {

    font-size: .85rem;

    white-space: nowrap;

}

/* -----------------------------------------------------
   Date
----------------------------------------------------- */

.misc-notes-post-date {

    color: #000;

    font-size: .9rem;
    
    text-align: center;

    font-variant-numeric:
        tabular-nums;

    white-space: nowrap;

}


/* -----------------------------------------------------
   Post tags
----------------------------------------------------- */

.misc-notes-post-tags {

    display: flex;

    flex-wrap: wrap;

    gap: .3rem;

}


/* -----------------------------------------------------
   Post tag
----------------------------------------------------- */

.misc-notes-post-tag {

    display: inline-block;

    padding: .15rem .5rem;

    border: 1px solid;

    border-radius: 10px;

    background: #fff;

    font-size: .8rem;

    line-height: 1.3;

    white-space: nowrap;

}


.misc-notes-post-tag.tag-black {

    border-color: #000;

    color: #000;

}


.misc-notes-post-tag.tag-red {

    border-color: var(--red);

    color: var(--red);

}


.misc-notes-post-tag.tag-blue {

    border-color: var(--blue);

    color: var(--blue);

}

/* =====================================================
   Individual Miscellaneous Note
===================================================== */


/* -----------------------------------------------------
   Header
----------------------------------------------------- */

.misc-notes-header {

    margin-bottom: 2rem;

}


/* -----------------------------------------------------
   Meta
----------------------------------------------------- */

.misc-notes-meta {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.misc-notes-meta h2 {

    margin-bottom: 1rem;

}

article.content .misc-notes-meta h2::before {
    content: none;
}


.misc-notes-information {

    display: grid;

    grid-template-columns: auto 1fr;

    column-gap: 1rem;

    row-gap: .4rem;

    margin: 1rem 0 0;

    margin-top: 1.5rem;

    font-size: .95rem;

    line-height: 1.7;

}


.misc-notes-information dt {

    color: #666;

    font-weight: 600;

}


.misc-notes-information dd {

    margin: 0;

    color: #222;

}


/* -----------------------------------------------------
   Body
----------------------------------------------------- */

.misc-notes-body {

    margin-top: 0;

}


/* -----------------------------------------------------
   Back to list
----------------------------------------------------- */

.misc-notes-back {

    margin-block: 2.5rem;

    text-align: right;

}


.misc-notes-back a {

    color: #000;

    text-decoration: none;

}


.misc-notes-back a:hover {

    text-decoration: underline;
    font-weight:700;

}

/* -----------------------------------------------------
   Mobile
----------------------------------------------------- */

@media (max-width: 768px) {

    .misc-notes-tags {

        width: fit-content;

        max-width: 100%;

        margin: 2rem auto 2.5rem;

        justify-content: flex-start;

        gap: .4rem;


    }


    .misc-notes-tag {

        padding: .25rem .65rem;

        font-size: .9rem;
    }


    .misc-notes-post {

        grid-template-columns:
            2.5rem
            minmax(0, 1fr)
            5.8rem;

        column-gap: .7rem;

        padding: .65rem 0;

    }

    .misc-notes-post-header span:last-child {

        display: none;

    }

    .misc-notes-post-number {

        font-size: .8rem;

    }


    .misc-notes-post-header {

        grid-template-columns:
            2.5rem
            minmax(0, 1fr)
            5.8rem;

        column-gap: .7rem;

    }




    .misc-notes-post-date {

        font-size: .85rem;

    }


    /*
     * Hide tags on mobile
     */

    .misc-notes-post-tags {

        display: none;

    }


    .misc-notes-header {

        margin-bottom: 1.5rem;

    }


    .misc-notes-information {

        gap: .5rem;

        font-size: .85rem;

    }


    .misc-notes-back {

        margin-top: 2rem;

    }


}