/* ========================================
   BLOG SIDEBAR
======================================== */

.blog-sidebar{
   position: sticky;
    top: -591px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ========================================
   SIDEBAR CARD
======================================== */

.sidebar-card{
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0,0,0,.05);
}

/* ========================================
   SEARCH FORM
======================================== */

.search-form{
    position: relative;
}

.search-form label{
    display:block;
}

.search-form .search-field{
    width:100%;
    height:52px;
    padding:0 55px 0 18px;
    border:1px solid #D1D5DB;
    border-radius:10px;
    font-size:15px;
    outline:none;
    transition:.3s;
}

.search-form .search-field:focus{
    border-color:#2563EB;
}

.search-form .search-submit{
position: absolute;
    right: 6px;
    top: 6px;
    width: 100px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: #2563EB;
    color: #fff;
    cursor: pointer;
    transition: .3s;
}

.search-form .search-submit:hover{
    background:#1D4ED8;
}

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

.toc-card h3{
    font-size:20px;
    margin-bottom:20px;
    color:#111827;
}

#toc-list{
    list-style:none;
    margin:0;
    padding:0;
}

#toc-list li{
    margin-bottom:10px;
}

#toc-list li:last-child{
    margin-bottom:0;
}

#toc-list a{
    display:block;
    padding:10px 14px;
    text-decoration:none;
    color:#4B5563;
    font-size:15px;
    line-height:1.5;
    border-left:3px solid transparent;
    border-radius:8px;
    transition:.3s;
}

#toc-list a:hover{
    background:#F3F4F6;
    color:#2563EB;
}

#toc-list a.active{
    background:#EFF6FF;
    color:#2563EB;
    border-left-color:#2563EB;
    font-weight:600;
}

/* ========================================
   CTA CARD
======================================== */

.sidebar-cta{
    background:linear-gradient(135deg,#2563EB,#1E40AF);
    color:#fff;
    text-align:center;
}

.sidebar-cta h4{
    font-size:24px;
    margin-bottom:15px;
}

.sidebar-cta p{
    font-size:15px;
    line-height:1.7;
    opacity:.9;
    margin-bottom:25px;
}

.sidebar-cta .btn{
    display:inline-block;
    width:100%;
    padding:14px 20px;
    background:#fff;
    color:#2563EB;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.sidebar-cta .btn:hover{
    background:#F9FAFB;
    transform:translateY(-2px);
}

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

@media (max-width:991px){

    .blog-sidebar{
        position:static;
        margin-top:40px;
    }

}