.wp-block-crispycohd-advanced-accordion,
.crispycohd-accordion {
    --crispycohd-duration: 300ms;
    --cc-caret-size: 1.25em;
    --cc-caret-gap: 0.75em;
    /* Default caret (chevron) - can be overridden via --cc-caret-icon */
    --cc-caret-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

.crispycohd-accordion .crispycohd-accordion-header {
    cursor: pointer;
    user-select: none;
    position: relative !important;
    box-sizing: border-box;
    /* Do not force a display mode here.
       The header is a Group/Row in the editor, and core provides the correct
       layout rules. Forcing display can break alignment/justification settings.
    */
}

/* Caret (works in editor + front end). Positioned absolutely so it never affects alignment. */
.wp-block-crispycohd-advanced-accordion .crispycohd-accordion-header::after {
    content: "";
    position: absolute;
    top: 50% !important;
    width: var(--cc-caret-size);
    height: var(--cc-caret-size);
    transform: translateY(-50%);
    background-image: var(--cc-caret-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

/* Side positioning + padding so content does not overlap the caret */
.wp-block-crispycohd-advanced-accordion[data-caret-side="left"] .crispycohd-accordion-header {
    padding-left: calc(var(--cc-caret-size) + var(--cc-caret-gap)) !important;
}
.wp-block-crispycohd-advanced-accordion[data-caret-side="left"] .crispycohd-accordion-header::after {
    left: calc(var(--cc-caret-gap) - 0.25em) !important;
    right: auto !important;
}

.wp-block-crispycohd-advanced-accordion:not([data-caret-side="left"]) .crispycohd-accordion-header {
    padding-right: calc(var(--cc-caret-size) + var(--cc-caret-gap)) !important;
}
.wp-block-crispycohd-advanced-accordion:not([data-caret-side="left"]) .crispycohd-accordion-header::after {
    right: calc(var(--cc-caret-gap) + 0.25em) !important;
    left: auto !important;
}

/* Rotate caret when open (single icon asset) */
.wp-block-crispycohd-advanced-accordion.is-open .crispycohd-accordion-header::after {
    transform: translateY(-50%) rotate(180deg);
}

.crispycohd-accordion .crispycohd-accordion-content {
    display: none;
}

/* Fade mode: JS controls show/hide; CSS handles opacity transition */
.crispycohd-accordion.crispycohd-accordion--fade .crispycohd-accordion-content {
    opacity: 0;
    transition: opacity var(--crispycohd-duration) ease;
}

.crispycohd-accordion.crispycohd-accordion--fade .crispycohd-accordion-content.cc-fade-visible {
    opacity: 1;
}

.crispycohd-accordion-divider {
    margin: 0;
    border: none;
    border-top: 1px solid var(--wp--preset--color--contrast-3, #ddd);
}

/* Hide the separator when the toggle is off */
.wp-block-crispycohd-advanced-accordion[data-show-divider="false"] .crispycohd-accordion-divider {
    display: none;
}
/* Editor-only tweaks (avoid overriding block alignment/justification) */

/* Hide the separator when the toggle is off */
.wp-block-crispycohd-advanced-accordion[data-show-divider="false"] .crispycohd-accordion-divider {
    display: none;
}

/* Remove focus outline on the clickable header inside the editor */
.wp-block-crispycohd-advanced-accordion .crispycohd-accordion-header:focus,
.wp-block-crispycohd-advanced-accordion .crispycohd-accordion-header:focus-visible {
    outline: none;
    box-shadow: none;
}