/* =========================================================
   CACAR ARTICLE DETAIL STYLE
   FINAL READING + SIDEBAR OPTIMIZATION

   Structure confirmed:
   .cacar-article-layout
       ├── .cacar-article-root
       └── .cacar-article-toc

   Goals:
   - Wider, calmer long-form reading area
   - 820px article column
   - 270px desktop TOC
   - Sticky + internally scrollable TOC
   - Better TOC wrapping
   - Restrained editorial link styling
   - 4:3 article cover
   - Existing Related Resources / Project CTA preserved
   ========================================================= */


/* =========================================================
   MAIN ARTICLE LAYOUT
   ========================================================= */

.cacar-article-layout{
    width:100% !important;
    max-width:1240px !important;

    margin:0 auto !important;
    padding:0 28px 80px !important;

    display:grid !important;

    grid-template-columns:
        minmax(0, 820px)
        270px !important;

    gap:56px !important;

    justify-content:center !important;
    align-items:start !important;

    box-sizing:border-box !important;
}


/* =========================================================
   ARTICLE ROOT
   ========================================================= */

.cacar-article-root{
    width:100% !important;
    max-width:820px !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box !important;

    background:#fff !important;
    color:#222 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;
}


/* =========================================================
   ARTICLE HEADER / H1
   ========================================================= */

.cacar-article-root
.cacar-article-h1{
    display:block !important;

    width:100% !important;

    margin:0 0 18px !important;
    padding:0 !important;

    font-size:40px !important;
    line-height:1.15 !important;
    font-weight:600 !important;

    letter-spacing:-0.025em !important;

    color:#111 !important;

    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
}


/* =========================================================
   ARTICLE BRIEF
   ========================================================= */

.cacar-article-root
.cacar-article-brief{
    display:block !important;

    width:100% !important;

    margin:0 0 20px !important;
    padding:0 !important;

    font-size:18px !important;
    line-height:1.65 !important;
    font-weight:400 !important;

    color:#626262 !important;

    white-space:normal !important;

    height:auto !important;
    max-height:none !important;

    overflow:visible !important;
    text-overflow:clip !important;
}


/* =========================================================
   ARTICLE META
   ========================================================= */

.cacar-article-root
.cacar-article-meta{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;

    gap:18px !important;

    width:100% !important;

    margin:0 0 34px !important;
    padding:14px 0 !important;

    border-top:1px solid #ece9e5 !important;
    border-bottom:1px solid #ece9e5 !important;

    font-size:13px !important;
    line-height:1.5 !important;

    color:#777 !important;

    box-sizing:border-box !important;
}


/* =========================================================
   ARTICLE COVER
   4:3 BLOG COVER
   ========================================================= */

.cacar-article-cover{
    display:block !important;

    width:100% !important;
    aspect-ratio:4 / 3 !important;

    margin:0 0 42px !important;
    padding:0 !important;

    overflow:hidden !important;

    background:#f5f3f0 !important;

    box-sizing:border-box !important;
}


.cacar-article-cover img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:cover !important;
    object-position:center center !important;

    border:0 !important;
}


/* =========================================================
   PARAGRAPHS
   ========================================================= */

.cacar-article-root p{
    margin:0 0 21px !important;

    font-size:16px !important;
    line-height:1.78 !important;
    font-weight:400 !important;

    color:#333 !important;
}


/* =========================================================
   H2
   ========================================================= */

.cacar-article-root h2{
    margin:50px 0 19px !important;
    padding:0 !important;

    font-size:28px !important;
    line-height:1.28 !important;
    font-weight:600 !important;

    letter-spacing:-0.015em !important;

    color:#111 !important;

    scroll-margin-top:110px !important;
}


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

.cacar-article-root h3{
    margin:32px 0 13px !important;
    padding:0 !important;

    font-size:21px !important;
    line-height:1.4 !important;
    font-weight:600 !important;

    color:#222 !important;
}


/* =========================================================
   H4
   ========================================================= */

.cacar-article-root h4{
    margin:28px 0 12px !important;

    font-size:18px !important;
    line-height:1.45 !important;
    font-weight:600 !important;

    color:#222 !important;
}


/* =========================================================
   LISTS
   ========================================================= */

.cacar-article-root ul,
.cacar-article-root ol{
    margin:4px 0 26px 23px !important;
    padding:0 !important;
}


.cacar-article-root li{
    margin:0 0 8px !important;
    padding-left:4px !important;

    font-size:16px !important;
    line-height:1.7 !important;

    color:#333 !important;
}


/* =========================================================
   STANDARD ARTICLE LINKS
   More restrained than previous red links
   ========================================================= */

.cacar-article-root a{
    color:#222 !important;

    text-decoration:underline !important;
    text-decoration-thickness:1px !important;
    text-underline-offset:4px !important;

    transition:
        color .18s ease,
        opacity .18s ease !important;
}


.cacar-article-root a:hover{
    color:#8c001b !important;
    opacity:.8 !important;
}


/* =========================================================
   BODY IMAGES
   ========================================================= */

.cacar-article-root img{
    max-width:100% !important;
    height:auto;
}


/* =========================================================
   TABLES
   ========================================================= */

.cacar-article-table-scroll{
    width:100% !important;

    margin:30px 0 36px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    -webkit-overflow-scrolling:touch !important;

    border:1px solid #e6e2dc !important;

    box-sizing:border-box !important;
}


.cacar-article-table-scroll table{
    width:100% !important;
    min-width:680px !important;

    margin:0 !important;

    border-collapse:collapse !important;

    background:#fff !important;
}


.cacar-article-table-scroll th{
    padding:14px 16px !important;

    border-bottom:1px solid #ddd8d1 !important;

    background:#f7f5f2 !important;

    font-size:13px !important;
    line-height:1.5 !important;
    font-weight:600 !important;

    text-align:left !important;

    color:#222 !important;
}


.cacar-article-table-scroll td{
    padding:14px 16px !important;

    border-bottom:1px solid #ebe7e2 !important;

    font-size:14px !important;
    line-height:1.65 !important;

    vertical-align:top !important;

    color:#444 !important;
}


.cacar-article-table-scroll tr:last-child td{
    border-bottom:0 !important;
}


/* =========================================================
   DESKTOP ARTICLE OVERVIEW / SIDEBAR
   ========================================================= */

.cacar-article-toc{
    position:sticky !important;

    top:96px !important;

    width:270px !important;
    max-width:270px !important;

    margin:0 !important;
    padding:20px 16px 18px !important;

    border:1px solid #e3ded8 !important;

    background:#fff !important;

    box-sizing:border-box !important;

    max-height:calc(100vh - 126px) !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    overscroll-behavior:contain !important;

    scrollbar-width:thin !important;
    scrollbar-color:#cfc9c2 transparent !important;
}


.cacar-article-toc::-webkit-scrollbar{
    width:5px !important;
}


.cacar-article-toc::-webkit-scrollbar-track{
    background:transparent !important;
}


.cacar-article-toc::-webkit-scrollbar-thumb{
    background:#cfc9c2 !important;
    border-radius:20px !important;
}


/* =========================================================
   TOC TITLE
   ========================================================= */

.cacar-article-toc-title{
    margin:0 0 12px !important;
    padding:0 2px 12px !important;

    border-bottom:1px solid #ebe7e2 !important;

    font-size:11px !important;
    line-height:1.3 !important;
    font-weight:700 !important;

    letter-spacing:.11em !important;
    text-transform:uppercase !important;

    color:#222 !important;
}


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

.cacar-article-toc-list{
    display:flex !important;
    flex-direction:column !important;

    gap:1px !important;

    margin:0 !important;
    padding:0 !important;
}


/* =========================================================
   TOC LINKS
   ========================================================= */

.cacar-article-toc-link{
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:8px 8px 8px 11px !important;

    border-left:2px solid transparent !important;

    background:transparent !important;

    font-size:12px !important;
    line-height:1.4 !important;
    font-weight:400 !important;

    color:#646464 !important;

    text-decoration:none !important;

    overflow-wrap:break-word !important;
    word-break:normal !important;

    box-sizing:border-box !important;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease !important;
}


.cacar-article-toc-link:hover{
    color:#222 !important;

    background:#f8f6f3 !important;

    text-decoration:none !important;
}


.cacar-article-toc-link.is-active{
    color:#8c001b !important;

    border-left-color:#8c001b !important;

    background:#faf6f5 !important;

    font-weight:600 !important;
}


/* =========================================================
   MOBILE ARTICLE OVERVIEW
   ========================================================= */

.cacar-mobile-toc{
    display:none !important;
}


/* =========================================================
   RELATED RESOURCES
   ========================================================= */

.cacar-related-resources{
    width:100% !important;

    margin:62px 0 0 !important;
    padding:32px 0 0 !important;

    border-top:1px solid #dfdad4 !important;

    box-sizing:border-box !important;
}


.cacar-related-resources h2{
    margin:0 0 12px !important;

    font-size:26px !important;
}


.cacar-related-description{
    margin:0 0 24px !important;

    font-size:15px !important;
    line-height:1.7 !important;

    color:#666 !important;
}


.cacar-related-grid{
    display:grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    gap:14px !important;

    width:100% !important;
}


.cacar-related-card{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    min-height:66px !important;

    padding:15px 17px !important;

    border:1px solid #e3ded8 !important;

    background:#fff !important;

    color:#222 !important;

    text-decoration:none !important;

    box-sizing:border-box !important;

    transition:
        border-color .18s ease,
        transform .18s ease !important;
}


.cacar-related-card:hover{
    border-color:#bcb4aa !important;

    transform:translateY(-1px) !important;

    text-decoration:none !important;
}


.cacar-related-card span:first-child{
    font-size:14px !important;
    line-height:1.4 !important;
    font-weight:600 !important;

    color:#222 !important;
}


.cacar-related-arrow{
    margin-left:12px !important;

    font-size:18px !important;

    color:#8c001b !important;
}


/* =========================================================
   TEMPLATE FINAL PROJECT CTA
   ========================================================= */

.cacar-project-cta{
    width:100% !important;

    margin:42px 0 0 !important;
    padding:36px 38px !important;

    background:#f6f3ef !important;

    border:1px solid #e4ded7 !important;

    box-sizing:border-box !important;
}


.cacar-project-cta h2{
    margin:0 0 12px !important;

    font-size:28px !important;
    line-height:1.28 !important;

    color:#111 !important;
}


.cacar-project-cta p{
    max-width:680px !important;

    margin:0 0 22px !important;

    font-size:15px !important;
    line-height:1.7 !important;

    color:#555 !important;
}


.cacar-project-cta-button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:44px !important;

    padding:0 22px !important;

    border:1px solid #8c001b !important;

    background:#8c001b !important;

    color:#fff !important;

    font-size:12px !important;
    font-weight:600 !important;

    letter-spacing:.05em !important;
    text-transform:uppercase !important;

    text-decoration:none !important;

    box-sizing:border-box !important;

    transition:
        background .18s ease,
        color .18s ease !important;
}


.cacar-project-cta-button:hover{
    background:#fff !important;

    color:#8c001b !important;

    opacity:1 !important;

    text-decoration:none !important;
}


/* =========================================================
   INLINE BUYER CTA
   Used inside individual article content
   ========================================================= */

.cacar-blog-inline-cta{
    width:100% !important;

    margin:44px 0 !important;
    padding:28px 30px !important;

    background:#f8f6f2 !important;

    border:1px solid #e7e2dc !important;

    box-sizing:border-box !important;
}


.cacar-blog-inline-cta__eyebrow{
    margin:0 0 8px !important;

    font-size:11px !important;
    line-height:1.4 !important;
    font-weight:700 !important;

    letter-spacing:.1em !important;
    text-transform:uppercase !important;

    color:#777168 !important;
}


.cacar-blog-inline-cta h3{
    margin:0 0 11px !important;

    font-size:22px !important;
    line-height:1.32 !important;
    font-weight:600 !important;

    color:#111 !important;
}


.cacar-blog-inline-cta__text{
    margin:0 0 19px !important;

    font-size:15px !important;
    line-height:1.7 !important;

    color:#55514c !important;
}


.cacar-blog-inline-cta__links{
    display:flex !important;
    flex-wrap:wrap !important;

    gap:10px 24px !important;
}


.cacar-blog-inline-cta__links a{
    display:inline-block !important;

    padding:0 0 3px !important;

    border-bottom:1px solid #aaa39a !important;

    color:#1b1b1b !important;

    font-size:14px !important;
    font-weight:600 !important;

    text-decoration:none !important;
}


.cacar-blog-inline-cta__links a:hover{
    color:#8c001b !important;
    border-bottom-color:#8c001b !important;

    opacity:1 !important;
}


/* =========================================================
   TABLET
   Desktop TOC becomes mobile collapsible TOC
   ========================================================= */

@media (max-width:1024px){

    .cacar-article-layout{
        max-width:920px !important;

        padding-left:28px !important;
        padding-right:28px !important;

        grid-template-columns:minmax(0,1fr) !important;

        gap:0 !important;
    }


    .cacar-article-root{
        max-width:820px !important;

        margin:0 auto !important;
    }


    .cacar-article-toc{
        display:none !important;
    }


    .cacar-mobile-toc{
        display:block !important;

        width:100% !important;

        margin:0 0 28px !important;

        border:1px solid #e2ddd7 !important;

        background:#fff !important;

        box-sizing:border-box !important;
    }


    .cacar-mobile-toc-toggle{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;

        width:100% !important;

        min-height:52px !important;

        padding:0 16px !important;

        border:0 !important;

        background:#fff !important;

        font-size:14px !important;
        line-height:1.4 !important;
        font-weight:600 !important;

        color:#222 !important;

        text-align:left !important;

        cursor:pointer !important;

        box-sizing:border-box !important;
    }


    .cacar-mobile-toc-icon{
        font-size:16px !important;

        color:#8c001b !important;

        transition:transform .2s ease !important;
    }


    .cacar-mobile-toc.is-open
    .cacar-mobile-toc-icon{
        transform:rotate(180deg) !important;
    }


    .cacar-mobile-toc-list{
        display:none !important;

        padding:8px 12px 14px !important;

        border-top:1px solid #ebe7e2 !important;
    }


    .cacar-mobile-toc.is-open
    .cacar-mobile-toc-list{
        display:block !important;
    }


    .cacar-mobile-toc-link{
        display:block !important;

        width:100% !important;

        padding:10px 8px !important;

        border-bottom:1px solid #f0ece8 !important;

        font-size:13px !important;
        line-height:1.45 !important;

        color:#555 !important;

        text-decoration:none !important;

        box-sizing:border-box !important;
    }


    .cacar-mobile-toc-link:last-child{
        border-bottom:0 !important;
    }


    .cacar-mobile-toc-link.is-active{
        color:#8c001b !important;

        font-weight:600 !important;
    }
}


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

@media (max-width:767px){

    .cacar-article-layout{
        width:100% !important;
        max-width:100% !important;

        padding:0 20px 52px !important;
    }


    .cacar-article-root{
        max-width:100% !important;
    }


    .cacar-article-root
    .cacar-article-h1{
        font-size:30px !important;
        line-height:1.22 !important;

        margin-bottom:14px !important;
    }


    .cacar-article-root
    .cacar-article-brief{
        font-size:16px !important;
        line-height:1.65 !important;
    }


    .cacar-article-root
    .cacar-article-meta{
        gap:12px !important;

        margin-bottom:26px !important;
    }


    .cacar-article-cover{
        margin-bottom:32px !important;
    }


    .cacar-article-root p,
    .cacar-article-root li{
        font-size:15px !important;
        line-height:1.76 !important;
    }


    .cacar-article-root h2{
        margin-top:40px !important;

        font-size:24px !important;
    }


    .cacar-article-root h3{
        margin-top:28px !important;

        font-size:19px !important;
    }


    .cacar-blog-inline-cta{
        margin:34px 0 !important;
        padding:24px 20px !important;
    }


    .cacar-blog-inline-cta__links{
        flex-direction:column !important;
        align-items:flex-start !important;

        gap:12px !important;
    }


    .cacar-related-grid{
        grid-template-columns:
            minmax(0,1fr) !important;
    }


    .cacar-project-cta{
        padding:28px 24px !important;
    }


    .cacar-project-cta h2{
        font-size:24px !important;
    }


    .cacar-project-cta-button{
        width:100% !important;
    }
}