/* =========================================================
   FREQUENTLY ASKED QUESTIONS
   ========================================================= */

.tour-faq {
    width: 100%;
}


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

.faq-list {
    width: 100%;
    margin: 0;
    padding: 0;
}


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

.faq-item {
    width: 100%;

    margin: 0;

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


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

.faq-item:first-child {
    border-top: 1px solid var(--color-border);
}


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

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 17px 0;

    color: var(--color-text);

    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 700;

    line-height: 1.5;

    cursor: pointer;

    list-style: none;
}


/* Remove default marker */

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::marker {
    display: none;
}


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

.faq-question span {
    min-width: 0;

    padding-right: 20px;
}


/* =========================================================
   CHEVRON
   ========================================================= */

.faq-question i {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 28px;
    height: 28px;

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

    font-size: 12px;

    transition:
        transform var(--transition-fast),
        color var(--transition-fast);
}


/* =========================================================
   OPEN STATE
   ========================================================= */

.faq-item[open] .faq-question {
    color: var(--color-primary);
}

.faq-item[open] .faq-question i {
    color: var(--color-primary);

    transform: rotate(180deg);
}


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

.faq-answer {
    width: 100%;

    padding: 0 48px 18px 0;
}


.faq-answer p {
    margin: 0;

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

    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;

    line-height: 1.7;
}


/* =========================================================
   HOVER
   ========================================================= */

.faq-question:hover {
    color: var(--color-primary);
}

.faq-question:hover i {
    color: var(--color-primary);
}


/* =========================================================
   FOCUS
   ========================================================= */

.faq-question:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: 3px;
}


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

@media (max-width: 900px) {

    .faq-question {
        padding: 16px 0;

        font-size: 14px;
    }

    .faq-answer {
        padding-right: 40px;
        padding-bottom: 17px;
    }

    .faq-answer p {
        font-size: 14px;
        line-height: 1.65;
    }

}


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

@media (max-width: 700px) {

    .faq-question {
        padding: 16px 0;

        font-size: 15px;
        line-height: 1.5;
    }

    .faq-question span {
        padding-right: 14px;
    }

    .faq-question i {
        width: 26px;
        height: 26px;

        font-size: 12px;
    }

    .faq-answer {
        padding:
            0
            34px
            16px
            0;
    }

    .faq-answer p {
        font-size: 15px;
        line-height: 1.65;
    }

}


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

@media (max-width: 420px) {

    .faq-question {
        padding: 15px 0;

        font-size: 15px;
    }

    .faq-question i {
        width: 24px;
        height: 24px;
    }

    .faq-answer {
        padding-right: 28px;
        padding-bottom: 15px;
    }

    .faq-answer p {
        font-size: 15px;
        line-height: 1.65;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .faq-question i {
        transition: none;
    }

}