/*
 * Padrão de tipografia para o conteúdo HTML gerado pelo editor visual
 * (Quill/AdminRichEditor) do XAdmin: Produtos, Páginas (inclusive Empresa),
 * Posts, Listas, Categorias, Brindes e o texto SEO da Home.
 *
 * Carregado tanto no site (`.xb-conteudo-html`, nos wrappers de conteúdo
 * do frontend) quanto no próprio editor (`.ql-editor`, no backend), para
 * que o tamanho dos títulos que o administrador vê ao editar seja o
 * mesmo que aparece no site publicado.
 *
 * `font-size` usa !important propositalmente: sem isso, regras globais
 * de h2/h3 de outras páginas do site (ex.: o h2 responsivo da home)
 * vazam para dentro do conteúdo e fazem o mesmo texto aparecer com
 * tamanhos diferentes dependendo de onde é exibido — foi exatamente
 * esse o bug relatado. As demais propriedades (cor, margem) ficam sem
 * !important de propósito: cor fica de fora por completo (nem é
 * definida aqui), para herdar naturalmente o esquema de cada seção
 * (ex.: texto claro em fundo escuro na home) e para que o usuário
 * continue podendo personalizar a cor pelo editor; margem também fica
 * de fora para páginas específicas (ex.: a página Empresa) continuarem
 * controlando a própria margem.
 */
.xb-conteudo-html h2, .xb-conteudo-html h3, .xb-conteudo-html h4,
.xb-conteudo-html h5, .xb-conteudo-html h6,
.ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
    font-family: inherit;
}

.xb-conteudo-html h2, .ql-editor h2 { font-size: 1.75rem !important; line-height: 1.3; font-weight: 700; }
.xb-conteudo-html h3, .ql-editor h3 { font-size: 1.375rem !important; line-height: 1.35; font-weight: 700; }
.xb-conteudo-html h4, .ql-editor h4 { font-size: 1.125rem !important; line-height: 1.4; font-weight: 600; }
.xb-conteudo-html h5, .ql-editor h5 { font-size: 1rem !important; line-height: 1.45; font-weight: 600; }
.xb-conteudo-html h6, .ql-editor h6 {
    font-size: .875rem !important;
    line-height: 1.5;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

@media (max-width: 767px) {
    .xb-conteudo-html h2, .ql-editor h2 { font-size: 1.5rem !important; }
    .xb-conteudo-html h3, .ql-editor h3 { font-size: 1.25rem !important; }
}

/*
 * Classes que o Quill grava direto no HTML salvo (não como style inline)
 * para alinhamento, indentação, direção e tamanho de fonte — ex.: ao
 * centralizar um parágrafo, o Quill grava <p class="ql-align-center">,
 * não style="text-align:center". No editor (.ql-editor) isso já funciona
 * porque o quill.snow.css do CDN define essas classes; no site elas não
 * existiam, então a formatação não tinha efeito nenhum ao publicar —
 * aqui replicamos os mesmos valores usados pelo Quill.
 */
.xb-conteudo-html .ql-align-center { text-align: center; }
.xb-conteudo-html .ql-align-right { text-align: right; }
.xb-conteudo-html .ql-align-justify { text-align: justify; }
.xb-conteudo-html .ql-direction-rtl { direction: rtl; text-align: inherit; }

.xb-conteudo-html .ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; }
.xb-conteudo-html li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 4.5em; }
.xb-conteudo-html .ql-indent-2:not(.ql-direction-rtl) { padding-left: 6em; }
.xb-conteudo-html li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 7.5em; }
.xb-conteudo-html .ql-indent-3:not(.ql-direction-rtl) { padding-left: 9em; }
.xb-conteudo-html li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 10.5em; }
.xb-conteudo-html .ql-indent-4:not(.ql-direction-rtl) { padding-left: 12em; }
.xb-conteudo-html li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 13.5em; }
.xb-conteudo-html .ql-indent-5:not(.ql-direction-rtl) { padding-left: 15em; }
.xb-conteudo-html li.ql-indent-5:not(.ql-direction-rtl) { padding-left: 16.5em; }

.xb-conteudo-html .ql-size-small { font-size: .75em; }
.xb-conteudo-html .ql-size-large { font-size: 1.5em; }
.xb-conteudo-html .ql-size-huge { font-size: 2.5em; }