/*
 * Collapsible box (details/summary) used by FAQ items and FAQ groups.
 * Partial: EXT:config/Resources/Private/ContentElements/Partials/New/Accordion.html
 * Small screens (< 768px): always expanded, not collapsible (see accordion.js).
 */
.accordion {
    --accordion-border: #bfd8e5;
    --accordion-title-bg: #00699e;
    --accordion-title-color: #fff;
    --accordion-focus: #d95516;

    margin: 12px 0;
    overflow: hidden;
    border: 1px solid var(--accordion-border);
    border-radius: 10px;
    background: #fff;
}

.accordion__title {
    padding: 17px 20px;
    background: var(--accordion-title-bg);
    color: var(--accordion-title-color);
    font-weight: 650;
    line-height: 1.45;
    cursor: pointer;
}

.accordion__title:focus-visible {
    outline: 3px solid var(--accordion-focus);
    outline-offset: 5px;
}

.accordion__content {
    padding: 20px;
}

.accordion__content > :first-child {
    margin-top: 0;
}

.accordion__content > :last-child {
    margin-bottom: 0;
}

@media only screen and (max-width: 767.98px) {
    .accordion__title {
        list-style: none;
        cursor: default;
    }

    .accordion__title::-webkit-details-marker {
        display: none;
    }
}

/* separate rule: browsers without ::details-content support drop it entirely (JS takes over) */
@media only screen and (max-width: 767.98px) {
    .accordion::details-content {
        content-visibility: visible;
        block-size: auto;
    }
}