/*==================== FAQ PAGE STYLES ======================*/
:root{
}

/*-------------------- ICONS --------------------*/
/* style.css sets `color` on every element, which breaks `currentColor` inside SVG */
svg, svg * {color: inherit;}

/*-------------------- PAGE BANNER --------------------*/
:where(.page-faq) .page-banner {
    display: flex;
    align-items: center;
    overflow: hidden;
}

/*-------------------- FAQ ACCORDION --------------------*/
:where(.page-faq) .faq-list {display: flex;flex-direction: column;gap: 26px;}
:where(.page-faq) .faq-item {border: 1px solid var(--color-golden);padding: 20px;}
:where(.page-faq) .faq-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0;
    background-color: transparent;
    border: 0;
    text-align: left;
    outline: none !important;
    box-shadow: none !important;
}
:where(.page-faq) .faq-toggle {
    min-width: 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-golden);
    transition: 0.3s ease;
}
:where(.page-faq) .faq-toggle-bar {transform-origin: center;transition: 0.3s ease;}
/* open = minus: drop the vertical stroke of the plus */
:where(.page-faq) .faq-item.active .faq-toggle-bar {opacity: 0;transform: rotate(90deg);}
:where(.page-faq) .faq-body {display: none;padding-top: 9px;}
:where(.page-faq) .faq-item.active .faq-body {display: block;}
:where(.page-faq) .faq-body p {color: var(--color-white);}
:where(.page-faq) .faq-body p + p {margin-top: 10px;}
:where(.page-faq) .faq-body a {color: var(--color-golden);}

/*-------------------- STILL HAVE QUESTIONS --------------------*/
:where(.page-faq) .faq-cta {border: 1px solid var(--border-color-light);padding: 40px 32px;}

/*-------------------- MEDIA QUERY --------------------*/
@media screen and (max-width: 991px) {
    :where(.page-faq) .faq-list {gap: 20px;}
}
@media screen and (max-width: 767px) {
    :where(.page-faq) .faq-item {padding: 16px;}
    :where(.page-faq) .faq-head {gap: 16px;}
    :where(.page-faq) .faq-cta {padding: 28px 20px;}
}