/*
 * Accordion component styles
 *
 * Scoped to `.frame-default .accordion` — only styles accordions inside a frame-default wrapper.
 *
 * Two render paths emit .accordion markup (as of 2026-06-01):
 *   Path 1 — mask_accordion ContentBlock (CType mask_accordion), 25 pages.
 *            Loads this file via templates/frontend.html → {cb:assetPath()}/Accordion.css.
 *            e.g. /leasing/was-ist-leasing, /leasing/faq-leasing, /factoring/bestatter,
 *                 /unternehmen/auszeichnungen, /glossar/factoring/ausfallrisiko (+20 more)
 *   Path 2 — FSC layout-4 "Akkordion" (any CType with layout=4), rendered by
 *            Extensions/FluidStyledContent/Layouts/Default.html (<f:case value="4">).
 *            Loads this file via {cb:assetPath(name: 'mask/accordion')}/Accordion.css.
 *            frame-default (need overrides, all on hidden pages): /finanzierung/liquiditaet,
 *                 /inhaltselemente/accordion.
 *            frame-none (NOT styled by .frame-default scope): /ki-fuer-den-mittelstand (visible),
 *                 /leasing/ki-vorlage, /leasing/das-jahr-2020-und-weichen-fuer-die-zukunft.
 *
 * Full page list + element uids: see "## Page usage → accordion" in
 * .claude/skills/css-split/css-component-inventory.md (re-run whereisit / DB walk for live truth).
 *
 * Source: extracted from frontend/scss/includes/molecules/_accordion.scss
 */
.frame-default .accordion {
    .accordion-item {
        box-shadow: 0 0 10px 0 #ced4da;
        margin-bottom: 30px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .accordion-button {
        padding: 20px 20px 20px 40px;
    }

    .accordion-header {
        p, h2, h3, h4, h5 {
            margin-bottom: 0;
            font-size: inherit;
            font-weight: inherit;
            color: inherit;
            font-family: inherit;
        }

        .subtitle {
            color: var(--abc-font-color);
            padding-left: 8px;

            &::before {
                content: "|";
                display: inline-block;
                margin-right: 10px;
            }
        }
    }

    .accordion-body {
        padding-top: 0;

        p:last-child {
            margin-bottom: 0;
        }
    }

    .accordion-body-image-left,
    .accordion-body-image-right {
        @media (min-width: 768px) {
            display: flex;
        }

        .accordion-images {
            @media (min-width: 768px) {
                width: 30%;
                flex-shrink: 0;
                flex-grow: 0;
            }
        }
    }

    .accordion-body-image-left {
        .accordion-images {
            @media (min-width: 768px) {
                margin-right: 2rem;
            }
        }
    }

    .accordion-body-image-right {
        .accordion-images {
            @media (min-width: 768px) {
                margin-left: 2rem;
            }
        }
    }
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:focus-visible {
    box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}

.frame:not(.frame-default):has(.accordion) {
    margin-bottom: 0.75rem;
}