/* ==========================================================================
   fix.css — overrides do site da Forza Motors.
   Carregado por ÚLTIMO no layouts/guest.php, então vence o index.css sem
   precisar editá-lo. Coloque aqui todo ajuste pontual de CSS.
   ========================================================================== */

/* ===== FAQ ===== */

/* O marcador +/– é posicionado em `absolute; right:18px`, sem espaço reservado
   no padding: perguntas longas encostavam nele (visível no mobile). */
.faq__question {
    padding-right: 44px;
}

/* Títulos das seções temáticas (/perguntas-frequentes) */
.faq__category {
    max-width: 900px;
    margin: 30px auto 12px;
    padding-bottom: 6px;
    font-size: 1.15em;
    font-weight: 600;
    color: var(--main-text-color);
    border-bottom: 2px solid var(--main-primary-color);
}

.faq__category:first-of-type {
    margin-top: 8px;
}

/* Espaço antes do "Ver todas as perguntas frequentes" (Home e Sobre) */
.faq-section .more-button {
    margin-top: 26px;
}

/* ===== Respiro DEPOIS DOS TÍTULOS =====
   `.section-heading` tem margem zero, então o título encostava no conteúdo. A
   referência é o título "Veículos" da tela de estoque, que tem 39px de branco
   até o "Filtros" — os valores abaixo foram calibrados para dar os mesmos 39px
   em cada caso (medido pixel a pixel). Escopado nestas seções para não alterar
   o resto do site. */
.section--destaques .section-heading {
    /* o card tem sombra, que "come" ~6px do branco: 45 para dar 39 */
    margin-bottom: 45px;
}

.faq-section .section-heading {
    margin-bottom: 40px;
}

/* Na /perguntas-frequentes o que vem abaixo do título é um <h3> de seção, que
   tem ascent próprio (~3px): margem menor para o branco dar os mesmos 39px.
   Vem depois da regra acima de propósito (mesma especificidade, ordem decide). */
.faq-section--agrupada .section-heading {
    margin-bottom: 36px;
}

/* No mobile a tela é curta: 40px de vão viraria buraco. */
@media only screen and (max-width: 64em) {
    .section--destaques .section-heading,
    .faq-section .section-heading,
    .faq-section--agrupada .section-heading {
        margin-bottom: 24px;
    }
}

/* ===== Respiro no fim das seções da home =====
   As `.section` só têm padding no topo (16px 0 0), então o bloco seguinte
   encostava: os destaques no FAQ, e o FAQ no "Quer vender seu veículo?". */
.section--destaques,
.faq-section {
    padding-bottom: 40px;
}

@media only screen and (max-width: 64em) {
    .section--destaques,
    .faq-section {
        padding-bottom: 24px;
    }
}