/**************************************
********* HERO SECTION: POST **********
**************************************/
section time {
    font-size:0.9rem;
    color:var(--text-color-gray);
    text-align: center;
}
section time::before {
    content: "🗓 Last Updated On: ";
}

/**************************************
********** BLOG POST SECTION **********
**************************************/
.blog-post-section {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    grid-template-areas: "article-content sidebar";
    align-items: start;
    gap:15px;    
}

article {
    grid-area: article-content;
    font-family: 'DM Sans', Sans-Serif;
    line-height:180% !important;
    font-size:1rem !important; /* Sub content should use em */
    color:rgba(10,10,10,1);
    overflow:hidden;
}

aside {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position:sticky;
    top:100px;
    gap:15px;
}

/**************************************
***** SIDEBAR WIDGET CONTAINERS *******
**************************************/
aside .widget { /* Main widget box */
    display: flex;
    flex-direction: column;
    width:250px; /* Full width of sidebar */
    padding:10px;
    border:1px solid lightgray;
    border-radius: 4px;
    gap:10px;
}
aside .widget > .head-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0;
    margin:0;
    flex-direction: row;
    gap:0;
}

aside .widget > .head-container > .widget-title {
    margin:0;
    padding:0;
    color:rgb(60,60,60);
    width:100%;
    font-weight: bold;
    font-size:1.1rem;
    font-family: 'Poppins', 'DM Sans', Sans-Serif;
} 

aside .widget > .widget-content {
    margin:0;
    padding:0;
    width:100%;
    font-size:0.9rem;
    text-decoration: none;
    font-family: var(--text-font-family);
}

/**************************************
*********** ACTUAL WIDGETS ************
**************************************/
ul#table-of-contents-list {
    width:100%;
    list-style: none;
    margin:0;
}
ul#table-of-contents-list li {
    color:#2c2c2c;
    margin:5px 0;
}
ul#table-of-contents-list li:hover {
    font-weight: bold;
}
ul#table-of-contents-list li::before {
    content:"➡";
    margin-right:5px;
    color:gray;
}

/**********************************************
*************** AUTO TOC **********************
**********************************************/

 .auto-toc {
    width:100%;
    display:block;
    border:1px solid lightgray;
    border-radius: 4px;
    margin-bottom:15px;
}

 .auto-toc > .title-container {
    display: flex;
    justify-content: space-between;
    align-items: space-between;
    width:100%;
    flex-direction: row;
    padding:10px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    cursor:pointer;
    border:1px soid red !important;
}
 .auto-toc > .title-container .toc-title {
    font-weight: bold;
}

 .auto-toc > ul {
    list-style: none;
    padding:15px;
    padding-top:0;
    margin:0;
}

 .auto-toc ul li a {
    font-size: 0.9rem;
    color:var(--link-color);
    font-weight: normal;
    font-family: var(--heading-font-family);
    list-style-type:none;
}

 .auto-toc ul li.sub-list-item {
    margin-left:30px;
}
 .auto-toc ul li.sub-list-item a {
    color:var(--text-color-gray);
}


@media (min-width:850px) { /* Larger than tablets */

     #toc_article {
        display: none !important;
     }
}

@media (max-width: 849px) { /* Smaller than tablets */
    .blog-post-section{
        grid-template-columns: 1fr;
        grid-template-areas: "article-content";
    }
    .blog-post-section aside.hidden-sidebar-mq {
        display: none !important;
    } 
    
     #toc_article {
        display: block !important;
     }
}