/* =========================================================
   DOCUMENT ACCORDION
   ========================================================= */


/* =========================================================
   WRAPPER
   ========================================================= */

.eda-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.eda-card {
    width: 100%;
    overflow: hidden;

    background-color: #FFFFFF;

    border: 1px solid #E9E4E6;
    border-radius: 24px;

    box-shadow:
        0 8px 24px -18px rgba(37, 37, 37, 0.15);

    box-sizing: border-box;

    transition:
        border-color 500ms ease,
        box-shadow 500ms ease;
}


/* Open card */
.eda-card.is-open {
    border-color: #75172E;

    box-shadow:
        0 25px 50px -20px rgba(117, 23, 46, 0.25);
}


/* =========================================================
   HEADER BUTTON
   number | title/summary | toggle
   ========================================================= */

.eda-header {
    appearance: none;
    -webkit-appearance: none;

    width: 100%;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 40px;

    padding: 48px;

    margin: 0;

    border: 0;

    background: transparent;

    text-align: left;

    color: inherit;

    cursor: pointer;

    box-sizing: border-box;
}


/* Prevent theme/button hover styling */
.eda-header:hover,
.eda-header:focus,
.eda-header:active {
    background: transparent;
    color: inherit;
    outline: none;
    box-shadow: none;
}


/* =========================================================
   NUMBER CIRCLE
   ========================================================= */

.eda-number {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #E9E4E6;
    border-radius: 50%;

    background: transparent;

    color: #252525;

    font-family: serif;
    font-size: 20px;
    font-weight: 400;

    line-height: 1;

    box-sizing: border-box;

    transition:
        color 500ms ease,
        border-color 500ms ease,
        background-color 500ms ease;
}


/* Open number */
.eda-card.is-open .eda-number {
    color: #75172E;
}


/* =========================================================
   TITLE / SUMMARY AREA
   ========================================================= */

.eda-main {
    display: block;
    min-width: 0;
}


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

.eda-title {
    display: block;

    margin: 0;
    padding: 0;

    font-family: serif;

    font-size:
        clamp(
            1.4rem,
            2.2vw,
            2rem
        );

    font-weight: 400;

    line-height: 1.15;
    letter-spacing: -0.01em;

    color: #252525;

    white-space: normal;
    overflow-wrap: break-word;

    transition: color 500ms ease;
}


/* Open title */
.eda-card.is-open .eda-title {
    color: #75172E;
}


/* =========================================================
   CLOSED DESCRIPTION
   Only visible when item is closed
   ========================================================= */

.eda-summary {
    display: block;

    width: 100%;

    max-height: 160px;

    margin-top: 8px;

    opacity: 1;
    visibility: visible;

    overflow: hidden;

    color: #666666;

    font-size: 15px;
    font-weight: 400;

    line-height: 1.65;

    white-space: normal;
    overflow-wrap: break-word;

    transition:
        max-height 500ms ease,
        margin-top 500ms ease,
        opacity 300ms ease,
        visibility 300ms ease;
}


/* Hide closed description when item opens */
.eda-card.is-open .eda-summary {
    max-height: 0;

    margin-top: 0;

    opacity: 0;
    visibility: hidden;
}


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

.eda-toggle {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    border: 1px solid #E9E4E6;
    border-radius: 50%;

    color: #75172E;

    box-sizing: border-box;

    transition:
        background-color 500ms ease,
        border-color 500ms ease,
        color 500ms ease;
}


/* Toggle SVG */
.eda-toggle svg {
    width: 16px;
    height: 16px;

    display: block;
}


/* Minus hidden while closed */
.eda-minus {
    display: none !important;
}


/* Open toggle */
.eda-card.is-open .eda-toggle {
    background-color: #75172E;

    border-color: #75172E;

    color: #FFFFFF;
}


/* Open: hide plus */
.eda-card.is-open .eda-plus {
    display: none !important;
}


/* Open: show minus */
.eda-card.is-open .eda-minus {
    display: block !important;
}


/* =========================================================
   EXPANDING AREA
   Smooth 0fr -> 1fr animation
   ========================================================= */

.eda-expand {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows
        500ms
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* Open */
.eda-card.is-open .eda-expand {
    grid-template-rows: 1fr;
}


/* Inner clipping wrapper */
.eda-expand-inner {
    min-height: 0;
    overflow: hidden;
}


/* =========================================================
   EXPANDED BODY
   Aligns under title column
   ========================================================= */

.eda-expanded-body {
    padding:
        0
        48px
        48px
        136px;

    box-sizing: border-box;
}


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

.eda-expanded-description {
    width: 100%;

    margin: 0;
    padding: 0;

    color: #666666;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.7;

    white-space: normal;
    overflow-wrap: break-word;
}


/* =========================================================
   FEATURE CHIPS WRAPPER
   ========================================================= */

.eda-chips {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

    margin-top: 24px;
}


/* =========================================================
   FEATURE CHIP
   ========================================================= */

.eda-chip {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        8px
        16px;

    background-color: #FFFFFF;

    border: 1px solid #75172E;
    border-radius: 999px;

    color: #75172E;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.2;

    white-space: nowrap;

    box-sizing: border-box;

    transition:
        background-color 300ms ease,
        color 300ms ease,
        border-color 300ms ease;
}


/* Chip check icon */
.eda-chip svg {
    width: 14px;
    height: 14px;

    flex: 0 0 14px;

    display: block;
}


/* Chip hover */
.eda-chip:hover {
    background-color: #75172E;

    border-color: #75172E;

    color: #FFFFFF;
}


/* =========================================================
   EXTRA ELEMENTOR CONTENT
   Saved template area
   ========================================================= */

.eda-extra-content {
    width: 100%;

    margin-top: 32px;

    box-sizing: border-box;
}


/* Prevent saved template from overflowing accordion */
.eda-extra-content .elementor,
.eda-extra-content .elementor-section,
.eda-extra-content .e-con {
    max-width: 100%;
}


/* Remove unwanted outer margin from first template element */
.eda-extra-content > *:first-child {
    margin-top: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .eda-wrapper {
        gap: 22px;
    }


    .eda-header {
        gap: 28px;

        padding: 40px;
    }


    .eda-number {
        width: 64px;
        height: 64px;

        flex-basis: 64px;
    }


    .eda-expanded-body {
        padding:
            0
            40px
            40px
            132px;
    }


    .eda-title {
        font-size:
            clamp(
                1.35rem,
                3vw,
                1.8rem
            );
    }


    .eda-extra-content {
        margin-top: 28px;
    }
}


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

@media (max-width: 767px) {

    .eda-wrapper {
        gap: 18px;
    }


    /* Header:
       56px number + content + 44px toggle
    */
    .eda-header {
        grid-template-columns:
            56px
            minmax(0, 1fr)
            44px;

        align-items: center;

        gap: 16px;

        padding: 28px 24px;
    }


    .eda-number {
        width: 56px;
        height: 56px;

        flex-basis: 56px;

        font-size: 18px;
    }


    .eda-toggle {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }


    .eda-title {
        font-size:
            clamp(
                1.2rem,
                5vw,
                1.5rem
            );

        line-height: 1.2;
    }


    .eda-summary {
        margin-top: 6px;

        font-size: 14px;

        line-height: 1.55;
    }


    /*
       Expanded content aligns underneath
       the title column
    */
    .eda-expanded-body {
        padding:
            0
            24px
            32px
            96px;
    }


    .eda-expanded-description {
        font-size: 15px;

        line-height: 1.65;
    }


    .eda-chips {
        gap: 8px;

        margin-top: 20px;
    }


    .eda-chip {
        padding:
            7px
            12px;

        font-size: 13px;
    }


    .eda-extra-content {
        margin-top: 24px;
    }
}


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

@media (max-width: 480px) {

    .eda-wrapper {
        gap: 14px;
    }


    .eda-header {
        grid-template-columns:
            48px
            minmax(0, 1fr)
            40px;

        gap: 12px;

        padding: 22px 18px;
    }


    .eda-number {
        width: 48px;
        height: 48px;

        flex-basis: 48px;

        font-size: 16px;
    }


    .eda-toggle {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }


    .eda-toggle svg {
        width: 15px;
        height: 15px;
    }


    .eda-title {
        font-size: 19px;
    }


    .eda-summary {
        font-size: 13px;

        line-height: 1.5;
    }


    .eda-expanded-body {
        padding:
            0
            18px
            26px
            78px;
    }


    .eda-expanded-description {
        font-size: 14px;

        line-height: 1.6;
    }


    .eda-chips {
        margin-top: 18px;
    }


    .eda-chip {
        white-space: normal;

        text-align: left;
    }


    .eda-extra-content {
        margin-top: 20px;
    }
}