/* Accordion */
.accordion .card-header {
    background: $quaternary-color;

    // The generic `h4 a:hover` rule turns the title #0c3083 — the same as this
    // background — so keep it white on hover (default and .accordion-black).
    .accordion-toggle:hover {
        color: $white;
    }
}

.accordion-toggler .card-header {
    background: #efce53;
}
.accordion-toggler .card-header a:hover {
    color:  #b86f14;
}

.accordion .card-header .card-title {
    color: #ffffff;
}

// Colour variants are added via the accordion wrapper's CSS class field, which
// renders on the same element as .accordion. The extra class makes them win over
// the default colours here and the .card-body border in park-custom.scss.
$accordion-variants: (
    'black': $black,
    'orange': $tertiary-color,
    'rose': $quaternary-bg,
    'dark-blue': $quaternary-color,
    'light-blue': $primary-bg,
);

@each $name, $color in $accordion-variants {
    .accordion.accordion-#{$name} {
        .card-header {
            background: $color;
        }

        .card-body {
            border-color: $color;
        }
    }
}

.accordion.accordion-black .card-body {
    color: $black;

    // Editors colour text via inline RTE styles (e.g. span style="color:#0c3083"),
    // so !important is needed to force black. Buttons keep their own colours.
    *:not(.btn):not(.btn *) {
        color: $black !important;
    }
}