/*
 * Webdelta Google FAQ: rustige uitklaplijst.
 * Rijen met een dunne lijn ertussen, de vraag links, een pijltje rechts dat
 * omdraait als de vraag open staat. Geen kaders, geen achtergrondvlakken.
 *
 * Werkt op Bootstrap 5 (Atimo) en Bootstrap 3 (Alcmaria): alle opmaak die
 * BS5 op .accordion-* zet wordt hier geneutraliseerd, en wat BS3 mist voor
 * de BS5-collapse wordt hier aangevuld. Daarom staat alles onder .webdelta_faq.
 *
 * Geen fonts of huisstijlkleuren; af te stemmen per site met:
 *   --wdfaq-vraag-kleur     kleur van de vraag en het pijltje (standaard: tekstkleur)
 *   --wdfaq-vraag-grootte   lettergrootte van de vraag        (standaard: 1.25rem)
 *   --wdfaq-lijn            scheidingslijn tussen de vragen   (standaard: #e9e9e9)
 * Bijvoorbeeld in de template-CSS:  .webdelta_faq { --wdfaq-vraag-kleur: #0159b2; }
 */

.webdelta_faq {
    --wdfaq-vraag-kleur: inherit;
    --wdfaq-vraag-grootte: 1.25rem;
    --wdfaq-lijn: #e9e9e9;
    margin-bottom: 1.5rem;
}

.webdelta_faq .accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--wdfaq-lijn);
    border-radius: 0;
}

.webdelta_faq .accordion-header {
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.webdelta_faq .accordion-button {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 1.25rem 3rem 1.25rem 0;
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--wdfaq-vraag-kleur);
    font-family: inherit;
    font-size: var(--wdfaq-vraag-grootte);
    font-weight: inherit;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

/* BS5 kleurt de open vraag in en zet er een schaduw onder. */
.webdelta_faq .accordion-button:not(.collapsed) {
    background: transparent;
    box-shadow: none;
    color: var(--wdfaq-vraag-kleur);
}

/* Schaduw van BS5 weg, maar toetsenbordfocus blijft zichtbaar. */
.webdelta_faq .accordion-button:focus {
    box-shadow: none;
    outline: none;
}

.webdelta_faq .accordion-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Het pijltje. Een masker in plaats van een gekleurde SVG, zodat het de
 * kleur van de vraag overneemt. De !important's zijn nodig tegen BS5, dat
 * hier een eigen achtergrondafbeelding en draaiing op zet. */
.webdelta_faq .accordion-button::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 0;
    background-color: currentColor;
    background-image: none !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat center / contain;
    transform: none !important;
    transition: transform 0.3s ease;
}

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

.webdelta_faq .accordion-body {
    padding: 0 0 1.25rem 0;
}

.webdelta_faq .accordion-body > :last-child {
    margin-bottom: 0;
}

/* Bootstrap 3 kent alleen .collapse.in; de BS5-collapse zet .show. Zonder
 * deze regel klapt een vraag op een BS3-site wel open, maar blijft hij
 * onzichtbaar. */
.webdelta_faq .collapse {
    display: none;
}

.webdelta_faq .collapse.show {
    display: block;
}

.webdelta_faq .collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .webdelta_faq .accordion-button::after,
    .webdelta_faq .collapsing {
        transition: none;
    }
}