/* Wrapper */
.accordion {
    border-bottom: 1px solid #828282;
    padding: 0.5rem 0;
}

/* Button */
.accordion__button {
    width: 100%;
    display: flex;
    align-items: center;

    text-align: left;
    cursor: pointer;

    background: transparent;
    border: 0;
    padding: 1rem 0;

    color: #990000;
    font-size: 1.3em;
    min-height: 44px;
}

/* Optional icon using background images */
.accordion__button::before {
    content: "";
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    margin-right: 1rem;
    background: url("https://stonybrookmedicine.edu/sites/default/files/webfiles/accordion-plus.png") no-repeat center;
    background-size: 30px;
}

.accordion__button.is-open::before,
.accordion__button[aria-expanded="true"]::before {
    background-image: url("https://stonybrookmedicine.edu/sites/default/files/webfiles/accordion-minus.png");
}

.accordion__button.is-open,
.accordion__button[aria-expanded="true"] {
    color: #000;
    font-weight: 700;
}

/* Hover */
.accordion__button:hover {
    text-decoration: underline;
}

/* Focus (keyboard) */
.accordion__button:focus-visible {
    outline: 3px solid 004e9a;
    outline-offset: 6px;
    border-radius: 4px;
}

/* Panel animation */
.accordion__panel {
    overflow: hidden;
    height: 0;
    transition: height 250ms ease;
}

/* Content spacing */
.accordion__content {
    padding: 0.5rem 0 0 3rem;
}

@media (prefers-reduced-motion: reduce) {
    .accordion__panel {
        transition: none;
    }
}