.singlepost-content{
    background:var(--surface);

    border:1px solid var(--line-300);

    border-radius:32px;

    padding:50px;
}

.singlepost-content p{
    font-size:18px;

    line-height:2;

    color:var(--color-ink);

    margin-bottom:28px;
}

.singlepost-content h2,
.singlepost-content h3{
    margin-top:60px;
    margin-bottom:24px;

    line-height:1.3;

    color:var(--color-ink);
}

.singlepost-content img{
    width:100%;
    height:auto;

    border-radius:24px;

    margin:40px 0;
}

@media(max-width:768px){

    .singlepost-content{
        padding:28px;
        border-radius:24px;
    }

    .singlepost-content p{
        font-size:16px;
    }

}
/*
====================================================
TABLE OF CONTENTS
====================================================
*/

.singlepost-toc{
    margin-bottom:32px;

    background:var(--surface);

    border:1px solid var(--line-300);

    border-radius:24px;

    overflow:hidden;
}

/*
====================================================
TOGGLE
====================================================
*/

.singlepost-toc-toggle{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:16px;

    padding:20px 24px;

    border:none !important;

    background:var(--surface) !important;

    cursor:pointer;

    font-size:16px;
    font-weight:700;

    color:var(--color-ink) !important;

    box-shadow:none !important;

    outline:none !important;

    transition:none !important;
}

/* REMOVE ALL HOVER EFFECT */

.singlepost-toc-toggle:hover,
.singlepost-toc-toggle:focus,
.singlepost-toc-toggle:active{
    background:var(--surface) !important;

    color:var(--color-ink) !important;

    box-shadow:none !important;

    outline:none !important;
}

/*
====================================================
ICON
====================================================
*/

.toc-toggle-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--color-ink);

    transition:transform .25s ease;
}

.singlepost-toc.active .toc-toggle-icon{
    transform:rotate(180deg);
}

/*
====================================================
CONTENT
====================================================
*/

.singlepost-toc-content{
    display:none;

    padding:
        0
        24px
        24px;
}

.singlepost-toc.active .singlepost-toc-content{
    display:block;
}

/*
====================================================
LIST
====================================================
*/

.singlepost-toc-list{
    display:flex;

    flex-direction:column;

    gap:14px;

    margin:0;
    padding:0;

    list-style:none;
}

.singlepost-toc-list li{
    position:relative;

    padding-left:18px;

    line-height:1.6;
}

/*
====================================================
CUSTOM BULLET
====================================================
*/

.singlepost-toc-list li::before{
    content:'';

    position:absolute;

    top:10px;
    left:0;

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--color-primary);
}

/*
====================================================
LINK
====================================================
*/

.singlepost-toc-list li a{
    display:block;

    text-decoration:none !important;

    color:var(--color-ink) !important;

    font-size:15px;

    line-height:1.6;

    background:none !important;

    transition:color .2s ease;
}

/* REMOVE HOVER BG */

.singlepost-toc-list li a:hover,
.singlepost-toc-list li a:focus,
.singlepost-toc-list li a:active{
    background:none !important;

    color:var(--color-primary) !important;

    text-decoration:none !important;
}

/*
====================================================
H3 INDENT
====================================================
*/

.toc-level-3{
    padding-left:34px !important;
}

/*
====================================================
MOBILE
====================================================
*/

@media(max-width:768px){

    .singlepost-toc-toggle{
        padding:18px 20px;

        font-size:15px;
    }

    .singlepost-toc-content{
        padding:
            0
            20px
            20px;
    }

}
/*
====================================================
CODE BLOCK LABEL
====================================================
*/

.singlepost-content pre{
    position:relative;

    margin:
        32px
        0;

    border-radius:18px;

    overflow:hidden;
}

/*
====================================================
LABEL
====================================================
*/

.singlepost-content pre[data-label]::before{
    content:attr(data-label);

    display:flex;
    align-items:center;

    height:42px;

    padding:
        0
        18px;

    background:var(--color-ink);

    border-bottom:1px solid rgba(31,35,40,0.08);

    color:var(--white);

    font-size:12px;
    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;
}

/*
====================================================
REMOVE DOUBLE MARGIN
====================================================
*/

.singlepost-content pre code{
    display:block;

    margin:0 !important;

    border-radius:0 !important;
}
/*
====================================================
READING PROGRESS
====================================================
*/

.reading-progress{
    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:3px;

    z-index:99999;

    pointer-events:none;
}

.reading-progress-bar{
    width:0;

    height:100%;

    background:linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-primary-hover)
    );

    transition:width .08s linear;
}

@media(max-width:768px){

    .reading-progress{
        height:2px;
    }

}