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

.faq{

    padding:var(--space-96) 0;

    background:var(--color-white);

}

/*=========================================
HEADER
=========================================*/

.faq__header{

    max-width:760px;

    margin:0 auto var(--space-64);

    text-align:center;

}

.faq__subtitle{

    display:inline-block;

    margin-bottom:var(--space-16);

    color:var(--color-secondary);

    font-size:var(--font-size-sm);

    font-weight:var(--font-weight-semibold);

    letter-spacing:1px;

    text-transform:uppercase;

}

.faq__title{

    margin-bottom:var(--space-24);

    color:var(--color-primary);

}

.faq__description{

    max-width:620px;

    margin:0 auto;

    color:var(--color-text-light);

    line-height:1.8;

}

/*=========================================
GRID
=========================================*/

.faq__grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:var(--space-32);

}

.faq__column{

    display:flex;

    flex-direction:column;

    gap:var(--space-24);

}

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

.faq__item{

    background:var(--color-white);

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:
        box-shadow var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal);

}

.faq__item:hover{

    transform:translateY(-4px);

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

    box-shadow:var(--shadow-md);

}

/*=========================================
QUESTION
=========================================*/

.faq__question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:var(--space-24);

    padding:24px 28px;

    background:transparent;

    cursor:pointer;

    text-align:left;

    font-weight:var(--font-weight-semibold);

    color:var(--color-primary);

}

.faq__question span{

    flex:1;

}

.faq__icon{

    color:var(--color-secondary);

    font-size:1rem;

    transition:
        transform .35s ease,
        color .35s ease;

}

/*=========================================
ANSWER
=========================================*/

.faq__answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.faq__answer p{

    margin:0;

    padding:0 28px 24px;

    color:var(--color-text-light);

    line-height:1.8;

}

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

.faq__item--active{

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

}

.faq__item--active .faq__icon{

    transform:rotate(45deg);

}

/*=========================================
ACCESSIBILITY
=========================================*/

.faq__question:focus-visible{

    outline:3px solid rgba(247,148,29,.30);

    outline-offset:-3px;

}

/*=========================================
RESPONSIVE
=========================================*/

@media (max-width:992px){

    .faq__grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .faq{

        padding:var(--space-80) 0;

    }

    .faq__header{

        margin-bottom:var(--space-48);

    }

    .faq__question{

        padding:20px 22px;

    }

    .faq__answer p{

        padding:0 22px 20px;

    }

}

@media (max-width:576px){

    .faq__question{

        gap:16px;

        font-size:.95rem;

    }

}