.accordion-group {
    margin: var(--space-0) auto var(--space-32);
    position: relative;
    width: 100%;
}

    @media (min-width: 1025px) {.accordion-group {
        min-width: 50%;
        width: 100%
}
    }

    .accordion-group .expand-all {
        background: transparent;
        color: hsla(var(--carnelian-dm, var(--carnelian)) / 100%);
        padding: var(--space-4) var(--space-16);
        left: 100%;
        position: relative;
        transform: translateX(-100%);
        border: 1px solid hsla(var(--border-carnelian) / 100%);
        border-radius: .5em;
        margin-bottom: var(--space-16);
        min-width: 5em;
        cursor: pointer;
        font-size: var(--step--1);
    }

    .accordion-group .expand-all:focus, .accordion-group .expand-all:hover {
            background: hsla(var(--carnelian-dm, var(--carnelian)) / 100%);
            color: hsla(var(--text-white-dm, var(--text-white)) / 100%);
            
        }

    .accordion-group .expand-all.collapse-all {
            background: hsla(var(--carnelian-dm, var(--carnelian)) / 100%);
            color: hsla(var(--text-white-dm, var(--text-white)) / 100%);
        }

.accordion-item {
    position: relative;
    padding: var(--space-8) var(--space-0);
}

.accordion-item::after {
        content: '';
        width: 100%;
        height: 1px;
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        background: hsla(var(--text-black-dm, var(--text-black)) / 10%);
        
    }

.accordion-item:hover {
        background: hsla(var(--card-background-light) / 25%);
    }

.accordion-item:hover h3 button {
                color: hsla(var(--carnelian-dm, var(--carnelian)) / 100%);
            }

.accordion-item:hover::after {
            height: 2px;
            background-color: hsla(var(--carnelian-dm, var(--carnelian)) / 100%);
            
        }

.accordion-item h3 {
        width: 100%;
        display: flex;
        margin-bottom: var(--space-0);
        font-weight: var(--light-weight);
        margin-top: 0;
    }

.accordion-item h3 button {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            background: transparent; 
            color: hsla(var(--text-black-dm, var(--text-black)) / 100%);
            font-weight: var(--light-weight);
            position: relative;
            width: 100%;
            padding: var(--space-8) var(--space-0) var(--space-8) var(--space-4);
            margin-bottom: var(--space-0);
            font-size: var(--step-1);
            text-align: left;
            cursor: pointer;
            border: none;
            

        }

.accordion-item h3 button::after {
                content: '\e59b';
                height: 25px;
                width: 25px;
                display: block;
                font-family: var(--font-awesome);
                transform: rotate(45deg);
                font-size: var(--step-0);
            }

.accordion-item h3 button span {
                font-weight: var(--light-weight);
                max-width: 85%;

            }

.accordion-item .accordion-panel {
        background: transparent;
        display: none;
        padding-left: var(--space-32);
        padding-bottom: var(--space-32);
        
    }

.accordion-item .accordion-panel h4 {
            margin-top: var(--space-0);
            margin-bottom: var(--space-16);
            font-family: var(--clocktower-sans-serif);
            font-weight: var(--semi-bold-weight);

        }

.accordion-item .accordion-panel h5 {
            color: hsl(var(--carnelian-dm, var(--carnelian)));
            margin-top: var(--space-zero);
            margin-bottom: var(--space-8);
            font-size: var(--step-1);

        }

.accordion-item .accordion-panel p, .accordion-item .accordion-panel ul, .accordion-item .accordion-panel dl {
            font-size: var(--step-1);
        }

.accordion-item.active {
        display: block;
        position: relative;
    }

.accordion-item.active::before {
            display: block;
            content: '';
            height: 100%;
            width: 2px;
            background-color: hsla(var(--carnelian-dm, var(--carnelian)) / 100%);
        }

.accordion-item.active h3 button {
                color: hsla(var(--carnelian-dm, var(--carnelian)) / 100%);
                font-weight: var(--regular-weight);
            }

.accordion-item.active h3 button::before {
                    display: none;
                }

.accordion-item.active h3 button::after {
                    transform: rotate(0deg);
                }

.accordion-item.active .accordion-panel {
            display: block;
            position: relative;
        }

&.reduced .accordion-item:hover {
            background: transparent;
        }

&.reduced .accordion-item .action-items {
            display: flex;
            align-items: center;
            justify-content: center;
        }

&.reduced .accordion-item .action-items .accordion-trigger, &.reduced .accordion-item .action-items a {
                font-size: var(--step--1);
                display: inline;
                background: transparent;
                border: 1px solid hsla(var(--border-carnelian) / 100%);
                border-radius: .25em;
                color: hsla(var(--carnelian-dm, var(--carnelian)) / 100%);
                padding: var(--space-4) var(--space-8);
                margin: var(--space-8);
                text-decoration: none;
                line-height: 1;
            }

&.reduced .accordion-item .action-items .accordion-trigger i, &.reduced .accordion-item .action-items a i {
                    padding-right: var(--space-4);
                }

&.reduced .accordion-item .action-items .accordion-trigger:hover, &.reduced .accordion-item .action-items .accordion-trigger:focus, &.reduced .accordion-item .action-items a:hover, &.reduced .accordion-item .action-items a:focus {
                    background-color: hsla(var(--text-white-dm, var(--text-white)) / 100%);
                    color: hsla(var(--carnelian-dm, var(--carnelian)) / 100%);
                }

&.reduced .accordion-item .action-items .accordion-trigger:first-child, &.reduced .accordion-item .action-items a:first-child {
                    margin-left: 0;
                }

&.reduced .accordion-item .accordion-panel {
            margin-top: var(--space-16);
            padding: var(--space-16);
            background: hsla(var(--text-black-dm, var(--text-black)) / 5%);
        }

&.reduced .accordion-item::after {
            display: none;
        }

&.reduced .expand-all {
        display: none;
    }

/* Dark Mode overrides */

html[data-theme="dark"] .accordion-item.active h3 button {
                    color: hsla(var(--text-white-dm, var(--text-white)) / 100%);
                }