/* ── Accordion ──────────────────────────────────────────────────────────────── */

/* Flex column; gap driven by WP block gap setting (--wp--style--block-gap) */
.oi-accordion {
    display: flex;
    flex-direction: column;
    gap: var( --wp--style--block-gap, 0px );
}

/* Item — full border on each side, radius on all corners */
.oi-accordion__item {
    border: 1px solid var( --oi-accordion-border, transparent );
    border-radius: var( --oi-accordion-radius, 0 );
    overflow: hidden;
}

/* Collapse the double top/bottom border between adjacent items when no gap is set */
.oi-accordion__item + .oi-accordion__item {
    margin-top: -1px;
}

/* Trigger button — resets all browser button styles */
.oi-accordion__trigger {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

/* Reset margins inside trigger group (legacy server-rendered button) */
.oi-accordion__trigger .oi-accordion__trigger-text * {
    margin: 0;
}

/* Wrapped (user-block) trigger — the styled group becomes the button via JS.
   role=button + tabindex=0 are added at runtime. */
.oi-accordion__trigger-text[role="button"] {
    cursor: pointer;
    user-select: none;
}
.oi-accordion__trigger-text[role="button"]:focus-visible {
    outline: 2px solid var( --wp--preset--color--palette-1, #2271b1 );
    outline-offset: 2px;
}

/* Trigger icon — any element marked with `oi-accordion__icon-rotate` rotates
   180° when the item opens. The default item template inserts the chevron
   with this class already applied, so authors get the behaviour for free.
   Decorative icons added to the trigger row are untouched. To opt another
   icon in, add the class via Advanced > Additional CSS Class(es).
   `oi-accordion__chevron` is kept as a legacy alias for content saved before
   the rename. */
.oi-accordion__icon-rotate,
.oi-accordion__chevron {
    transition: transform 0.25s ease;
}
.oi-accordion__item.is-open .oi-accordion__icon-rotate,
.oi-accordion__item.is-open .oi-accordion__chevron {
    transform: rotate( 180deg );
}

/* Content — animated expand/collapse via grid-template-rows */
.oi-accordion__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    /* Zero the inherited blockGap margin WP applies between siblings inside
       a flow/constrained layout — the panel sits flush below the trigger row. */
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}
.oi-accordion__item.is-open .oi-accordion__content {
    grid-template-rows: 1fr;
}
.oi-accordion__content-inner {
    overflow: hidden;
}


/* ── Item hover effects (mirrors Info Card hover options) ──────────────────── */
/* Set up the transition base on every item so opt-in modifiers animate. */
.oi-accordion[class*="oi-accordion--item-hover-"] .oi-accordion__item {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        outline-color 0.2s ease,
        outline-width 0.2s ease,
        outline-offset 0.2s ease;
}

.oi-accordion--item-hover-lift .oi-accordion__item:hover {
    transform: translateY(-4px);
}

.oi-accordion--item-hover-shadow .oi-accordion__item:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.oi-accordion--item-hover-lift-shadow .oi-accordion__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
}

.oi-accordion--item-hover-scale .oi-accordion__item:hover {
    transform: scale(1.02);
    z-index: 1; /* keep the scaled item above its neighbors */
    position: relative;
}

.oi-accordion--item-hover-bg-tint .oi-accordion__item:hover {
    background-color: var(--wp--preset--color--palette-8);
}

.oi-accordion--item-hover-bg-brand .oi-accordion__item:hover {
    background-color: var(--wp--preset--color--palette-1);
    color: var(--wp--preset--color--palette-9);
}

.oi-accordion--item-hover-border .oi-accordion__item {
    border: 1px solid var(--wp--preset--color--palette-6);
}
.oi-accordion--item-hover-border .oi-accordion__item:hover {
    border-color: var(--wp--preset--color--palette-1);
}

.oi-accordion--item-hover-outline .oi-accordion__item {
    outline: 0 solid transparent;
    outline-offset: 0;
}
.oi-accordion--item-hover-outline .oi-accordion__item:hover {
    outline: 2px solid var(--wp--preset--color--palette-1);
    outline-offset: 4px;
}

.oi-accordion--item-hover-accent-line .oi-accordion__item {
    position: relative;
    isolation: isolate;
}
.oi-accordion--item-hover-accent-line .oi-accordion__item::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    height: 3px;
    width: 0;
    background-color: var(--wp--preset--color--palette-11, var(--wp--preset--color--palette-1));
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1;
}
.oi-accordion--item-hover-accent-line .oi-accordion__item:hover::before {
    width: 100%;
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
    .oi-accordion__content,
    .oi-accordion__icon-rotate,
    .oi-accordion__chevron,
    .oi-accordion[class*="oi-accordion--item-hover-"] .oi-accordion__item {
        transition: none;
    }
    .oi-accordion--item-hover-lift .oi-accordion__item:hover,
    .oi-accordion--item-hover-lift-shadow .oi-accordion__item:hover,
    .oi-accordion--item-hover-scale .oi-accordion__item:hover {
        transform: none;
    }
}

/* ── Editor canvas overrides ────────────────────────────────────────────────── */

/* Editor: toggle bar at the top of each item for expand/collapse */
.editor-styles-wrapper .oi-accordion__toggle-bar {
    height: 4px;
    cursor: pointer;
    background: transparent;
    transition: background-color 0.15s;
}
.editor-styles-wrapper .oi-accordion__toggle-bar:hover {
    background: rgba(0, 0, 0, 0.05);
}