/* MM FAQ Element — faq.css
 *
 * Styling via CSS custom properties. Overschrijf alleen wat je wilt
 * veranderen door de variabelen opnieuw te definiëren in je thema-CSS:
 *
 *   .mm-faq-block {
 *       --mm-faq-accent:    #c0392b;
 *       --mm-faq-padding-y: 1.25rem;
 *   }
 *
 * Salient en Revolution stylen heading-tags en generieke selectors
 * aggressief. Alle regels gebruiken .mm-faq-block als context zodat
 * thema-stijlen niet doorlekken in het blok en onze stijlen niet
 * buiten het blok lekken.
 */

/* ── Custom properties (overschrijfbare standaarden) ─────────────────────── */

.mm-faq-block {
    /* Accentkleur op de vraag als het item open is.
       Standaard currentColor = thema-tekstkleur, werkt altijd zonder config. */
    --mm-faq-accent:         currentColor;

    /* Padding boven/onder en links/rechts op de vraagregel */
    --mm-faq-padding-y:      0.875rem;
    --mm-faq-padding-x:      0;

    /* Inspringing van het antwoord links (uitlijnen met vraagtekst) */
    --mm-faq-answer-indent:  0;

    /* Padding onderaan binnen het antwoordblok */
    --mm-faq-answer-padding: 0.75rem;

    /* Scheidingslijn kleur, doorzichtigheid en dikte.
       Stel --mm-faq-border-color in om een vaste kleur te gebruiken
       in plaats van currentColor. */
    --mm-faq-border-color:   currentColor;
    --mm-faq-border-opacity: 0.15;
    --mm-faq-border-width:   1px;

    /* Icoongrootte */
    --mm-faq-icon-size:      1em;

    /* Ruimte tussen de optionele titel en de lijst */
    --mm-faq-title-gap:      1rem;
}

/* ── Blok wrapper ────────────────────────────────────────────────────────── */

.mm-faq-block {
    width: 100%;
}

/* Salient en Revolution voegen soms margin toe aan h2–h4 binnen secties.
   Reset zodat de titel consistent staat. */
.mm-faq-block .mm-faq-title {
    margin-top: 0;
    margin-bottom: var(--mm-faq-title-gap);
}

/* Buitenste lijn boven het eerste item */
.mm-faq-block .mm-faq-list {
    display: flex;
    flex-direction: column;
}

/* ── Details / summary ───────────────────────────────────────────────────── */

/* Reset: sommige thema's (Revolution, Salient) stylen `details` als block
   maar laten de browser-driehoek staan of voegen padding toe. */
.mm-faq-block .mm-faq-item {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    border-bottom: var(--mm-faq-border-width) solid;
    border-bottom-color: color-mix(in srgb, var(--mm-faq-border-color) calc(var(--mm-faq-border-opacity) * 100%), transparent);
}

.mm-faq-block .mm-faq-item::-webkit-details-marker {
    display: none;
}

/* Summary reset — Salient en Revolution stylen `summary` soms als
   inline-block of voegen cursor: default toe. */
.mm-faq-block .mm-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1em;
    cursor: pointer;
    list-style: none;
    padding: var(--mm-faq-padding-y) var(--mm-faq-padding-x);
    font-weight: 600;
    transition: color 0.2s ease;
}

.mm-faq-block .mm-faq-question::-webkit-details-marker {
    display: none;
}

/* Accentkleur op de vraag als het item open is */
.mm-faq-block .mm-faq-item[open] > .mm-faq-question {
    color: var(--mm-faq-accent);
}

/* ── Icoon: plus/min via CSS, geen afbeelding ────────────────────────────── */

/* h3 reset — Salient en Revolution stylen h3 met eigen margin, font-size
   en font-weight. Reset volledig zodat de summary-stijl bepaalt wat er
   zichtbaar is, niet het thema. */
.mm-faq-block .mm-faq-question-text {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    text-align: left;
}

.mm-faq-block .mm-faq-icon {
    flex-shrink: 0;
    display: inline-block;
    width: var(--mm-faq-icon-size);
    height: var(--mm-faq-icon-size);
    /* Optische uitlijning: icoon op hoogte van de eerste tekstregel.
       line-height / 2 - icon-size / 2 ≈ 0.3em voor standaard line-height 1.6 */
    margin-top: 0.3em;
    position: relative;
    transition: transform 0.25s ease;
}

.mm-faq-block .mm-faq-icon::before,
.mm-faq-block .mm-faq-icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Horizontale balk (altijd zichtbaar) */
.mm-faq-block .mm-faq-icon::before {
    width: 0.75em;
    height: 2px;
}

/* Verticale balk (verdwijnt als item open is) */
.mm-faq-block .mm-faq-icon::after {
    width: 2px;
    height: 0.75em;
    transition: transform 0.25s ease;
}

.mm-faq-block .mm-faq-item[open] .mm-faq-icon::after {
    transform: translate(-50%, -50%) scaleY(0);
}

/* ── Antwoord wrapper ────────────────────────────────────────────────────── */

/* overflow: hidden is vereist voor de JS hoogte-animatie.
   Revolution voegt soms `overflow: visible` toe aan child-divs;
   de hoge specificiteit van .mm-faq-block .mm-faq-answer wint daarvan. */
.mm-faq-block .mm-faq-answer {
    overflow: hidden;
}

/* Lichte visuele hiërarchie: antwoord iets kleiner en ingetogener dan vraag */
.mm-faq-block .mm-faq-answer [itemprop="text"] {
    padding-bottom: var(--mm-faq-answer-padding);
    padding-left: var(--mm-faq-answer-indent);
    font-size: 0.95em;
    opacity: 0.85;
    line-height: 1.65;
}