/* =========================================
   ACCORDION SECTION
   JSON DRIVEN
========================================= */


/* =========================================
   SECTION
========================================= */

.accordion-section {

    width: 100%;

    box-sizing: border-box;

    background:
        var(
            --ac-background,
            transparent
        );

    margin:
        var(--ac-section-margin-top, 0px)
        var(--ac-section-margin-right, 0px)
        var(--ac-section-margin-bottom, 0px)
        var(--ac-section-margin-left, 0px);

    padding:
        var(--ac-desktop-padding-top, 0px)
        var(--ac-desktop-padding-right, 0px)
        var(--ac-desktop-padding-bottom, 0px)
        var(--ac-desktop-padding-left, 0px);

}


/* =========================================
   CONTAINER
========================================= */

.accordion-container {

    width: 100%;

    max-width:
        var(
            --ac-max-width,
            1280px
        );

    margin:
        0 auto;

    box-sizing: border-box;

}


/* =========================================
   HEADER
========================================= */

.accordion-header {

    display: flex;

    align-items: center;

    width: 100%;

    justify-content:
        var(
            --ac-heading-desktop-alignment,
            flex-start
        );

    gap:
        var(
            --ac-header-desktop-icon-gap,
            14px
        );
}


/* =========================================
   HEADER ICON
========================================= */

.accordion-header-icon {

    width:
        var(
            --ac-header-icon-size,
            42px
        );

    height:
        var(
            --ac-header-icon-size,
            42px
        );

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    color:
        var(
            --ac-header-icon-color,
            inherit
        );

    background:
        var(
            --ac-header-icon-background,
            transparent
        );

    border:
        var(
            --ac-header-icon-border,
            none
        );

    border-radius:
        var(
            --ac-header-icon-radius,
            0px
        );

    line-height: 1;

}


/* =========================================
   HEADER HEADING
========================================= */

.accordion-heading {

    box-sizing: border-box;

    max-width:
        var(
            --ac-heading-desktop-max-width,
            100%
        );

    color:
        var(
            --ac-heading-desktop-color,
            inherit
        );

    font-family:
        var(
            --ac-heading-desktop-font-family,
            inherit
        );

    font-size:
        var(
            --ac-heading-desktop-size,
            inherit
        );

    font-weight:
        var(
            --ac-heading-desktop-weight,
            inherit
        );

    line-height:
        var(
            --ac-heading-desktop-line-height,
            normal
        );

    letter-spacing:
        var(
            --ac-heading-desktop-letter-spacing,
            normal
        );

    text-transform:
        var(
            --ac-heading-desktop-transform,
            none
        );

    margin:
        var(--ac-heading-desktop-margin-top, 0px)
        var(--ac-heading-desktop-margin-right, 0px)
        var(--ac-heading-desktop-margin-bottom, 0px)
        var(--ac-heading-desktop-margin-left, 0px);

}


/* =========================================
   ACCORDION LIST
========================================= */

.accordion-list {

    display: grid;

    grid-template-columns:
        repeat(
            var(--ac-desktop-columns, 1),
            minmax(0, 1fr)
        );

    column-gap:
        var(
            --ac-desktop-column-gap,
            0px
        );

    row-gap:
        var(
            --ac-desktop-row-gap,
            0px
        );

    margin:
        var(--ac-desktop-margin-top, 0px)
        var(--ac-desktop-margin-right, 0px)
        var(--ac-desktop-margin-bottom, 0px)
        var(--ac-desktop-margin-left, 0px);

    align-items: start;    

}


/* =========================================
   ACCORDION ITEM
========================================= */

.accordion-item {

    width: 100%;

    box-sizing: border-box;

    background:
        var(
            --ac-item-background,
            #ffffff
        );

    border:
        var(
            --ac-item-border,
            none
        );

    border-radius:
        var(
            --ac-item-radius,
            0px
        );

    box-shadow:
        var(
            --ac-item-shadow,
            none
        );

    transition:
        var(
            --ac-item-transition,
            all 0.25s ease
        );

    overflow: hidden;

}


/* =========================================
   TRIGGER
========================================= */

.accordion-trigger {

    width: 100%;

    min-width: 0;

    display: flex;

    align-items: center;

    gap:
        var(
            --ac-trigger-desktop-gap,
            14px
        );

    box-sizing: border-box;

    padding:
        var(--ac-trigger-desktop-padding-top, 20px)
        var(--ac-trigger-desktop-padding-right, 22px)
        var(--ac-trigger-desktop-padding-bottom, 20px)
        var(--ac-trigger-desktop-padding-left, 22px);

    border: 0;

    background: transparent;

    color: inherit;

    text-align: left;

    cursor: pointer;

    font: inherit;

}


/* =========================================
   ITEM ICON
========================================= */

.accordion-item-icon {

    width:
        var(
            --ac-item-icon-desktop-size,
            24px
        );

    height:
        var(
            --ac-item-icon-desktop-size,
            24px
        );

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    line-height: 1;

}


/* =========================================
   ITEM TITLE
========================================= */

.accordion-item-title {

    flex: 1;

    min-width: 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    color:
        var(
            --ac-title-desktop-color,
            inherit
        );

    font-family:
        var(
            --ac-title-desktop-font-family,
            inherit
        );

    font-size:
        var(
            --ac-title-desktop-size,
            inherit
        );

    font-weight:
        var(
            --ac-title-desktop-weight,
            inherit
        );

    line-height:
        var(
            --ac-title-desktop-line-height,
            normal
        );

    letter-spacing:
        var(
            --ac-title-desktop-letter-spacing,
            normal
        );

    text-transform:
        var(
            --ac-title-desktop-transform,
            none
        );

}


/* =========================================
   TOGGLE
========================================= */

.accordion-toggle {

    width:
        var(
            --ac-toggle-size,
            28px
        );

    min-width:
        var(
            --ac-toggle-size,
            28px
        );

    height:
        var(
            --ac-toggle-size,
            28px
        );

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color:
        var(
            --ac-toggle-color,
            inherit
        );

    font-size:
        var(
            --ac-toggle-font-size,
            1.5rem
        );

    font-weight:
        var(
            --ac-toggle-font-weight,
            400
        );

    line-height: 1;

}


/* =========================================
   DESCRIPTION
========================================= */

/* =========================================
   DESCRIPTION
========================================= */

.accordion-description {
    display: grid;

    grid-template-rows: minmax(0, 0fr);

    overflow: hidden;

    transition:
        grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* =========================================
   DESCRIPTION CONTENT
========================================= */

.accordion-description-content {

    min-height: 0;

    overflow: hidden;

    color:
        var(
            --ac-description-desktop-color,
            inherit
        );

    font-family:
        var(
            --ac-description-desktop-font-family,
            inherit
        );

    font-size:
        var(
            --ac-description-desktop-size,
            inherit
        );

    font-weight:
        var(
            --ac-description-desktop-weight,
            inherit
        );

    line-height:
        var(
            --ac-description-desktop-line-height,
            normal
        );

    letter-spacing:
        var(
            --ac-description-desktop-letter-spacing,
            normal
        );

    text-transform:
        var(
            --ac-description-desktop-transform,
            none
        );

    padding:
        var(--ac-description-desktop-padding-top, 0px)
        var(--ac-description-desktop-padding-right, 0px)
        var(--ac-description-desktop-padding-bottom, 0px)
        var(--ac-description-desktop-padding-left, 0px);

}


/* =========================================
   OPEN STATE
========================================= */

.accordion-item.is-open
.accordion-description {
    grid-template-rows: minmax(0, 1fr);
}


/* =========================================
   DESCRIPTION PARAGRAPHS
========================================= */

.accordion-description-paragraph {

    margin: 0;

}


.accordion-description-paragraph
+ .accordion-description-paragraph {

    margin-top:
        var(
            --ac-description-desktop-gap,
            14px
        );

}


/* =========================================
   FOCUS
========================================= */

.accordion-trigger:focus-visible {

    outline:
        2px solid
        var(
            --ac-toggle-color,
            #234436
        );

    outline-offset: -2px;

}


/* =========================================
   OPEN STATE
========================================= */

.accordion-item.is-open {

    box-shadow:
        var(
            --ac-item-shadow,
            none
        );

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {


    /* =====================================
       SECTION
    ===================================== */

    .accordion-section {

        padding:
            var(--ac-mobile-padding-top, 0px)
            var(--ac-mobile-padding-right, 0px)
            var(--ac-mobile-padding-bottom, 0px)
            var(--ac-mobile-padding-left, 0px);

    }


    /* =====================================
       HEADER
    ===================================== */

    /* =====================================
        HEADER
        ===================================== */

        .accordion-header {

            justify-content:
                var(
                    --ac-heading-mobile-alignment,
                    flex-start
                );

            gap:
                var(
                    --ac-header-mobile-icon-gap,
                    10px
                );

        }


        .accordion-header-icon {

            width:
                var(
                    --ac-header-icon-size,
                    42px
                );

            height:
                var(
                    --ac-header-icon-size,
                    42px
                );

        }


    .accordion-heading {

        max-width:
            var(
                --ac-heading-mobile-max-width,
                100%
            );

        color:
            var(
                --ac-heading-mobile-color,
                inherit
            );

        font-family:
            var(
                --ac-heading-mobile-font-family,
                inherit
            );

        font-size:
            var(
                --ac-heading-mobile-size,
                inherit
            );

        font-weight:
            var(
                --ac-heading-mobile-weight,
                inherit
            );

        line-height:
            var(
                --ac-heading-mobile-line-height,
                normal
            );

        letter-spacing:
            var(
                --ac-heading-mobile-letter-spacing,
                normal
            );

        text-transform:
            var(
                --ac-heading-mobile-transform,
                none
            );

        margin:
            var(--ac-heading-mobile-margin-top, 0px)
            var(--ac-heading-mobile-margin-right, 0px)
            var(--ac-heading-mobile-margin-bottom, 0px)
            var(--ac-heading-mobile-margin-left, 0px);

    }


    /* =====================================
       ONE COLUMN
    ===================================== */

    .accordion-list {

        grid-template-columns:
            repeat(
                var(--ac-mobile-columns, 1),
                minmax(0, 1fr)
            );

        column-gap:
            var(
                --ac-mobile-column-gap,
                0px
            );

        row-gap:
            var(
                --ac-mobile-row-gap,
                0px
            );

        margin:
            var(--ac-mobile-margin-top, 0px)
            var(--ac-mobile-margin-right, 0px)
            var(--ac-mobile-margin-bottom, 0px)
            var(--ac-mobile-margin-left, 0px);

    }


    /* =====================================
       ITEM
    ===================================== */

    .accordion-item {

        padding:
            var(--ac-item-mobile-padding-top, 0px)
            var(--ac-item-mobile-padding-right, 0px)
            var(--ac-item-mobile-padding-bottom, 0px)
            var(--ac-item-mobile-padding-left, 0px);

    }


    /* =====================================
       TRIGGER
    ===================================== */

    .accordion-trigger {

        gap:
            var(
                --ac-trigger-mobile-gap,
                10px
            );

        padding:
            var(--ac-trigger-mobile-padding-top, 18px)
            var(--ac-trigger-mobile-padding-right, 18px)
            var(--ac-trigger-mobile-padding-bottom, 18px)
            var(--ac-trigger-mobile-padding-left, 18px);

    }


    /* =====================================
       ICON
    ===================================== */

    .accordion-item-icon {

        width:
            var(
                --ac-item-icon-mobile-size,
                20px
            );

        height:
            var(
                --ac-item-icon-mobile-size,
                20px
            );

    }


    /* =====================================
       TITLE
    ===================================== */

    .accordion-item-title {

        color:
            var(
                --ac-title-mobile-color,
                inherit
            );

        font-family:
            var(
                --ac-title-mobile-font-family,
                inherit
            );

        font-size:
            var(
                --ac-title-mobile-size,
                inherit
            );

        font-weight:
            var(
                --ac-title-mobile-weight,
                inherit
            );

        line-height:
            var(
                --ac-title-mobile-line-height,
                normal
            );

        letter-spacing:
            var(
                --ac-title-mobile-letter-spacing,
                normal
            );

        text-transform:
            var(
                --ac-title-mobile-transform,
                none
            );

    }


    /* =====================================
       DESCRIPTION
    ===================================== */

    .accordion-description-content {

        color:
            var(
                --ac-description-mobile-color,
                inherit
            );

        font-family:
            var(
                --ac-description-mobile-font-family,
                inherit
            );

        font-size:
            var(
                --ac-description-mobile-size,
                inherit
            );

        font-weight:
            var(
                --ac-description-mobile-weight,
                inherit
            );

        line-height:
            var(
                --ac-description-mobile-line-height,
                normal
            );

        letter-spacing:
            var(
                --ac-description-mobile-letter-spacing,
                normal
            );

        text-transform:
            var(
                --ac-description-mobile-transform,
                none
            );

        padding:
            var(--ac-description-mobile-padding-top, 0px)
            var(--ac-description-mobile-padding-right, 0px)
            var(--ac-description-mobile-padding-bottom, 0px)
            var(--ac-description-mobile-padding-left, 0px);

    }


    .accordion-description-paragraph
    + .accordion-description-paragraph {

        margin-top:
            var(
                --ac-description-mobile-gap,
                12px
            );

    }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .accordion-description,
    .accordion-item {

        transition: none;

    }

}