/* =========================================================
   FAQ List — [brokk_faq_list]

   <details>/<summary> accordion. Pill chrome comes from
   components/filter-ui/filter-ui.css.

   Headings and buttons deliberately do NOT set font-family:
   they inherit the Bricks/ACSS theme typography.
   ========================================================= */

.brk-faq {
    --brk-faq-ink: var(--text-dark, #0A0A0A);
    --brk-faq-muted: var(--text-dark-muted, #555);
    --brk-faq-accent: var(--brk-yellow, var(--primary, #FFC600));
    --brk-faq-line: var(--neutral-trans-20, rgba(0, 0, 0, 0.12));

    width: 100%;
}

.brk-faq__filter {
    margin-bottom: var(--space-m, 1.5rem);
}

/* ── List ───────────────────────────────────────────────── */

.brk-faq__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--brk-faq-line);
}

.brk-faq__item {
    border-bottom: 1px solid var(--brk-faq-line);
}

/* ── Question ───────────────────────────────────────────── */

.brk-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m, 1.5rem);
    padding: var(--space-s, 1rem) 0;
    cursor: pointer;
    list-style: none;          /* Firefox */
    transition: color 0.15s ease;
}

/* Safari/Chrome default disclosure triangle */
.brk-faq__q::-webkit-details-marker { display: none; }

.brk-faq__q:hover { color: var(--brk-faq-muted); }

.brk-faq__q:focus-visible {
    outline: 2px solid var(--brk-faq-accent);
    outline-offset: 2px;
}

.brk-faq__q-text {
    margin: 0;
    font-size: var(--text-m, 1.125rem);
    line-height: 1.35;
    color: inherit;
}

.brk-faq__marker {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--brk-faq-ink);
    transition: transform 0.2s ease;
}

.brk-faq__entry[open] .brk-faq__marker {
    transform: rotate(180deg);
}

/* ── Answer ─────────────────────────────────────────────
   The site CSS reset zeroes margin-block on everything, so a WYSIWYG answer
   arrives with no vertical rhythm at all. Restore it here, scoped, so a stray
   heading or list in one of the 55 answers cannot blow the accordion apart. */

.brk-faq__a {
    padding: 0 0 var(--space-m, 1.5rem) 0;
    max-width: 68ch;
    color: var(--brk-faq-muted);
    font-size: var(--text-s, 0.9375rem);
    line-height: 1.65;
}

.brk-faq__a > :first-child { margin-block-start: 0; }
.brk-faq__a > :last-child  { margin-block-end: 0; }

.brk-faq__a p,
.brk-faq__a ul,
.brk-faq__a ol,
.brk-faq__a table {
    margin-block: 0 var(--space-s, 1rem);
}

.brk-faq__a ul,
.brk-faq__a ol {
    padding-inline-start: 1.5rem;
}

.brk-faq__a li {
    margin-block: 0 0.35rem;
}

/* An answer is prose, not a section. Any heading an editor drops in is demoted
   visually so it cannot compete with the question above it. */
.brk-faq__a h2,
.brk-faq__a h3,
.brk-faq__a h4 {
    margin-block: var(--space-s, 1rem) 0.35rem;
    font-size: var(--text-m, 1rem);
    line-height: 1.35;
    color: var(--brk-faq-ink);
}

.brk-faq__a a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.brk-faq__a a:hover {
    color: var(--brk-faq-ink);
}

.brk-faq__a img {
    max-width: 100%;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .brk-faq__marker,
    .brk-faq__q {
        transition: none;
    }
}