/* ============================================================
   WEB DESIGN BRISBANE — Section 12: FAQ
   Cream background, greyish dashed lines (no fade), accordions
   centred at max 760px. Accessible (aria-expanded wired in JS).
   ============================================================ */
.wdb-faq {
    background: var(--color-white);
    color: var(--color-black2);
    padding: calc(var(--wdb-pad) * 4) var(--pad-x) calc(var(--wdb-pad) * 4);
}
.wdb-faq__heading {
    font-family: var(--font-heading); font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
    font-size: var(--wdb-fs-faq); color: var(--color-black2);
    text-align: center; margin: 0 auto var(--space-9); max-width: 760px;
}
/* Content stays centred at 760px, but the divider lines span the full
   page width (100vw, centred) on every viewport. body has overflow-x:clip
   so the 100vw lines never create a horizontal scrollbar. */
.wdb-faq__list { max-width: 760px; margin: 0 auto; position: relative; }
.wdb-faq__list::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 100vw; height: 0; border-top: var(--guide-width) var(--guide-style) var(--color-greyish);
}
.wdb-faq__item { position: relative; }
.wdb-faq__item::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100vw; height: 0; border-top: var(--guide-width) var(--guide-style) var(--color-greyish);
    pointer-events: none;
}
.wdb-faq__trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
    padding: var(--space-6) 0; text-align: left; background: none; border: none; cursor: pointer;
}
.wdb-faq__question {
    font-family: var(--font-heading); font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight); line-height: var(--leading-snug);
    font-size: 20px; color: var(--color-black2);
}
/* Beinc chevron — points DOWN when closed, rotates UP when open (eased).
   Base SVG points right, so closed = +90° (down), open = -90° (up). */
.wdb-faq__icon { display: flex; align-items: center; justify-content: center; width: 16px; height: 20px; flex-shrink: 0; }
.wdb-faq__icon img { display: block; height: 15px; width: auto; transform: rotate(90deg); transform-origin: center; transition: transform var(--duration-fast) var(--ease-primary); }
.wdb-faq__item.is-open .wdb-faq__icon img { transform: rotate(-90deg); }
.wdb-faq__panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.5s var(--ease-primary), opacity 0.35s var(--ease-primary); }
.wdb-faq__item.is-open .wdb-faq__panel { max-height: 600px; opacity: 1; }
.wdb-faq__answer {
    font-family: var(--font-body); font-size: var(--text-xs);
    letter-spacing: var(--tracking-body); line-height: var(--leading-relaxed);
    color: var(--color-black2); padding-bottom: var(--space-6); margin: 0;
}

@media (max-width: 767px) {
    .wdb-faq { padding-top: var(--wdb-sec-y); padding-bottom: var(--wdb-sec-y); }
    .wdb-faq__question { font-size: var(--text-base); }
}