/*
 * Acordeão de perguntas e respostas (Views/Shared/_Faq.cshtml, classe .trv-faq).
 *
 * Por que CSS próprio: o Reign IV não tem componente de acordeão com <details>, e o que existe
 * no site (.hlp-faq em home-conversao.css, .klp-faq em infantil.css) é escopado às landings que
 * carregam essas folhas. Esta é a mesma aparência do .hlp-faq, sem depender delas, para as
 * páginas em Bootstrap/nv (Grade, Nossa Estrutura, Como Chegar, Metodologia, Graduação).
 * Cores herdam do texto (currentColor) para funcionar em fundo claro ou escuro.
 */

.trv-faq { border-top: 1px solid rgba(0, 0, 0, .12); margin-top: 20px; }
.trv-faq details { border-bottom: 1px solid rgba(0, 0, 0, .12); }

.trv-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 17px 34px 17px 0;
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1.35;
    position: relative;
    min-height: 44px; /* alvo de toque mínimo */
}

.trv-faq summary::-webkit-details-marker { display: none; }

.trv-faq summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    opacity: .55;
}

.trv-faq details[open] summary::after { content: "\2013"; }

.trv-faq p { font-size: 15px; line-height: 1.6; opacity: .85; padding-bottom: 17px; margin: 0; max-width: 52em; }
.trv-faq p a { font-weight: 600; white-space: nowrap; }