/*==================================================

    MentalFluency Framework

    Accordion

==================================================*/


/*==================================================
    Accordion
==================================================*/

.mf-accordion{

    display:flex;

    flex-direction:column;

    gap:16px;

}


/*==================================================
    Item
==================================================*/

.mf-accordion-item{

    background:white;

    border:1px solid #ebe7df;

    border-radius:16px;

    overflow:hidden;

    transition:

            box-shadow .18s ease,

            border-color .18s ease;

}


.mf-accordion-item.open{

    border-color:#1f7a6b;

    box-shadow:

            0 8px 24px rgba(0,0,0,.05);

}


/*==================================================
    Header
==================================================*/

.mf-accordion-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:20px 24px;

    cursor:pointer;

    transition:

            background .18s ease;

}


.mf-accordion-header:hover{

    background:#f7f6f3;

}


/*==================================================
    Heading
==================================================*/

.mf-accordion-heading{

    display:flex;

    align-items:center;

    gap:14px;

    flex:1;

}


/*==================================================
    Icon
==================================================*/

.mf-accordion-icon{

    width:22px;

    height:22px;

    flex:none;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#1f7a6b;

}


.mf-accordion-icon img{

    width:22px;

    height:22px;

    display:block;

}

.mf-accordion-icon svg{

    width:22px;

    height:22px;

    display:block;

    stroke:currentColor;

}

/*==================================================
    Title
==================================================*/

.mf-accordion-title{

    font-size:18px;

    font-weight:600;

    color:#222;

}


/*==================================================
    Chevron
==================================================*/

.mf-accordion-chevron{

    width:18px;

    height:18px;

    flex:none;

    transition:

            transform .22s ease;

}


.mf-accordion-chevron svg{

    width:18px;

    height:18px;

}


.mf-accordion-item.open
.mf-accordion-chevron{

    transform:rotate(180deg);

}


/*==================================================
    Content
==================================================*/

.mf-accordion-content{

    max-height:0;

    overflow:hidden;

    transition:

            max-height .28s ease;

}


.mf-accordion-item.open
.mf-accordion-content{

    max-height:700px;

}


/*==================================================
    Inner
==================================================*/

.mf-accordion-inner{

    padding:

            0
            24px
            24px
            60px;

    color:#565656;

    line-height:1.75;

    font-size:16px;

}


/*==================================================
    Paragraph
==================================================*/

.mf-accordion-inner p{

    margin:0 0 14px;

}


/*==================================================
    Lists
==================================================*/

.mf-accordion-inner ul{

    margin:0;

    padding-left:22px;

}


.mf-accordion-inner li{

    margin:8px 0;

}


/*==================================================
    Strong
==================================================*/

.mf-accordion-inner strong{

    color:#1f7a6b;

}


/*==================================================
    Links
==================================================*/

.mf-accordion-inner a{

    color:#1f7a6b;

    text-decoration:none;

}


.mf-accordion-inner a:hover{

    text-decoration:underline;

}


/*==================================================
    Mobile
==================================================*/

@media (max-width:768px){

    .mf-accordion{

        gap:12px;

    }

    .mf-accordion-header{

        padding:18px;

    }

    .mf-accordion-title{

        font-size:17px;

    }

    .mf-accordion-inner{

        padding:

                0
                18px
                18px
                52px;

        font-size:15px;

    }

}