:root{
    --yv-green:#1F5A3D;
    --yv-orange:#D96B1D;
    --yv-cream:#F8F6F1;
}

/* ==========================================
   PROGRESS BAR
========================================== */

#yv-progress-bar{
    position:fixed;
    top:0;
    left:0;
    width:0%;
    height:4px;
    background:var(--yv-green);
    z-index:99999;
    transition:width .1s linear;
}

/* ==========================================
   HERO SECTION
========================================== */

.yv-hero{
    position:relative;
    border-radius:30px;
    overflow:hidden;
    margin-bottom:40px;
}

.yv-hero img{
    width:100%;
    height:600px;
    object-fit:cover;
    display:block;
}

.yv-hero-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:60px;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.05)
    );
    color:#fff;
}

.yv-category{
    display:inline-block;
    background:var(--yv-green);
    padding:8px 16px;
    border-radius:50px;
    color:#fff;
}

/* ==========================================
   BLOG LAYOUT
========================================== */

.yv-layout{
    display:grid;
    grid-template-columns:minmax(0,850px) 320px;
    gap:40px;
    max-width:1300px;
    margin:auto;
}

.yv-article{
    font-size:19px;
    line-height:1.9;
}

.yv-article h2{
    color:var(--yv-green);
    margin-top:60px;
    margin-bottom:20px;
}

.yv-article h3{
    color:var(--yv-green);
    margin-top:40px;
}

.yv-article img{
    width:100%;
    border-radius:20px;
    margin:30px 0;
}

.yv-article blockquote{
    background:var(--yv-cream);
    padding:30px;
    border-left:5px solid var(--yv-orange);
    border-radius:16px;
}

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

.yv-sidebar{
    position:sticky;
    top:120px;
    height:max-content;
}

.yv-toc{
    background:var(--yv-cream);
    padding:25px;
    border-radius:20px;
    margin-bottom:25px;
}

.yv-toc h3{
    margin-top:0;
    color:var(--yv-green);
}

.yv-toc ul,
#yv-toc-container{
    list-style:none;
    padding:0;
    margin:0;
}

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

#yv-toc-container a{
    text-decoration:none;
    color:var(--yv-green);
    font-weight:600;
    display:block;
    padding:4px 0;
}

#yv-toc-container a:hover{
    color:var(--yv-orange);
}

/* ==========================================
   CTA BOX
========================================== */

.yv-cta-box{
    background:var(--yv-cream);
    padding:25px;
    border-radius:20px;
    text-align:center;
}

.yv-btn{
    display:inline-block;
    padding:14px 28px;
    background:var(--yv-orange);
    color:#fff;
    border-radius:50px;
    text-decoration:none;
    transition:.3s ease;
}

.yv-btn:hover{
    transform:translateY(-2px);
}

/* ==========================================
   AUTHOR BOX
========================================== */

.yv-author-box{
    margin-top:60px;
    padding:35px;
    background:var(--yv-cream);
    border-radius:24px;
    display:flex;
    gap:25px;
    align-items:center;
}

/* ==========================================
   FAQ
========================================== */

.yv-faq{
    background:#fff;
    border:1px solid #eee;
    padding:20px;
    border-radius:15px;
    margin-bottom:15px;
}

.yv-faq summary{
    cursor:pointer;
    font-weight:600;
    color:var(--yv-green);
}

/* ==========================================
   TABLET
========================================== */

@media (max-width:992px){

    .yv-layout{
        grid-template-columns:1fr;
    }

    .yv-sidebar{
        position:relative;
        top:auto;
    }

    .yv-hero img{
        height:350px;
    }
}

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

@media (max-width:768px){

    .yv-article{
        font-size:17px;
    }

    .yv-hero-overlay{
        padding:30px 20px;
    }

    .yv-author-box{
        flex-direction:column;
        text-align:center;
    }
}