.section-faq {
    padding-top: @spacer;
    padding-bottom: @spacer;
}

.faq {
    margin-left: 20px;
}

.faq__title {
    &:extend(.h2);
    margin-top: 0;
}

.faq__question {
    &:extend(.bold);
    display: block;
    margin-top: 0;
    margin-bottom: (@spacer / 2);
    cursor: pointer;

    .caret {
        margin-left: -20px;
        margin-right: 10px;
    }

    &.open .caret {
        transform: rotate(90deg);
    }
}

.faq__answer {
    display: none;
    margin-bottom: @spacer;
    margin-left: 0;

    &.open {
        display: block;
        max-height: 800px;
    }
}


.faq--featured {
    .faq__question {
        color: @pink;
    }
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent @greySocial;
    transition: .2s ease-out;
}

.grid__col--toc {
    @media (@screen-sm) {
        flex: 0 0 33% !important;
    }
}

.grid__col--toc {
    position: relative;
}

#toc {
    margin-top: @spacer;

    &.sticky {
        position: fixed;
        top: 0;
        padding-top: @spacer;
    }

    ul {
        &:extend(.list-unstyled all);

        li,
        a {
            line-height: @line-height-base;
        }

        li {
            display: inline-block;

            @media (@screen-sm) {
                display: block;
            }
        }

        a {
            &:extend(.h4);
            color: @link-color;
            display: block;
            margin: 0;
            padding: 8px 12px;

            @media (@screen-sm) {
                padding: 6px 0;
            }
        }

        a:hover,
        .toc-active a {
            color: @link-hover-color;
        }
    }
}