/* =========================================================
   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, #000);
    --brk-faq-muted: var(--text-dark-muted, rgba(0,0,0,0.8));
    --brk-faq-accent: var(--primary, #ffcd00);
    --brk-faq-line: var(--neutral-trans-20, rgba(0,0,0,0.2));

    width: 100%;
}

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

/* ── List ───────────────────────────────────────────────────
   Samma dragspel som "Technical specifications" på produktsidan (2026-09-18):
   fristående vita rutor med tunn ram och --radius, --space-xs mellan dem,
   rubriken i --h5 och plus/minus till höger. Värdena är produktmallens
   (Code-elementet i mall 6061, .c-specs-accordion__*), inte egna. */

.brk-faq__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 1.6rem);
}

/* Utfiltrerade frågor är display:none och tar inget gap. */
.brk-faq__entry {
    background-color: var(--white, #fff);
    border: 1px solid var(--neutral-light, #d9d9d9);
    border-radius: var(--radius, 5px);
}

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

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

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

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

/* Typsnitt och versaler ärvs från temats rubrikstil; bara storleken sätts. */
.brk-faq__q-text {
    margin: 0;
    font-size: var(--h5);
    line-height: 1.3;
    color: var(--brk-faq-ink);
}

/* Ikonspråket: plus/minus för dragspel (chevron är för dropdown). */
.brk-faq__marker {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--brk-faq-ink);
}

.brk-faq__marker svg {
    width: 2rem;
    height: 2rem;
}

.brk-faq__entry[open] .brk-faq__marker-open,
.brk-faq__entry:not([open]) .brk-faq__marker-close {
    display: none;
}

/* ── 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: var(--space-s, 2.2rem) var(--space-m, 2.8rem);
    border-top: 1px solid var(--neutral-ultra-light, #f2f2f2);
    color: var(--brk-faq-muted);
    font-size: var(--text-m, 1rem);
    line-height: 1.65;
}

/* Rutan är full bredd; texten behåller sin läsbara radlängd. */
.brk-faq__a > * { max-width: 70ch; }

.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 (max-width: 478px) {
    .brk-faq__q,
    .brk-faq__a {
        padding-inline: var(--space-s, 2.2rem);
    }
}