/* -- GENERIC FAQ -- */

//Icon
@faq_fa_icon: f107;
@faq_fa_icon_close: f107;
@faqs_icon_right: 0;
@faqs_icon_right_flyout: 0;
@faqs_icon_right_mobile: 0;

//Border and shadow
@faqs_border_color: @border_color;
@faqs_border_width: 1px;
@faqs_box_shadow: none;
@faq_border_radius: 0;

//Spacing
@faqs_padding: 36px 32px 17px 0;
@faqs_answer_padding: 19px 0;

@faqs_padding_flyout: 24px 32px 13px 0;
@faqs_answer_padding_flyout: 19px 0;

@faqs_padding_mobile: 24px 32px 13px 0;
@faqs_answer_padding_mobile: 19px 0;

//Colours
@faqs_question_bg_colour: transparent;
@faqs_question_text_colour: @text_color;

@faqs_answer_bg_colour: transparent;
@faqs_answer_text_colour: @text_color;

//Font sizes
@faqs_question_font_size: 18;
@faqs_question_line_height: 24px;
@faqs_question_font_size_flyout: 18;
@faqs_question_line_height_flyout: 24px;
@faqs_question_font_size_mobile: 18;
@faqs_question_line_height_mobile: 24px;

@faqs_answer_font_size: 16;
@faqs_answer_line_height: 24px;
@faqs_answer_font_size_flyout: 16;
@faqs_answer_line_height_flyout: 24px;
@faqs_answer_font_size_mobile: 16;
@faqs_answer_line_height_mobile: 24px;


/*
* Faq options
 */
@faq_option_padding: 16px 24px;
@faq_option_padding_mobile: 12px 16px;


ul.faqs, ul.accordion {
    float: none;
    clear: both;
    width: 100%;
    margin-bottom: 0;
    border-radius: @faq_border_radius;
    overflow: hidden;
    border: none;
    box-shadow: @faqs_box_shadow;
	letter-spacing: normal;
    //border-bottom: @faqs_border_width solid @faqs_border_color;

    @media @flyout {
        margin-bottom: 0;
    }

    @media @mobile {
        margin-bottom: 0;
    }


    .innerContentWrap {
        display: none;
        padding: @faqs_answer_padding;
		
		.darkBg & {
			color: @dark_text_color;
		}
    }

    &.accordionReady {
        .innerContentWrap {
            display: block;
        }

    }

    li {
        float: none;
        clear: both;
        width: 100%;

		
		a {
			display: inline-block;
			font-weight: 500;
			padding-right: 18px;
			position: relative;
			letter-spacing: normal;
		}


        & > h4 {
            position: relative;
            float: none;
            clear: both;
            width: 100%;
            background: @faqs_question_bg_colour;
            border-bottom: none;
            border-bottom: @faqs_border_width solid @faqs_border_color;
            margin: 0;
            color: @faqs_question_text_colour;
            cursor: pointer;
            .rems(@faqs_question_font_size);
            line-height: @faqs_question_line_height;
            padding: @faqs_padding;
            transition: all 200ms linear;
            font-family: @primary_font;

            @media @flyout {
                .rems(@faqs_question_font_size_flyout);
                line-height: @faqs_question_line_height_flyout;
                padding: @faqs_padding_flyout;
            }

            @media @mobile {
                .rems(@faqs_question_font_size_mobile);
                line-height: @faqs_question_line_height_mobile;
                padding: @faqs_padding_mobile;
            }


            .darkBg & {
                color: #fff;
                border-color: fade(#fff, 40%);
            }

            .faqsGrid & {
                .rems(16);
                line-height: 28px;
                font-weight: normal;
                padding: 17px 40px 18px 0;
                border-color: @border_color;

                @media @flyout {
                    .rems(16);
                    line-height: 28px;
                    font-weight: normal;
                    padding: 17px 40px 18px 0;
                }

                @media @mobile {
                    .rems(16);
                    line-height: 28px;
                    font-weight: normal;
                    padding: 17px 40px 18px 0;
                }
            }


            .faqIcon {

                width: 24px;
                height: 24px;
                border-radius: 50%;
                padding: 0;
                text-indent: 0;
                border: none;
                background: transparent;
                color: #696969;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%) rotate(0deg);
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 200ms linear;
                box-sizing: border-box;
                z-index: 2;
				margin-top: 5px;
				
				@media @mobile {
					width: 24px;
					height: 24px;
				}

                .faqsGrid & {
                    width: 9px;
                    height: 9px;
                }
				

                svg {
                    width: 100%;
                    height: 100%;

                    path {
                        fill: #696969;
                        transition: color 200ms linear;
                    }

                }

                .darkBg & {

                    color: #fff;
                    border-color: @border_color;

                    svg {

                        path {
                            fill: #fff;
                            transition: color 200ms linear;
                        }

                    }
                }
				
				& > span {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.iconClosed {
					display: flex;
				}

				.iconOpen {
					display: none;
				}
				
            }



            &.open {


                .faqIcon {
                    transform: translateY(-50%) rotate(180deg);
                    transition: all 200ms linear;

                    .darkBg & {
                        color: #fff;

                        svg {
                            path {
                                fill: #fff;
                            }
                        }
                    }

					.iconClosed {
						display: none;
					}

					.iconOpen {
						display: flex;
					}
                }

                & + .answer, & + .content {
                    .innerContentWrap {
                        display: block;
                    }
                }

            }

            &:hover, &:active, &:focus-visible {

                color: @highlight_color;
                transition: all 200ms linear;

                &:after {
                    color: @highlight_color;
                    transition: all 200ms linear;
                }

                .faqIcon {
                    svg {

                        path {
                            fill: #696969;
                            transition: color 200ms linear;
                        }

                    }
                }

            }

        }


        &:first-child {
            & > h4 {
                border-top: none;
            }
        }


        .answer, .content {
            float: none;
            clear: both;
            width: 100%;
            border: none;
            padding: 0;
            background: @faqs_answer_bg_colour;
            color: @faqs_answer_text_colour !important;
            text-align: left;
            .rems(@faqs_answer_font_size);
            line-height: @faqs_answer_line_height;
			


            .darkBg & {
                color: #fff;
            }

            @media @flyout {
                .rems(@faqs_answer_font_size_flyout);
                line-height: @faqs_answer_line_height_flyout;
            }

            @media @mobile {
                .rems(@faqs_answer_font_size_mobile);
                line-height: @faqs_answer_line_height_mobile;
            }


           p, ul, ol {
                color: inherit;
                font-size: inherit;
                line-height: inherit;
                text-align: inherit;

            }

            h1,h2,h3,h4,h5,h6 {
                color: inherit;
                line-height: 24px;
            }

            h1 {
                .rems(24);
            }

            h2 {
                .rems(20);
            }

            h3 {
                .rems(18);
            }

            h4 {
                .rems(16);
            }

            h5 {
                .rems(15);
            }

            h6 {
                .rems(14);
            }
        }


        .answer, .content {
            padding: 24px 0;
        }

    }

    &.faqClosed {

        li {
            .answer, .content {
                display: none;
            }
        }

    }

    /* Faqs with reduces spacing */
    &.faqsMini {

        margin-bottom: 32px;

        @media all and (max-width: @wrapper_width) {
            margin-bottom: 32px;
        }

        @media @flyout {
            margin-bottom: 24px;
        }

        li {

            h4 {

                .rems(14);
                line-height: 24px;
                font-weight: normal;
                padding: 12px 64px 12px 16px;

                @media @flyout {
                    padding: 12px 64px 12px 16px;
                }

                @media @mobile {
                    padding: 12px 64px 12px 16px;
                    .rems(14);
                }

            }

            .answer {
                padding: 16px;
            }

        }

    }
}



.faqsList {

    padding: 40px 0 0;
    float: none;
    clear: both;


    .faqs {
        margin-bottom: 40px;
    }
}

.faqTitles {

    display: block;
    float: none;
    clear: both;


}


.faqsColumns {

    padding: 131px 0 10px;
    background: #fff;

    @media @flyout {
        padding: 80px 0 40px;
    }

    @media all and (max-width: 700px) {
        padding: 56px 0;
    }

}

.faqsGrid {
    width: ~"calc(100% + 40px)";
    margin: 0 -20px;
    display: flex;
    justify-content: center;

    @media @flyout {
        display: block;
    }

    .faqsLeft {
        width: 50%;
        flex: 1 1 50%;
        padding: 0 20px;
        max-width: 50%;

        @media @flyout {
            width: 100%;
            max-width: 70%;
            margin: 0 auto;
        }

        @media all and (max-width: 700px) {
            max-width: 100%;
        }
    }

    .faqsRight {
        width: 50%;
        flex: 1 1 50%;
        padding: 0 20px;
        max-width: 50%;

        @media @flyout {
            width: 100%;
            max-width: 70%;
            margin: 0 auto;
        }

        @media all and (max-width: 700px) {
            max-width: 100%;
        }
    }

}

