/* ============================================================================
 * Widget FAQ · skin WC_WEY (Wey Barros · Treinamento de força) — o acordeão
 * na linguagem do tema: cartão branco (--wb-surface-raised) sobre borda fina,
 * o CANTO CORTADO da marca (--wb-radius-cut: três cantos redondos, um reto),
 * pergunta em corpo 600, resposta na voz secundária (--wb-text-muted) e o
 * chevron dentro da moldura .wb-icone em miniatura (verde-100 preenchendo,
 * verde-700 escrevendo; aberto = verde-900 preenche, off-white escreve).
 * O item aberto ganha a borda verde-400 e a RAMPA fina no teto — os degraus
 * reais do sistema (100→800), a assinatura de profundidade da marca.
 *
 * Não existe cor de destaque neste sistema: o destaque é profundidade (uma
 * rampa só). Sobre fundo escuro (data-bs-theme='dark', .wb-section--anchor,
 * .wb-hero, .wb-footer) os tokens --wb-* já invertem no wc-wey.css; a skin só
 * não fixa cor literal e inverte o "aberto" (off-white preenche, verde escreve).
 *
 * Os tokens --wb-* vêm de wc_css/wc-wey.css (carregado no <head>, antes deste
 * arquivo); os fallbacks repetem a derivação da rampa do tema (color-mix a
 * partir de 900/600) para o caso de a skin ser forçada por $FaqSkin fora dele.
 *
 * Cobre a mesma marcação em dois lugares: o widget (WcFaq::render, chevron em
 * <em class="icon ni">) e o acordeão estático da home sem módulo
 * (wc_wey_faq_static_html → .wc-faq.wc-faq--static, chevron em <i class="bi">).
 * ==========================================================================*/

.wc-faq,
.wc-faq--static {
    --wcfaq-g950: var(--wb-green-950, #09160F);
    --wcfaq-g900: var(--wb-green-900, #12271B);
    --wcfaq-g800: var(--wb-green-800, color-mix(in srgb, var(--wcfaq-g900) 72%, var(--wcfaq-g600)));
    --wcfaq-g700: var(--wb-green-700, color-mix(in srgb, var(--wcfaq-g900) 36%, var(--wcfaq-g600)));
    --wcfaq-g600: var(--wb-green-600, #427357);
    --wcfaq-g500: var(--wb-green-500, color-mix(in srgb, var(--wcfaq-g600) 82%, #fff));
    --wcfaq-g400: var(--wb-green-400, color-mix(in srgb, var(--wcfaq-g600) 58%, #fff));
    --wcfaq-g300: var(--wb-green-300, color-mix(in srgb, var(--wcfaq-g600) 38%, #fff));
    --wcfaq-g200: var(--wb-green-200, color-mix(in srgb, var(--wcfaq-g600) 22%, #fff));
    --wcfaq-g100: var(--wb-green-100, color-mix(in srgb, var(--wcfaq-g600) 12%, #fff));
    --wcfaq-bone: var(--wb-bone, #F2F5F3);
    --wcfaq-bone-rgb: var(--wb-bone-rgb, 242, 245, 243);

    /* Semântica: lê os tokens do tema (que invertem no escuro) com queda para os
       --bs-* do painel e, por fim, para a rampa acima. A pergunta usa --wb-text e
       não --wb-heading porque --bs-heading-color do painel NÃO inverte dentro do
       bloco escuro — --wb-text inverte. */
    --wcfaq-heading:   var(--wb-text, var(--bs-body-color, var(--wcfaq-g900)));
    --wcfaq-text:      var(--wb-text, var(--bs-body-color, var(--wcfaq-g900)));
    --wcfaq-muted:     var(--wb-text-muted, var(--wc-muted, var(--wcfaq-g700)));
    --wcfaq-accent:    var(--wb-text-accent, var(--bs-link-color, var(--wcfaq-g600)));
    --wcfaq-surface:   var(--wb-surface-raised, var(--bs-card-bg, #fff));
    --wcfaq-border:    var(--wb-border, var(--bs-border-color, var(--wcfaq-g200)));
    --wcfaq-border-strong: var(--wb-border-strong, var(--wcfaq-g300));
    --wcfaq-icone-bg:  var(--wb-icone-bg, var(--wcfaq-g100));
    --wcfaq-icone-fg:  var(--wb-icone-fg, var(--wcfaq-g700));
    --wcfaq-open-bg:   var(--wcfaq-g900);   /* chevron aberto no claro */
    --wcfaq-open-fg:   var(--wcfaq-bone);
    --wcfaq-radius:    var(--wb-radius-cut, 16px 16px 16px 3px);
    --wcfaq-radius-lg: var(--wb-radius-lg, 16px);
    --wcfaq-radius-md: var(--wb-radius-md, 9px);
    --wcfaq-shadow:    var(--wb-shadow-md, 0 4px 16px -4px color-mix(in srgb, var(--wcfaq-g900) 13%, transparent), 0 1px 2px color-mix(in srgb, var(--wcfaq-g900) 6%, transparent));
    --wcfaq-ease:      var(--wb-ease, cubic-bezier(.22, 1, .36, 1));
    --wcfaq-dur:       var(--wb-dur-base, 280ms);
    --wcfaq-dur-fast:  var(--wb-dur-fast, 150ms);
    --wcfaq-font-display: var(--wb-font-display, 'Familjen Grotesk', system-ui, sans-serif);
    --wcfaq-font-body:    var(--wb-font-body, 'Instrument Sans', system-ui, sans-serif);
    color: var(--wcfaq-text);
    font-family: var(--wcfaq-font-body);
}

/* --- Cabeçalho (quando a página não passa hide_head) ---------------------- */
.wc-faq__head { margin-bottom: var(--wb-space-5, 1.5rem); }
.wc-faq__title {
    font-family: var(--wcfaq-font-display);
    font-size: var(--wb-fs-h3, clamp(1.3rem, 2vw, 1.7rem));
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: var(--wb-lh-snug, 1.14);
    color: var(--wcfaq-heading);
}
.wc-faq__title .icon,
.wc-faq__title .bi { color: var(--wcfaq-accent); font-size: 1.15rem; }
.wc-faq__sub { color: var(--wcfaq-muted); font-size: var(--wb-fs-sm, .875rem); }

/* --- Item ---------------------------------------------------------------- */
.wc-faq__list { gap: .7rem; }
.wc-faq__item {
    position: relative;
    background: var(--wcfaq-surface);
    border: 1px solid var(--wcfaq-border);
    border-radius: var(--wcfaq-radius);   /* canto cortado: a assinatura da marca */
    transition: border-color var(--wcfaq-dur) var(--wcfaq-ease),
                box-shadow var(--wcfaq-dur) var(--wcfaq-ease);
}
.wc-faq__item:hover { border-color: var(--wcfaq-border-strong); }
.wc-faq__item[open] {
    border-color: var(--wcfaq-g400);
    box-shadow: var(--wcfaq-shadow);
}
/* Rampa fina no teto do item aberto: os 8 degraus reais do sistema, do claro
   ao escuro. É um pseudo com fundo (e não border-top) porque a borda afinaria
   nos cantos arredondados; o overflow:hidden do base recorta pelo raio. */
.wc-faq__item[open]::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    border-radius: var(--wcfaq-radius-lg) var(--wcfaq-radius-lg) 0 0;
    background: linear-gradient(90deg,
        var(--wcfaq-g100) 0%, var(--wcfaq-g200) 14%, var(--wcfaq-g300) 28%, var(--wcfaq-g400) 42%,
        var(--wcfaq-g500) 56%, var(--wcfaq-g600) 70%, var(--wcfaq-g700) 84%, var(--wcfaq-g800) 100%);
    pointer-events: none;
}

/* --- Pergunta ------------------------------------------------------------- */
.wc-faq__q {
    padding: 1.1rem 1.35rem;
    gap: 1.1rem;
    font-family: var(--wcfaq-font-body);
    font-size: var(--wb-fs-base, 1rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--wcfaq-heading);
    transition: color var(--wcfaq-dur-fast) linear;
}
.wc-faq__q:hover { color: var(--wcfaq-accent); }
/* Teclado: <summary> é focável e precisa mostrar onde está. Anel no mesmo
   recorte do cartão para não vazar pelos cantos. */
.wc-faq__q:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--wcfaq-g600) 55%, transparent);
    outline-offset: -3px;
    border-radius: var(--wcfaq-radius);
}
/* Destaque da busca (/faq). A margem negativa devolve o que o padding empurrou:
   sem ela o trecho marcado afasta a pontuação seguinte ("progressão ?"). */
.wc-faq__q mark {
    background: color-mix(in srgb, var(--wcfaq-g400) 45%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: .06em .14em;
    margin: 0 -.14em;
}

/* --- Chevron na moldura .wb-icone--sm --------------------------------------
   34px com o canto cortado em miniatura (o mesmo do .wb-icone--sm). O base
   gira a MOLDURA 180° ao abrir — aqui isso levaria o canto reto para cima à
   direita, e a assinatura viraria de cabeça para baixo. Por isso a moldura
   fica parada e quem gira é só o glifo (em, i). */
.wc-faq__chev {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: var(--wcfaq-radius-md) var(--wcfaq-radius-md) var(--wcfaq-radius-md) 2px;
    background: var(--wcfaq-icone-bg);
    color: var(--wcfaq-icone-fg);
    transition: background-color var(--wcfaq-dur) var(--wcfaq-ease),
                color var(--wcfaq-dur) var(--wcfaq-ease);
}
.wc-faq__chev .icon,
.wc-faq__chev .bi {
    display: inline-flex;
    font-size: 1rem;
    line-height: 1;
    transition: transform var(--wcfaq-dur) var(--wcfaq-ease);
}
.wc-faq__item[open] > .wc-faq__q .wc-faq__chev { transform: none; }
.wc-faq__item[open] > .wc-faq__q .wc-faq__chev .icon,
.wc-faq__item[open] > .wc-faq__q .wc-faq__chev .bi { transform: rotate(180deg); }
.wc-faq__q:hover .wc-faq__chev { background: var(--wcfaq-g200); color: var(--wcfaq-g900); }
.wc-faq__item[open] .wc-faq__chev,
.wc-faq__item[open] .wc-faq__q:hover .wc-faq__chev {
    background: var(--wcfaq-open-bg);
    color: var(--wcfaq-open-fg);
}

/* --- Resposta ------------------------------------------------------------- */
.wc-faq__a {
    padding: 0 1.35rem 1.25rem;
    /* Alinha com a pergunta e segura a coluna em ~68ch, onde a leitura corrida
       para de cansar — a resposta é o conteúdo, não o cartão. */
    max-width: 68ch;
    font-size: var(--wb-fs-sm, .875rem);
    line-height: var(--wb-lh-base, 1.62);
    color: var(--wcfaq-muted);
    text-wrap: pretty;
}
.wc-faq__a p { margin: 0 0 .65rem; }
.wc-faq__a a {
    color: var(--wcfaq-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color var(--wcfaq-dur-fast) linear;
}
.wc-faq__a a:hover { color: var(--wcfaq-heading); }
.wc-faq__a strong { color: var(--wcfaq-heading); font-weight: 600; }
/* reset.css e dashlite.css zeram os marcadores de lista no site inteiro; a
   resposta vinda do editor pode trazê-los e precisa deles de volta. */
.wc-faq__a ul, .wc-faq__a ol { margin: .35rem 0 .75rem; padding-left: 1.25rem; }
.wc-faq__a ul, .wc-faq__a ul > li { list-style: disc; }
.wc-faq__a ol, .wc-faq__a ol > li { list-style: decimal; }
.wc-faq__a li { margin-bottom: .25rem; }

/* --- Sobre fundo escuro (bloco âncora, herói, rodapé, dark) ----------------
   Os tokens --wb-* já invertem superfície, borda, texto e a moldura do chevron
   (--wb-icone-bg/fg). O que precisa de regra própria é o estado ABERTO: o
   verde-900 preenchendo sumiria sobre verde-900, então inverte — off-white
   preenche, verde escreve (a mesma regra do .btn-wb-primary no escuro). */
[data-bs-theme='dark'] .wc-faq,
.wb-section--anchor .wc-faq,
.wb-section--black .wc-faq,
.wb-hero .wc-faq,
.wb-footer .wc-faq,
.wc-faq[data-bs-theme='dark'] {
    --wcfaq-open-bg: var(--wcfaq-bone);
    --wcfaq-open-fg: var(--wcfaq-g900);
    --wcfaq-heading: var(--wb-text, var(--wcfaq-bone));
    --wcfaq-text:    var(--wb-text, var(--wcfaq-bone));
    --wcfaq-muted:   var(--wb-text-muted, var(--wcfaq-g300));
    --wcfaq-accent:  var(--wb-text-accent, var(--wcfaq-g300));
    --wcfaq-surface: var(--wb-surface-raised, var(--wcfaq-g800));
    --wcfaq-border:  var(--wb-border, rgba(var(--wcfaq-bone-rgb), .16));
    --wcfaq-border-strong: var(--wb-border-strong, rgba(var(--wcfaq-bone-rgb), .30));
    --wcfaq-icone-bg: var(--wb-icone-bg, rgba(var(--wcfaq-bone-rgb), .10));
    --wcfaq-icone-fg: var(--wb-icone-fg, var(--wcfaq-g300));
    --wcfaq-shadow:  var(--wb-shadow-lg, 0 18px 48px -14px rgba(0, 0, 0, .7));
}
[data-bs-theme='dark'] .wc-faq__q:hover .wc-faq__chev,
.wb-section--anchor .wc-faq__q:hover .wc-faq__chev,
.wb-section--black .wc-faq__q:hover .wc-faq__chev,
.wb-hero .wc-faq__q:hover .wc-faq__chev,
.wb-footer .wc-faq__q:hover .wc-faq__chev {
    background: rgba(var(--wcfaq-bone-rgb), .18);
    color: var(--wcfaq-bone);
}
[data-bs-theme='dark'] .wc-faq__q:focus-visible,
.wb-section--anchor .wc-faq__q:focus-visible,
.wb-section--black .wc-faq__q:focus-visible,
.wb-hero .wc-faq__q:focus-visible,
.wb-footer .wc-faq__q:focus-visible {
    outline-color: rgba(var(--wcfaq-bone-rgb), .55);
}
[data-bs-theme='dark'] .wc-faq__q mark,
.wb-section--anchor .wc-faq__q mark,
.wb-section--black .wc-faq__q mark,
.wb-hero .wc-faq__q mark,
.wb-footer .wc-faq__q mark {
    background: color-mix(in srgb, var(--wcfaq-g500) 55%, transparent);
}

/* --- Celular ---------------------------------------------------------------- */
@media (max-width: 575px) {
    .wc-faq__q { padding: 1rem 1.05rem; gap: .75rem; font-size: .98rem; }
    .wc-faq__a { padding: 0 1.05rem 1.05rem; }
    .wc-faq__chev { width: 30px; height: 30px; }
    .wc-faq__chev .icon, .wc-faq__chev .bi { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .wc-faq__item,
    .wc-faq__q,
    .wc-faq__chev,
    .wc-faq__chev .icon,
    .wc-faq__chev .bi,
    .wc-faq__a a { transition: none; }
}