/* FAQ page styles */

main .inner > section.faqs {
    margin-top: 2em;
}

section.faqs div.faq-item {
    background-color: var(--color-off-white);
    border: solid 1px var(--color-grey);
    box-shadow: 1px 1px 2px var(--color-dark-grey-30);
    order: 2;
    border-radius: 0.5em;
    margin-bottom: 1em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    section.faqs div.faq-item h2.faq-item-title {
        position: relative;
        padding: 1rem;
        margin-bottom: 0;
        background-color: var(--color-grey-50);
        color: var(--color-blue);
        font-weight: var(--font-weight-regular);
        cursor: pointer;
    }

        section.faqs div.faq-item h2.faq-item-title:after {
            content: url(/_resources/files/icons/arrow.svg);
            width: 0.5em;
            height: 1em;
            display: block;
            position: absolute;
            right: 0.75em;
            top: calc(50% - 0.5em);
            -moz-transition: all ease .2s;
            -o-transition: all ease .2s;
            -webkit-transition: all ease .2s;
            transition: all ease .2s;
        }

    section.faqs div.faq-item.is-open h2.faq-item-title:after {
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    section.faqs div.faq-item div.faq-item-details {
        overflow: hidden;
        opacity: 0;
        -moz-transition: max-height ease .28s, opacity ease .2s;
        -o-transition: max-height ease .28s, opacity ease .2s;
        -webkit-transition: max-height ease .28s, opacity ease .2s;
        transition: max-height ease .28s, opacity ease .2s;
    }

        section.faqs div.faq-item div.faq-item-details div.faq-item-details-content {
            padding: 1em;
        }

    section.faqs div.faq-item.is-open div.faq-item-details {
        opacity: 1;
    }