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

#faq{
    padding:96px 0;
    background:rgba(245,239,232,.5);
}

#faq .faq-container{
    width:min(calc(100% - 32px), 896px);
    margin-inline:auto;
}

#faq .faq-heading{
    margin-bottom:64px;
    text-align:center;
}

#faq .faq-label{
    display:block;
    margin-bottom:14px;

    color:var(--color-primary);
    font-family:var(--font-body);
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
}

#faq .faq-title{
    margin-bottom:16px;
    color:var(--color-primary);
}

#faq .faq-description{
    max-width:680px;
    margin:0 auto;

    color:var(--color-text);
    opacity:.7;
}

#faq .accordion-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

#faq .accordion-item{
    width:100%;
    overflow:hidden;

    border:1px solid rgba(201,154,90,.22);
    border-radius:18px;

    background:#fff;
    box-shadow:0 8px 24px rgba(45,33,26,.06);
}

#faq .accordion-item > button{
    width:100%;
    min-height:76px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;

    padding:22px 28px;

    border:0;
    outline:0;

    background:transparent;
    color:var(--color-primary);


    text-align:left;
    cursor:pointer;
}

#faq .accordion-item > button:hover{
    background:rgba(201,154,90,.06);
}

#faq .accordion-item > button:hover > span{
    color:var(--color-primary);
}

#faq .accordion-item > button > span{
    font-family:var(--font-heading);
    font-size:1.35rem;
    font-weight:500;
    line-height:1.25;
}

#faq .accordion-item .chevron{
    width:24px !important;
    height:24px !important;
    min-width:24px;
    max-width:24px;

    display:block;
    flex:0 0 24px;

    color:var(--color-primary);

    transform:rotate(0deg);
    transition:transform .35s ease;
}

#faq .accordion-content{
    max-height:0;
    overflow:hidden;
    opacity:0;
    padding:0 28px;

    transition:
        max-height .45s cubic-bezier(.4,0,.2,1),
        opacity .3s ease;
}

#faq .accordion-content p{
    margin:0;
    padding:0 0 24px;

    color:var(--color-dark-brown);
    font-size:1rem;
    line-height:1.75;
}

#faq .accordion-item.is-open .accordion-content{
    opacity:1;
}

#faq .accordion-item.is-open .chevron{
    transform:rotate(180deg);
}

@media (max-width:767px){

    #faq{
        padding:72px 0;
    }

    #faq .faq-heading{
        margin-bottom:40px;
    }

    #faq .accordion-item > button{
        min-height:68px;
        padding:18px 20px;
        gap:14px;
    }

    #faq .accordion-item > button > span{
        font-size:1.15rem;
    }

    #faq .accordion-content{
        padding-inline:20px;
    }
}

#faq .accordion-item.is-open > button{
    background:rgba(201,154,90,.08);
}

#faq .accordion-item.is-open > button > span{
    color:var(--color-primary);
}