/* ============================================================================
 * Widget FAQ · faq.base.css — MECÂNICA do acordeão (compartilhada por todos os
 * temas). Sem cores/visual: cada tema pinta o seu skin em skins/<tema>.css.
 * O dispatcher (faq.php) carrega este arquivo + o skin do tema ativo.
 * Contrato de markup (estável): .wc-faq[.wc-faq--<tipo>] > .wc-faq__head
 *   (.wc-faq__title/.wc-faq__sub) + .wc-faq__list > details.wc-faq__item >
 *   summary.wc-faq__q (.wc-faq__q-text + .wc-faq__chev) + .wc-faq__a
 * ==========================================================================*/
.wc-faq { display: block; width: 100%; margin: 0 auto; }
.wc-faq__head { margin-bottom: 1.1rem; }
.wc-faq__title { display: flex; align-items: center; gap: .55rem; margin: 0; line-height: 1.2; font-weight: 700; }
.wc-faq__sub { margin: .4rem 0 0; }

.wc-faq__list { display: flex; flex-direction: column; gap: .65rem; }
.wc-faq__item { overflow: hidden; }

/* summary = pergunta clicável (esconde o marcador nativo do <details>) */
.wc-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; user-select: none; }
.wc-faq__q::-webkit-details-marker { display: none; }
.wc-faq__q::marker { content: ""; }
.wc-faq__q-text { flex: 1 1 auto; }

/* chevron: gira ao abrir (visual definido pelo skin) */
.wc-faq__chev { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; transition: transform .25s ease, background .2s ease, color .2s ease; }
.wc-faq__item[open] > .wc-faq__q .wc-faq__chev { transform: rotate(180deg); }

.wc-faq__a > :first-child { margin-top: 0; }
.wc-faq__a > :last-child { margin-bottom: 0; }
.wc-faq__item[open] .wc-faq__a { animation: wcFaqIn .25s ease; }
@keyframes wcFaqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }