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

/*---------- Section ----------*/

.faq{}

/*---------- Container ----------*/

.faq__container{
    max-width:820px;
}

/*---------- Header ----------*/

.faq__header{
    margin-bottom:var(--space-4);
}

.faq__title{}

.faq__description{}

/*---------- Grid ----------*/

.faq__grid{
    display:grid;
    gap:var(--space-2);
}

/*---------- Item (accordion) ----------*/

.faq-item{
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    background:var(--surface);
    border-left:3px solid var(--primary);
    overflow:hidden;
    transition:box-shadow var(--transition), border-color var(--transition);
}

.faq-item.is-open{
    box-shadow:var(--shadow-sm);
    border-left-color:var(--accent);
}

.faq-item__toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-2);
    width:100%;
    padding:var(--space-3);
    text-align:left;
}

.faq-item__question{
    font-size:1.05rem;
    color:var(--primary-dark);
}

.faq-item__icon{
    position:relative;
    flex-shrink:0;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--primary-soft);
    transition:background var(--transition), transform var(--transition);
}

.faq-item__icon::before,
.faq-item__icon::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    background:var(--primary-dark);
    transition:transform var(--transition), background var(--transition);
}

.faq-item__icon::before{
    width:10px;
    height:2px;
    transform:translate(-50%,-50%);
}

.faq-item__icon::after{
    width:2px;
    height:10px;
    transform:translate(-50%,-50%);
}

.faq-item.is-open .faq-item__icon{
    background:var(--accent);
}

.faq-item.is-open .faq-item__icon::before,
.faq-item.is-open .faq-item__icon::after{
    background:var(--text-invert);
}

.faq-item.is-open .faq-item__icon::after{
    transform:translate(-50%,-50%) rotate(90deg) scaleY(0);
}

.faq-item__panel{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows var(--transition-slow);
}

.faq-item__panel-inner{
    overflow:hidden;
    min-height:0;
}

.faq-item__answer{
    padding:0 var(--space-3) var(--space-3);
    color:var(--text-soft);
}

/*---------- Footer ----------*/

.faq__footer{
    margin-top:var(--space-4);
    text-align:center;
}

.faq__contact-text{
    margin-bottom:var(--space-2);
    color:var(--text-soft);
}

.faq__actions{
    display:flex;
    justify-content:center;
    gap:var(--space-2);
    flex-wrap:wrap;
}