/*
 * O visual do accordion (fundo #00252E, cantos de 15px, ícone "+") reaproveita
 * as classes globais do Foundation (.accordion / .accordion-item /
 * .accordion-title / .accordion-content), o mesmo visual já usado no bloco de
 * Exercícios e na Central de Ajuda — vem de assets/css/style-app.css.
 *
 * Mas o toggle (abrir/fechar) NÃO usa o JS do Foundation: aqui o <a> fica
 * dentro de um <h3> (hierarquia de heading correta pra SEO/acessibilidade), e
 * o Foundation só liga o clique em <a> filho direto do accordion-item — por
 * isso o comportamento é feito por assets/js/script.js, e as regras abaixo
 * (escopadas em .block-faq) cobrem o que o JS do Foundation faria sozinho.
 */

.block-faq {
    margin-bottom: 30px;
}

.block-faq-title {
    margin-bottom: 20px;
}

.block-faq-question {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.block-faq .accordion-title {
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: #fff;
    letter-spacing: 0.04px;
}

.block-faq .accordion-content {
    display: none;
}

.block-faq .accordion-item.is-active .accordion-content {
    display: block;
}
.accordion-title::before {
    font-weight: normal;
}
/* O Foundation usa o seletor de filho direto ".is-active>.accordion-title"
   pra reposicionar o ícone "+"; como aqui o <a> está dentro de um <h3>, refaz
   o mesmo ajuste com seletor de descendente. */
.block-faq .accordion-item.is-active .accordion-title::before {
    right: 22px;
    content: '-';
}

.accordion-content p:last-child {
    margin-bottom: 0 !important;
}

.block-faq-question {
    margin: 0 !important;
}

.block-faq-question a {
    text-decoration: none !important;
}