/* MM FAQ Element — faq.css
 *
 * Styling via CSS custom properties. Override only what you want to change
 * by redefining the variables in your theme CSS:
 *
 *   .mm-faq-block {
 *       --mm-faq-accent:    #c0392b;
 *       --mm-faq-padding-y: 1.25rem;
 *   }
 *
 * Salient and Revolution style heading tags and generic selectors
 * aggressively. All rules use .mm-faq-block as context so theme styles
 * do not leak into the block and our styles do not leak out of it.
 */

/* ── Custom properties (overridable defaults) ────────────────────────────── */

.mm-faq-block {
    /* Accent colour of the question while the item is open.
       currentColor follows the theme text colour, so it works without config. */
    --mm-faq-accent:         currentColor;

    /* Padding around the question row */
    --mm-faq-padding-y:      0.875rem;
    --mm-faq-padding-x:      0;

    /* Left indent of the answer (to align with the question text) */
    --mm-faq-answer-indent:  0;

    /* Padding below the answer */
    --mm-faq-answer-padding: 0.75rem;

    /* Divider colour, opacity and width.
       Set --mm-faq-border-color to use a fixed colour instead of currentColor. */
    --mm-faq-border-color:   currentColor;
    --mm-faq-border-opacity: 0.15;
    --mm-faq-border-width:   1px;

    --mm-faq-icon-size:      1em;

    /* Space between the optional title and the list */
    --mm-faq-title-gap:      1rem;
}

/* ── Block wrapper ───────────────────────────────────────────────────────── */

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

/* Salient and Revolution sometimes add margin to h2-h4 inside sections. */
.mm-faq-block .mm-faq-title {
    margin-top: 0;
    margin-bottom: var(--mm-faq-title-gap);
}

.mm-faq-block .mm-faq-list {
    display: flex;
    flex-direction: column;
}

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

/* Some themes style `details` as a block but keep the browser marker or add padding. */
.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;
}

/* Salient and Revolution sometimes style `summary` as inline-block or set cursor: default. */
.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;
}

.mm-faq-block .mm-faq-item[open] > .mm-faq-question {
    color: var(--mm-faq-accent);
}

/* ── Question text and icon ──────────────────────────────────────────────── */

/* Salient and Revolution give h3 their own margin, font-size and font-weight.
   Reset fully so the summary styling decides what is visible, not the theme. */
.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;
}

/* Plus/minus drawn in CSS, no image. */
.mm-faq-block .mm-faq-icon {
    flex-shrink: 0;
    display: inline-block;
    width: var(--mm-faq-icon-size);
    height: var(--mm-faq-icon-size);
    /* Aligns the icon with the first text line: about (line-height - icon-size) / 2 at line-height 1.6 */
    margin-top: 0.3em;
    position: relative;
}

.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%);
}

/* Horizontal bar, always visible */
.mm-faq-block .mm-faq-icon::before {
    width: 0.75em;
    height: 2px;
}

/* Vertical bar, collapses when the item is open */
.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);
}

/* ── Answer ──────────────────────────────────────────────────────────────── */

/* overflow: hidden is required for the JS height animation. Revolution
   sometimes sets `overflow: visible` on child divs; the specificity of
   .mm-faq-block .mm-faq-answer wins. */
.mm-faq-block .mm-faq-answer {
    overflow: hidden;
}

/* Slightly quieter than the question for a light visual hierarchy */
.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;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .mm-faq-block .mm-faq-question,
    .mm-faq-block .mm-faq-icon::after {
        transition: none;
    }
}