/* -- 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;

:root {
    //Icon
    --faq_fa_icon: @faq_fa_icon;
    --faq_fa_icon_close: @faq_fa_icon_close;
    --faqs_icon_right: @faqs_icon_right;
    --faqs_icon_right_flyout: @faqs_icon_right_flyout;
    --faqs_icon_right_mobile: @faqs_icon_right_mobile;

    //Border and shadow
    --faqs_border_color: @faqs_border_color;
    --faqs_border_width: @faqs_border_width;
    --faqs_box_shadow: @faqs_box_shadow;
    --faq_border_radius: @faq_border_radius;

    //Spacing
    --faqs_padding: @faqs_padding;
    --faqs_answer_padding: @faqs_answer_padding;

    --faqs_padding_flyout: @faqs_padding_flyout;
    --faqs_answer_padding_flyout: @faqs_answer_padding_flyout;

    --faqs_padding_mobile: @faqs_padding_mobile;
    --faqs_answer_padding_mobile: @faqs_answer_padding_mobile;

    //Colours
    --faqs_question_bg_colour: @faqs_question_bg_colour;
    --faqs_question_text_colour: @faqs_question_text_colour;

    --faqs_answer_bg_colour: @faqs_answer_bg_colour;
    --faqs_answer_text_colour: @faqs_answer_text_colour;

    //Font sizes
    --faqs_question_font_size: @faqs_question_font_size;
    --faqs_question_line_height: @faqs_question_line_height;
    --faqs_question_font_size_flyout: @faqs_question_font_size_flyout;
    --faqs_question_line_height_flyout: @faqs_question_line_height_flyout;
    --faqs_question_font_size_mobile: @faqs_question_font_size_mobile;
    --faqs_question_line_height_mobile: @faqs_question_line_height_mobile;

    --faqs_answer_font_size: @faqs_answer_font_size;
    --faqs_answer_line_height: @faqs_answer_line_height;
    --faqs_answer_font_size_flyout: @faqs_answer_font_size_flyout;
    --faqs_answer_line_height_flyout: @faqs_answer_line_height_flyout;
    --faqs_answer_font_size_mobile: @faqs_answer_font_size_mobile;
    --faqs_answer_line_height_mobile: @faqs_answer_line_height_mobile;


    /*
    * Faq options
     */
    --faq_option_padding: @faq_option_padding;
    --faq_option_padding_mobile: @faq_option_padding_mobile;
}


ul.faqs, ul.accordion {
    float: none;
    clear: both;
    width: 100%;
    margin-bottom: 0;
    border-radius: var(--faq_border_radius);
    overflow: hidden;
    border: none;
    box-shadow: var(--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: var(--faqs_answer_padding);

		.darkBg & {
			color: var(--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: var(--faqs_question_bg_colour);
            border-bottom: none;
            border-bottom: var(--faqs_border_width) solid var(--faqs_border_color);
            margin: 0;
            color: var(--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: var(--primary_font);

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

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


            .darkBg & {
                color: #fff;
                border-color: color-mix(in srgb, var(--fade_mixin_color), #fff 40%);
            }

            .faqsGrid & {
                .rems(16);
                line-height: 28px;
                font-weight: normal;
                padding: 17px 40px 18px 0;
                border-color: var(--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: var(--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: var(--highlight_color);
                transition: all 200ms linear;

                &:after {
                    color: var(--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: var(--faqs_answer_bg_colour);
            color: var(--faqs_answer_text_colour) !important;
            text-align: left;
            .rems(@faqs_answer_font_size);
            line-height: var(--faqs_answer_line_height);



            .darkBg & {
                color: #fff;
            }

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

            @media @mobile {
                .rems(@faqs_answer_font_size_mobile);
                line-height: var(--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%;
        }
    }

}

