/*.accordion {
    --bs-accordion-active-bg: #2c2f34;
    --bs-accordion-active-color: #ded1c8;
    --bs-accordion-btn-focus-box-shadow: none;
    padding: 1em;
    border-radius: .25rem;
}

.accordion-item:has(.accordion-button:not(.collapsed)) {
    border: 1px solid #555;
    box-shadow: 10px -10px 5px rgba(0,0,0,0.6);
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}
.accordion-button:hover {
    color: #0dcaf0;
}*/
.accordion {
    --bs-accordion-active-bg: #2c2f34;
    --bs-accordion-active-color: #ded1c8;
    /* 1. Styled focus ring instead of removing it (uses your cyan hover color) */
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.25);
    padding: 1em;
    border-radius: .25rem;
}

/* 3. Base state for the item */
.accordion-item {
    border: 1px solid transparent; /* Prevents the 1px layout jump */
    transition: box-shadow 0.3s ease, border 0.3s ease; /* 4. Smooth animations */
}

    .accordion-item:has(.accordion-button:not(.collapsed)) {
        border: 1px solid #555;
        /* 2. Natural downward drop-shadow */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    }

.accordion-button:not(.collapsed) {
    box-shadow: none; /* Keep this: removes Bootstrap's default inner shadow */
}

/* Base state for the button to allow color transition */
.accordion-button {
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

    .accordion-button:hover {
        color: #0dcaf0;
    }