/* FAQ accordion — YMCA 2026 Option B (node 203:858)
   Light bg (was a purple band in A). Eyebrow "FAQ" + two-tone heading on top,
   full-width accordion list below. Cyan +/- circles, purple-dk 2px dividers,
   purple-dk question titles, dark body copy. A small purple chevron cluster
   sits in the left margin beside the heading (mirrors the comp decoration). */

.bmg-faq {
    position: relative;
    z-index: 0;
    overflow-x: clip;
}

/* heading block: eyebrow + two-tone H2 */
.bmg-faq__head {
    position: relative;
    text-align: left;
}

.bmg-faq__head > * {
    margin: 0;
}

.bmg-faq__title {
    position: relative;
    max-width: 100%;
}

/* Pale lavender "»" chevron cluster in the left margin, level with the H2.
   Two canonical YMCA chevrons (shared mask) — never a hand-rolled SVG. The comp
   shows BOTH glyphs in a soft lavender (front ~#e7e1ef, back ~#f1deef ≈ tint),
   so both layers use pale tokens rather than the saturated purple-md. */
.bmg-faq__title::before,
.bmg-faq__title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 24px;
    height: 46px;
    transform: translateY(-50%);
    pointer-events: none;
    -webkit-mask: var(--bmg-chevron-mask) no-repeat center / contain;
    mask: var(--bmg-chevron-mask) no-repeat center / contain;
}

/* back (right) chevron — slightly pinker pale lavender */
.bmg-faq__title::before {
    left: -50px;
    background-color: var(--accent-1);
}

/* front (left) chevron — soft lavender-grey, overlapping the back one */
.bmg-faq__title::after {
    left: -68px;
    background-color: color-mix(in srgb, var(--accent-1) 88%, var(--primary-dk) 12%);
}

/* accordion list */
.bmg-faq__list {
    margin-inline: 0;
}

/* dividers: purple-dk 2px rule under each item (comp Line 6-9) */
.bmg-faq .ymca-accordion__item {
    border-bottom: 2px solid var(--primary-dk);
}

/* the first item sits flush under the heading — no top rule needed */

/* question titles keep the global tight letter-spacing */
.bmg-faq .ymca-accordion__trigger h3 {
    letter-spacing: -0.04em;
}

/* comp constrains the answer copy a touch narrower than the full row */
.bmg-faq .ymca-accordion__panel p {
    max-width: 1105px;
}

/* the cyan +/- circle must stay vertically centered on the question row,
   not the whole (open) item, so it lines up with the title in the comp */
.bmg-faq .ymca-accordion__item > .ymca-accordion__arrow {
    top: calc(var(--wp--preset--spacing--30, 16px) + 25px);
}

/* ---- editor parity ---- */
/* In the editor the accordion panel is always visible; keep the divider on the
   item (not the header) and the arrow aligned to the question, same as front. */
.editor-styles-wrapper .bmg-faq .ymca-accordion__item {
    border-bottom: 2px solid var(--primary-dk);
}

/* tablet / mobile: the left margin disappears; the relocated cluster read as a
   stray decal floating over the heading (PP #27) — just hide it, same call as
   welcome-intro's inline chevron. */
@media (max-width: 768px) {
    .bmg-faq__title::before,
    .bmg-faq__title::after {
        display: none;
    }
}