.accordion-wrapper {
    position: relative;
    margin-top: 2px;
    background-color: white;
}

.accordion-header {
    font-size: 1rem;
}

.off-white {
    background-color: #f7f7f7;
}

.question {
    position: relative;
    padding: 1.2rem;
    cursor: pointer;
    line-height: 1.6rem !important;
    border: 1px #ffffff00 solid;
    list-style: none;
}

.question::-webkit-details-marker {
    display: none;
}

/* --- ACTIVE STATE LOGIC --- */
.active-question {
    background-color: #f0f0f0 !important;
    border: 1px #E5E5E5 solid !important;
    border-bottom: none !important;
    color: #000;
}

details[open] > .question {
    background-color: #f0f0f0 !important;
    border: 1px #E5E5E5 solid !important;
    border-bottom: none !important;
    color: #000;
}

.accordion-wrapper:hover {
    background-color: #f1f1f1;
}


.question[aria-expanded=false]::after {
    transform: translateY(-50%) rotate(90deg);
    transition: transform 0.5s ease;
}


details:not([open]) > .question::after {
    transform: translateY(-50%) rotate(90deg);
    transition: transform 0.5s ease;
}


.question::after {
    position: absolute;
    content: "";
    width: 1.5625rem;
    height: 1.5625rem;
    right: .5rem;
    top: 50%;
    background: url(https://www.woodplc.com/__data/assets/git_bridge/0025/198115/dist/mysource_files/chevron.svg);
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-50%) rotate(-90deg);
    transition: transform 0.5s ease;
}


.answer {
    /* Legacy behavior: hide by default */
    display: none;
    transition: display 0.5s ease;
    padding: 1.2rem;
    align-items: center;
    margin-top: -1rem;
    background-color: #f0f0f0;
    border: 1px #E5E5E5 solid;
    border-top: none !important;
    color: #000;
}


details .answer {
    display: block;
}

/* --- DARK MODE STYLES --- */

.WC-accordion--dark {
    background-color: #161616;
    color: #fff;
}

.WC-accordion--dark:hover {
    background-color: #262626 !important;
}

.answer--dark {
    background-color: #393939 !important;
    color: #fff !important;
    border: 1px #525252 solid !important;
}

.active-question--dark {
    background-color: #393939 !important;
    border: 1px #525252 solid !important;
    color: #fff !important;
}

/* Native Support: Dark Mode Active */
details[open] > .question--dark {
    background-color: #393939 !important;
    border: 1px #525252 solid !important;
    color: #fff !important;
}

.question--dark::after {
    filter: invert(1);
}