/*
 * Define caret CSS variables on BOTH the block wrapper and the inner accordion
 * container. In the editor the wrapper class can differ depending on context
 * (post editor vs site editor iframe), so duplicating these defaults ensures
 * the caret always has a valid icon/size/gap.
 */
.wp-block-crispycohd-advanced-accordion,
.crispycohd-accordion {
    --crispycohd-duration: 300ms;
    --cc-caret-size: 2.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;
    /* 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.
    */
}

/* Locked caret button. Positioned absolutely so it never affects alignment. */
.wp-block-crispycohd-advanced-accordion .crispycohd-accordion-caret-button {
    position: absolute;
    top: 50%;
    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;
    background-color: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    line-height: 1;
    cursor: pointer;
}

/* Focus ring: keyboard only */
.wp-block-crispycohd-advanced-accordion .crispycohd-accordion-caret-button:focus {
    outline: none;
}
.wp-block-crispycohd-advanced-accordion .crispycohd-accordion-caret-button:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}
.wp-block-crispycohd-advanced-accordion .crispycohd-accordion-caret-button:focus-visible {
    box-shadow: none;
    outline: auto;
}

/* 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-caret-button {
    left: calc(var(--cc-caret-gap) - 0.25em);
}

.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-caret-button {
    right: calc(var(--cc-caret-gap) + 0.25em);
}

/* Rotate caret when open (single icon asset) */
.wp-block-crispycohd-advanced-accordion.is-open .crispycohd-accordion-caret-button {
    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;
}

@media (prefers-reduced-motion: reduce) {
    .crispycohd-accordion.crispycohd-accordion--fade .crispycohd-accordion-content {
        transition: none;
    }
}

.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;
}
