/* Article features (MMASGT-859): key takeaways, table of contents, CTA, tables */

.af-box{
    margin:0 0 32px;
    padding:22px 26px;
}
.af-box .af-label{
    margin:0 0 12px;
    font-size:13px;
    line-height:1.4;
    letter-spacing:.10em;
    text-transform:uppercase;
    font-weight:700;
    color:var(--green) !important;
}
.af-box ul{
    margin:0;
    padding-left:20px;
}
.af-box ul li:last-child{
    margin-bottom:0;
}

/* Key takeaways */
.af-takeaways{
    background:#F1F5F3;
    border-left:6px solid var(--green);
}
.af-takeaways ul{
    list-style:none;
    padding-left:0;
}
.af-takeaways ul li{
    position:relative;
    margin:0 0 10px;
    padding-left:20px;
    color:var(--second-gray-100);
}
.af-takeaways ul li::before{
    content:"\25B6";
    position:absolute;
    left:0;
    top:0;
    color:var(--orange);
    font-weight:700;
    font-size:.8em;
    line-height:2;
}

/* Table of contents */
.af-toc{
    border:1px solid var(--green);
}
.af-toc ul li{
    margin-bottom:7px;
}
.af-toc a{
    color:var(--green);
    text-decoration:underline;
}
.af-toc a:hover{
    color:var(--orange);
}
.single-post-section .col-content h2[id]{
    scroll-margin-top:120px;
}

/* Call-to-action */
.af-cta{
    margin:32px 0;
    padding:32px 34px;
    background:var(--green);
    border-top:4px solid var(--orange);
}
.single-post-section .col-content .af-cta-title{
    margin:0 0 8px;
    font-size:22px;
    line-height:1.3;
    font-weight:700;
    color:var(--white);
}
.af-cta-text,
.single-post-section .col-content .af-cta-text p{
    margin:0 0 20px;
    font-size:16px;
    line-height:1.55;
    color:#C9D6D1;
}
.af-cta-text p:last-child{
    margin-bottom:0;
}
.af-cta .af-cta-button{
    display:inline-block;
    padding:14px 30px;
    background:var(--orange);
    color:var(--white);
    font-size:16px;
    font-weight:700;
    letter-spacing:.02em;
    text-decoration:none;
    transition:opacity .2s;
}
.af-cta .af-cta-button:hover{
    color:var(--white);
    opacity:.85;
}

/* Tables */
.af-table{
    margin:0 0 24px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}
/* Full width by default; a width set in the editor (inline style) takes over. */
.af-table table{
    width:100%;
    max-width:100%;
    border-collapse:collapse;
    font-size:15px;
}
.single-post-section .af-table table th,
.single-post-section .af-table table thead td{
    padding:10px 12px;
    background:var(--green);
    color:var(--white);
    text-align:left;
    font-weight:600;
    border:none;
}
.single-post-section .af-table table td{
    padding:10px 12px;
    border:none;
    border-bottom:1px solid #E2E0DA;
    vertical-align:top;
    color:var(--second-gray-100);
}
.af-table table p{
    margin:0;
}

@media screen and (max-width:767px){
    .af-box{ padding:18px 20px; }
    .af-cta{ padding:24px; }

    /* On phones, ignore editor widths: use the full column, keep every column
       readable, and let wide tables scroll sideways inside .af-table. */
    .af-table table{
        width:100% !important;
        max-width:none;
        font-size:14px;
    }
    .single-post-section .af-table table th,
    .single-post-section .af-table table td{
        width:auto !important;
        height:auto !important;
        min-width:140px;
        padding:8px 10px;
    }
    .af-table table tr{
        height:auto !important;
    }
}