/* details.css — smooth open/close animation for <details> content */

/* Basic container styling */
details {
    /*border-top: 2px solid blue;*/
    /*border-bottom: 2px solid magenta;*/
    padding-top: 10px;
    padding-bottom: 10px;
    margin-block-start: 0;
    margin: 0;
    border-radius: 6px;
    border: 1px solid var(--wp--preset--color--corporate-blue);
    /*background-color: var(--wp--preset--color--lynx-white); !* use a concrete fallback to avoid unresolved variable errors *!*/

    transition: all 333ms ease-in-out;

    summary::marker,
    .summary::-webkit-details-marker {
        font-size: 16px;
        margin-right: 10px;
        transform: translateY(-10px);
        display: block;
        padding-right: 10px;
        color: var(--wp--preset--color--corporate-blue);
    }
}

/* Summary styling */
details summary {
    /*border-bottom: 1px solid var(--wp--preset--color--text-gray);*/
    font-weight: bold;
    margin-left: 10px;
}

/* Keep the left/right spacing for content inside details (non-summary) */
details > :not(summary) {
    margin-left: 25px;
    margin-right: 10px;
}

/* --- Smooth open/close animation for details content --- */
/* Animate the area after the <summary>. Uses max-height hack for CSS-only animation. */
/* Note: if you expect extremely tall content, increase the max-height or use JS to measure exact heights. */
details > :not(summary) {
    /* Collapse state */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 360ms cubic-bezier(.2,.9,.2,1),
                opacity 333ms ease,
                transform 333ms ease,
                margin 333ms ease;
    will-change: max-height, opacity, transform;
}

/* Expanded state */
details[open] > :not(summary) {
    max-height: 1200px;
    opacity: 1;
    transform: translateY(0);
}

/* Optional: visual separation or tweaks when open */
details[open] summary {
    /* border-bottom: 1px solid rgba(0,0,0,0.06); */
}