/**
 * ==========================================================================
 * FIGORA Global Skills Nexus
 * ----------------------------------------------------------------------------
 * FAQ Component
 * File : assets/css/components/faq.css
 * Version : 2.0.0
 * ==========================================================================
 */

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

.section-faq{

    padding:100px 0;

    background:#F8FAFC;

}

.section-faq .section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.faq-wrapper{
    display:grid;
    grid-template-columns:minmax(0,3fr) 320px;
    gap:40px;
    align-items:start;
}

.faq-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* ==========================================================
   ITEM
========================================================== */

.faq-item{

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 28px rgba(15,23,42,.05);

    transition:.3s ease;

}

.faq-item:hover{

    border-color:var(--color-primary);

    box-shadow:0 18px 45px rgba(15,23,42,.10);

}

.faq-item__question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:24px 28px;

    background:none;

    border:none;

    cursor:pointer;

    text-align:left;

}

.faq-item__title{

    font-size:1.05rem;

    font-weight:700;

    color:var(--color-heading);

    line-height:1.5;

}

.faq-item__icon{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    color:var(--color-primary);

}

.faq-item__chevron{

    transition:.3s ease;

}

.faq-item__question[aria-expanded="true"] .faq-item__chevron{

    transform:rotate(180deg);

}

.faq-item__answer{

    padding:0 28px 28px;

    line-height:1.8;

    color:var(--color-text);

}

.faq-item__answer p:last-child{

    margin-bottom:0;

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

.faq-sidebar{

    position:sticky;

    top:110px;

}

.faq-help-card{

    padding:32px;

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:22px;

    box-shadow:0 15px 40px rgba(15,23,42,.06);

}

.faq-help-card h3{

    margin:0 0 18px;

    color:var(--color-heading);

    font-size:1.8rem;

}

.faq-help-card p{

    margin:0 0 30px;

    line-height:1.85;

    color:var(--color-text);

}

.faq-help-card .btn{

    width:100%;

    justify-content:center;

}

/* ==========================================================
   ACTIVE STATE
========================================================== */

.faq-item.is-open{

    border-color:var(--color-primary);

    box-shadow:0 18px 45px rgba(37,99,235,.12);

    background:#FBFDFF;

}

.faq-item.is-open .faq-item__title{

    color:var(--color-primary);

}

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

@media (max-width:991px){

    .section-faq{

        padding:80px 0;

    }

    .faq-wrapper{

        grid-template-columns:1fr;

        gap:40px;

    }

    .faq-sidebar{

        position:static;

    }

}

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

@media (max-width:767px){

    .section-faq{

        padding:70px 0;

    }

    .section-faq .section-header{

        margin-bottom:50px;

    }

    .faq-item__question{

        padding:20px;

    }

    .faq-item__title{

        font-size:1rem;

    }

    .faq-item__answer{

        padding:0 20px 20px;

    }

    .faq-help-card{

        padding:28px;

    }

    .faq-help-card h3{

        font-size:1.5rem;

    }

}
/* ==========================================================
   GUTENBERG CONTENT INSIDE FAQ
========================================================== */

.faq-item__answer > *:first-child{
    margin-top:0;
}

.faq-item__answer > *:last-child{
    margin-bottom:0;
}

.faq-item__answer .wp-block-heading{

    margin:0 0 16px;

    font-size:1.2rem;

    line-height:1.4;

    color:var(--color-heading);

}

.faq-item__answer .wp-block-paragraph{

    margin:0 0 16px;

    line-height:1.8;

    color:var(--color-text);

}

.faq-item__answer strong{

    color:var(--color-heading);

    font-weight:700;

}

.faq-item__answer ul,
.faq-item__answer ol{

    margin:16px 0 16px 22px;

}

.faq-item__answer li{

    margin-bottom:8px;

}