/**
 * @package     com_technicalreports
 * @subpackage  mod_technicalreports
 * @copyright   2024 Hirlei Carlos Pereira de Araújo
 * @license     GNU General Public License versão 2 ou posterior; consulte o arquivo License. txt
 * @author      Hirlei Carlos Pereira de Araújo <prof.hirleicarlos@gmail.com>
 *
 * Base da página de Informativos: container, tipografia de seção, botões e
 * utilitários compartilhados.
 *
 * Os tokens vêm de `variaveis.css` do template (Sistema OCB). Aqui eles são apenas
 * referenciados com fallback — nenhuma paleta nova é criada e Intro/Inter não são
 * redefinidas.
 */

.mod-informes {
    /*
     * Ponte para os tokens de `variaveis.css` (Sistema OCB). Os nomes abaixo sao
     * os reais do template; o hex serve so de fallback fora dele.
     */
    --informes-navy: var(--ocb-azul-marinho, #171C66);
    --informes-azul: var(--ocb-azul-ceu, #5883D0);
    --informes-branco: var(--ocb-branco, #FFFFFF);
    --informes-texto: #3A3A3A;
    --informes-texto-suave: #6B6B6B;
    --informes-borda: #E3E5EF;
    --informes-fundo-suave: var(--color-bg-area-site, #EFEFEF);

    /*
     * Intro nao tem eixo de peso: cada peso e uma FAMILIA propria ("Intro Light",
     * "Intro Medium"...). `font-weight: 300` sobre uma familia "Intro" generica
     * nao afina nada - e preciso trocar a familia. Usado no que NAO e cabecalho
     * (a capa da newsletter); os cabecalhos ficam por conta do template.
     */
    --informes-fonte-titulo: var(--font-intro-light, "Intro Light", sans-serif);
    --informes-fonte-titulo-media: var(--font-intro-medium, "Intro Medium", sans-serif);
    --informes-fonte-titulo-bold: var(--font-intro-bold, "Intro Bold", sans-serif);
    --informes-fonte-corpo: var(--font-inter, "Inter", sans-serif);

    /* Container parametrizável: largura e alinhamento vêm dos parâmetros. */
    --informes-container-largura: 1320px;
    --informes-container-margem-esq: auto;
    --informes-container-margem-dir: auto;
    --informes-raio-card: 10px;
    --informes-raio-chip: 8px;
    --informes-raio-midia: 18px;

    --informes-gap: 24px;
    --informes-secao: 40px;

    font-family: var(--informes-fonte-corpo);
    color: var(--informes-texto);

    /*
     * A faixa de assinatura sangra para a largura total com 100vw, que inclui a
     * barra de rolagem. `clip` impede a rolagem horizontal resultante sem criar um
     * contexto de rolagem — e, ao contrário de `hidden`, não interfere no
     * bottom-sheet `position: fixed`.
     */
    overflow-x: clip;
}

.mod-informes *,
.mod-informes *::before,
.mod-informes *::after {
    box-sizing: border-box;
}

/* =========================================================
   CONTAINER
   ========================================================= */

.mod-informes .informes__container {
    width: 100%;
    max-width: var(--informes-container-largura);
    /* Alinhamento por margem: o container é bloco de largura limitada. */
    margin-left: var(--informes-container-margem-esq);
    margin-right: var(--informes-container-margem-dir);
    padding-inline: 20px;
}

.mod-informes > section {
    margin-block: var(--informes-secao);
}

.mod-informes > section:first-child {
    margin-block-start: 0;
}

/*
 * Seção com cor de fundo sangra até as bordas da janela: a faixa ocupa a largura
 * inteira enquanto o container interno segue limitado. `overflow-x: clip` no
 * wrapper evita a rolagem horizontal que 100vw provocaria por causa da barra.
 */
.mod-informes > section[data-fundo] {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    /*
     * Faixa colorida nao leva margem externa: o espaco dela e todo interno.
     * Com `margin-block` a faixa ficava separada dos vizinhos por uma tira da
     * cor do fundo da pagina - exatamente a "area com outra cor" que a faixa
     * deveria eliminar.
     */
    margin-block: 0;
    padding-block: var(--informes-faixa-padding, 50px);
}

/*
 * A margem inferior do irmao anterior tambem abre esse vao: zerar so a da
 * faixa deixaria os 40px da secao de cima no lugar. Como a faixa nao tem
 * margem, nao ha colapso que resolva - e preciso zerar dos dois lados.
 */
.mod-informes > section:has(+ section[data-fundo]) {
    margin-block-end: 0;
}

.mod-informes > section[data-fundo] + section {
    margin-block-start: 0;
}

/* =========================================================
   TIPOGRAFIA DE SEÇÃO
   ========================================================= */

/*
 * Título de seção: peso 300 e tamanho conforme o nível escolhido (h1..h6), usando
 * os tokens de tipografia do Sistema OCB. Antes o tamanho era fixo no de h2, o que
 * tornava o parâmetro de nível apenas semântico — agora ele também muda a escala.
 */
/*
 * Tipografia de titulo: MESMA escala do `custom.css` do template.
 *
 * Familias, pesos e cores saem dos tokens de `variaveis.css` - nada de fonte
 * ou paleta propria. Os tamanhos sao literais porque no template tambem sao:
 * `custom.css` escreve `font-size: 40px` direto em `h1`, sem variavel.
 *
 * Por que repetir em vez de so herdar de `h1..h6`? Porque `h2` tem
 * especificidade (0,0,1) e perde para qualquer regra do template ao redor
 * (`.sp-module h2`, o reset do Cassiopeia, etc.). Herdando, o titulo da secao
 * assume o que o entorno impuser - medido: 21,2px em negrito no lugar dos
 * 24px Intro Light. O seletor abaixo mantem o resultado previsivel.
 *
 * Se a escala do template mudar, esta e a unica lista a acompanhar.
 */
.mod-informes .informes__section-title {
    margin: 0 0 28px;
    /* `--informes-titulo-cor` vem do parametro por secao; sem ele, usa o navy. */
    color: var(--informes-titulo-cor, var(--informes-navy));
}

/*
 * Intro nao tem eixo de peso: h1/h2 sao Intro Light, h3/h4 sao Intro Medium e
 * h5/h6 nem sao Intro - sao Inter Bold. Antes tudo era 300 sobre uma familia
 * "Intro" generica, o que nao afinava nada e errava h3..h6.
 */
.mod-informes h1.informes__section-title,
.mod-informes h2.informes__section-title {
    font-family: var(--informes-fonte-titulo);
    font-weight: var(--weight-light, 300);
}

.mod-informes h3.informes__section-title,
.mod-informes h4.informes__section-title {
    font-family: var(--informes-fonte-titulo-media);
    font-weight: var(--weight-medium, 500);
}

.mod-informes h5.informes__section-title,
.mod-informes h6.informes__section-title {
    font-family: var(--informes-fonte-corpo);
    font-weight: var(--weight-bold, 700);
}

.mod-informes h1.informes__section-title {
    font-size: 40px;
    line-height: 48px;
}

.mod-informes h2.informes__section-title {
    font-size: 28px;
    line-height: 35px;
}

.mod-informes h3.informes__section-title {
    font-size: 18px;
    line-height: 23px;
}

.mod-informes h4.informes__section-title {
    font-size: 16px;
    line-height: 20px;
}

.mod-informes h5.informes__section-title {
    font-size: 14px;
    line-height: 17px;
}

.mod-informes h6.informes__section-title {
    font-size: 12px;
    line-height: 15px;
}

.mod-informes a {
    color: inherit;
}

.mod-informes a:where(:hover, :focus-visible) {
    color: var(--informes-navy);
}

/* =========================================================
   BOTÕES
   ========================================================= */

/* Altura 48px e Inter 700/14, iguais ao `.mod-casesocb__btn`. */
.mod-informes .informes__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    border: 1px solid var(--informes-navy);
    font: normal normal 700 14px/1 var(--informes-fonte-corpo);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .06s ease;
}

.mod-informes .informes__btn:active {
    transform: translateY(1px);
}

.mod-informes .informes__btn--primario {
    background: var(--informes-navy);
    color: var(--informes-branco);
}

.mod-informes .informes__btn--primario:hover {
    background: #0F1350;
    border-color: #0F1350;
}

.mod-informes .informes__btn--secundario {
    background: var(--informes-branco);
    color: var(--informes-navy);
}

.mod-informes .informes__btn--secundario:hover {
    background: var(--informes-navy);
    color: var(--informes-branco);
}

/* =========================================================
   FOCO VISÍVEL — nunca removido, apenas padronizado
   ========================================================= */

.mod-informes :focus-visible {
    outline: 2px solid var(--informes-azul);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Utilitário próprio: não depende do Bootstrap estar presente. */
.mod-informes .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mod-informes [hidden] {
    display: none !important;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 767.98px) {
    .mod-informes {
        --informes-secao: 28px;
        --informes-gap: 16px;
    }

    .mod-informes .informes__container {
        padding-inline: 16px;
    }

    .mod-informes .informes__section-title {
        margin-bottom: 20px;
    }

}

/*
 * Os titulos trocam de tamanho em 992px - o mesmo ponto do `custom.css` do
 * template - e nao em 768px como o restante do layout. Sao dois pontos de
 * quebra de proposito: o titulo segue o template, o corpo segue o grid.
 */
@media (max-width: 992px) {
    .mod-informes h1.informes__section-title {
        font-size: 32px;
        line-height: 40px;
    }

    .mod-informes h2.informes__section-title {
        font-size: 24px;
        line-height: 29px;
    }

    .mod-informes h3.informes__section-title {
        font-size: 16px;
        line-height: 20px;
    }

    .mod-informes h4.informes__section-title {
        font-size: 14px;
        line-height: 17px;
    }

    .mod-informes h5.informes__section-title {
        font-size: 12px;
        line-height: 15px;
    }

    .mod-informes h6.informes__section-title {
        font-size: 10px;
        line-height: 12px;
    }
}

/*
 * Movimento reduzido.
 *
 * Usar `transition: none` — e não o idiom `transition-duration: .01ms`, que ainda
 * CRIA uma transição. Em contextos com rAF limitado (aba em segundo plano), essa
 * transição de duração quase zero fica presa em currentTime 0 e nunca conclui,
 * congelando a propriedade no valor inicial: o bottom-sheet nunca subia.
 * Com `none` a propriedade salta direto para o valor final.
 */
@media (prefers-reduced-motion: reduce) {
    .mod-informes *,
    .mod-informes *::before,
    .mod-informes *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}