/**
 * Accordion styling for markup produced by ckeditor5_bootstrap_accordion.
 * Matches the Agora Design System accordion spec (Figma node 2725:85200):
 * minimalist list with #9EAACC dividers between items, no card fills.
 * Body always renders white background + dark text (works on any parent
 * background, including light-blue containers).
 */

.accordion {
    border: 1px solid #9EAACC;
    overflow: hidden;
    background: transparent;
}

.accordion .accordion-item {
    background: transparent;
}

.accordion .accordion-item+.accordion-item {
    border-top: 1px solid #9EAACC;
}

.accordion .accordion-header {
    margin: 0;
}

.accordion .accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 16px);
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    color: var(--color-primary-600, #0066cc);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 200ms ease;
}

.accordion .accordion-button:hover,
.accordion .accordion-button:focus-visible {
    background: rgba(158, 170, 204, 0.15);
    /* faint #9EAACC tint */
}

/* ── Focus ring — inset so it isn't clipped ── */
.accordion .accordion-button:focus-visible {
    outline: var(--focus-outline-width, 2px) solid var(--focus-outline-color, #1a1a1a);
    outline-offset: calc(-1 * var(--focus-outline-width, 2px));
    border-radius: var(--corner-2, 4px);
}

.accordion .accordion-button::after {
    content: "";
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 200ms ease;
    flex-shrink: 0;
}

.accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

.accordion .accordion-collapse {
    display: none;
    visibility: visible;
    /* override Tailwind's `.collapse { visibility: collapse }` */
}

.accordion .accordion-collapse.show {
    display: block;
}

.accordion .accordion-body {
    padding: 4px 16px 20px 24px;
    background: #ffffff !important;
    color: var(--color-neutral-900, #2b363c) !important;
    position: relative;
}

/* Vertical divider on the left side of the expanded body — matches Figma
   spec (node 5476:24488). Sits inside the body's left padding.
   Hidden when the body contains a nested accordion. */
.accordion .accordion-body::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 4px;
    bottom: 18px;
    width: 2px;
    background: var(--color-primary-600, #0066cc);
}

/* Force text descendants dark on white — beats any Tailwind class attached
   to inline elements typed into CKEditor. */
.accordion .accordion-body,
.accordion .accordion-body p,
.accordion .accordion-body li,
.accordion .accordion-body span,
.accordion .accordion-body strong,
.accordion .accordion-body em,
.accordion .accordion-body h1,
.accordion .accordion-body h2,
.accordion .accordion-body h3,
.accordion .accordion-body h4,
.accordion .accordion-body h5,
.accordion .accordion-body h6,
.accordion .accordion-body td,
.accordion .accordion-body th {
    color: var(--color-neutral-900, #2b363c) !important;
}

.accordion .accordion-body a {
    color: var(--color-primary-600, #0066cc);
    text-decoration: underline;
}

/* Nested accordion: sits inside an .accordion-body; escapes the body's
   padding entirely so it spans 100% of the parent item's width, with no
   divider (the parent body's ::before is suppressed via :has() below). */
.accordion .accordion-body:has(> .accordion) {
    padding: 0;
}

.accordion .accordion-body:has(> .accordion)::before {
    display: none;
}

.accordion .accordion-body>.accordion {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    /* No separator between an expanded parent title and its sub-items —
       this border-top was the line under the expanded parent's title. */
    border-top: 0;
}

/* Nested accordion button: neutral colour + no underline to differentiate
   from the parent accordion (which is primary-600 bold). Indented 16px so
   sub-items read visually as children of the parent item. */
.accordion .accordion-body .accordion .accordion-button {
    color: #1a1a1a;
    text-decoration: none !important;
    font-weight: 700;
    padding-left: 32px;
    /* 16px base + 16px sub-item indent */
}

/* Sub-item body: same 16px extra indent as its title. */
.accordion .accordion-body .accordion .accordion-body {
    padding-left: 40px;
    /* 24px base + 16px sub-item indent */
}

.accordion .accordion-body .accordion .accordion-body::before {
    left: 32px;
    /* 16px base + 16px sub-item indent */
}