/*
Theme Name:   SECM Blocksy
Theme URI:    https://secmarilia.org.br/
Description:  Tema filho do Blocksy para o Sindicato dos Comerciarios de Marilia. Contem apenas o que e proprio do Sindicato: identidade visual, correcao do anel de foco e ajustes de leitura. Toda a regra institucional continua no plugin secm-institucional.
Author:       Sindicato dos Comerciarios de Marilia
Template:     blocksy
Version:      0.8.19
Requires PHP: 8.1
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  secm-blocksy
*/

/* =============================================================
 * 1. Identidade institucional
 *
 * Os mesmos valores do secm-blocos 0.6.1, para que a troca de tema
 * nao troque a identidade. O Blocksy tem sistema global proprio de
 * cores e tipografia; estas variaveis existem para o CSS deste
 * arquivo e para o que o Blocksy nao alcanca.
 * ============================================================= */
:root {
    --secm-marca:        #0b4f8a;
    --secm-marca-escura: #073762;
    --secm-marca-clara:  #e8f1f9;
    --secm-acento:       #b8860b;
    --secm-texto:        #111418;
    --secm-texto-suave:  #4a5259;
    --secm-fundo:        #ffffff;
    --secm-fundo-suave:  #f4f6f8;
    --secm-borda:        #d6dbe0;
    --secm-erro:         #a3232b;
    --secm-aviso:        #8a5a00;
    --secm-sucesso:      #1e6b3a;

    --secm-largura-texto: 704px;
    --secm-largura-larga: 1160px;
    --secm-raio:          8px;
}

/* =============================================================
 * 2. ANEL DE FOCO — a divida que nao atravessa para o tema novo
 *
 * O secm-blocos deixou 0 de 12 elementos do cabecalho com foco
 * visivel, medido em quatro fases seguidas. Aqui isso e corrigido
 * na origem.
 *
 * O anel e duplo de proposito: um traco claro por dentro e um halo
 * escuro por fora. Anel de uma cor so falha em algum lugar — dourado
 * sobre o azul institucional da 2,5:1, abaixo do minimo de 3:1 que a
 * WCAG 2.2 pede para indicador de foco. O par claro+escuro fica
 * visivel tanto no cabecalho escuro quanto no corpo branco, sem
 * depender de saber qual e o fundo.
 *
 * :focus-visible, e nao :focus: o anel aparece para quem navega por
 * teclado e nao atrapalha quem clica com o mouse.
 * ============================================================= */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible,
.ct-header a:focus-visible,
.ct-header button:focus-visible,
.ct-footer a:focus-visible,
#offcanvas a:focus-visible,
#offcanvas button:focus-visible,
.menu-item > a:focus-visible,
.sub-menu a:focus-visible {
    outline: 3px solid var(--secm-fundo);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--secm-marca-escura);
    border-radius: 3px;
    position: relative;
    z-index: 10;
}

/* No corpo claro o par se inverte: traco escuro por dentro, halo claro. */
.site-main :where(a, button, input, select, textarea, summary):focus-visible,
.entry-content a:focus-visible {
    outline: 3px solid var(--secm-marca-escura);
    box-shadow: 0 0 0 6px var(--secm-fundo);
}

/* Nunca remover o contorno sem por outro no lugar. */
:focus-visible { outline-style: solid; }

/* Pular para o conteudo: invisivel ate receber foco, e entao bem visivel. */
.skip-link,
.secm-pular {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999999;
    padding: 0.75rem 1.25rem;
    background: var(--secm-marca-escura);
    color: var(--secm-fundo);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--secm-raio) 0;
}
.skip-link:focus,
.secm-pular:focus {
    left: 0;
    outline: 3px solid var(--secm-fundo);
    outline-offset: -6px;
}

/* =============================================================
 * 3. Leitura
 * ============================================================= */
body {
    color: var(--secm-texto);
    -webkit-font-smoothing: antialiased;
}

.entry-content :where(p, li) {
    line-height: 1.65;
}

.entry-content a:not(.wp-block-button__link) {
    color: var(--secm-marca);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 0.08em;
}
.entry-content a:not(.wp-block-button__link):hover {
    color: var(--secm-marca-escura);
}

/* Titulos com respiro, sem virar cartaz. */
.entry-content :where(h2, h3, h4) {
    line-height: 1.25;
    margin-top: 2em;
    margin-bottom: 0.6em;
}

/* Imagem nunca estoura o container — regra que sustenta as 12 larguras. */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* Tabela larga rola dentro da propria caixa, e nao empurra a pagina. */
.entry-content :where(table, .wp-block-table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* =============================================================
 * 4. Convenios, Convencoes, Documentos e Beneficios
 *
 * O plugin secm-institucional gera a marcacao. Aqui vai so o que e
 * aparencia; nenhuma regra de negocio mora neste arquivo.
 * ============================================================= */
.secm-lista-de-cartoes {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    list-style: none;
    padding: 0;
}

.secm-lista-de-cartoes > li {
    background: var(--secm-fundo);
    border: 1px solid var(--secm-borda);
    border-radius: var(--secm-raio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.secm-lista-de-cartoes > li img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.secm-aviso {
    border-left: 4px solid var(--secm-aviso);
    background: var(--secm-fundo-suave);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--secm-raio) var(--secm-raio) 0;
}

/* =============================================================
 * 5. Cabecalho e navegacao
 *
 * O Blocksy monta o cabecalho pelo Customizer. Aqui ficam apenas
 * ajustes que o Customizer nao oferece.
 * ============================================================= */
.ct-header [data-id="menu"] .menu-item > a {
    font-weight: 500;
}

/* Submenu com alvo de toque decente no celular. */
@media (max-width: 999px) {
    #offcanvas .menu-item > a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/*
 * Botao de busca do Blocksy: medido em 15x15 na 06D, contra os 24px
 * minimos do WCAG 2.5.8. O icone continua com 15px; o que cresce e a
 * area de acerto. Corrigido por CSS no filho — nenhum arquivo do tema
 * pai e editado, para que uma atualizacao do Blocksy nao apague isto.
 */
.ct-header-search.ct-toggle {
    min-width: 26px;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*
 * O gatilho do menu no celular tinha 18px de altura — medido em todas
 * as larguras abaixo de 1024px, em todas as paginas. E o alvo mais
 * usado do site no telefone. O icone continua com 18px; o que cresce e
 * a area de acerto, ate os 44px que o polegar pede.
 */
.ct-header-trigger,
[data-id="trigger"] .ct-toggle,
[data-id="trigger"] > button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================
 * 5b. O logotipo oficial no cabecalho
 *
 * O ativo e o enquadramento B aprovado na 04D — 585x141, com
 * transparencia. As duas dimensoes sao TETO, nunca valor fixo: a regra
 * da 04E vale aqui tambem, porque altura fixa com largura limitada
 * achata o desenho. `height: auto` garante a proporcao 4,15:1 original.
 *
 * O nome do site continua no HTML, dentro do mesmo link e do mesmo
 * `itemprop="name"` — so deixa de ser visto. Ocultacao por recorte, e
 * nao `display: none`, para que leitor de tela continue lendo.
 * ============================================================= */
.secm-somente-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ct-header .site-title {
    display: block;
    line-height: 0;
}

.ct-header .site-title > a {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

/*
 * `clamp` da o dimensionamento responsivo sem media query: 168px na
 * tela mais estreita, 300px no monitor grande. Em 320px o gatilho do
 * menu ocupa 44px e sobra folga — o logotipo nao encosta nele.
 */
/*
 * O tamanho de exibicao.
 *
 * Na 06F o logotipo ia a 300px no monitor grande e a avaliacao humana
 * disse: continua pequeno. A 06G leva a faixa a 340–490px.
 *
 * A funcao e linear: `190px + 15.625vw`, que passa por (1024, 350) e
 * (1920, 490). Cada largura de projeto cai dentro da faixa pedida sem
 * uma media query para cada uma:
 *
 *   1024 -> 350   1280 -> 390   1366 -> 403
 *   1440 -> 415   1536 -> 430   1920 -> 490
 */
.secm-logo {
    display: block;
    width: clamp(470px, 245px + 20.5vw, 640px);
    height: auto;
    max-width: 100%;
}

/*
 * No telefone o problema e outro: nao adianta um logotipo de 400px numa
 * tela de 320. A meta e 220–260px, e o limite real e o espaco que sobra
 * depois do gatilho do menu, que tem 44px.
 */
@media (max-width: 1023px) {
    .secm-logo { width: clamp(228px, 64vw, 268px); }
}

/*
 * O container do cabecalho e mais largo que o do corpo.
 *
 * O Blocksy usa 1290px para tudo. Numa tela de 1920 isso deixa 315px de
 * margem de cada lado, e a marca comeca a 315px da borda — flutuando
 * numa faixa de branco. Medido: era esse o principal motivo de 490px de
 * largura ainda parecerem pouco.
 *
 * O cabecalho pode ser mais largo que o texto: linha de leitura e uma
 * coisa, faixa de identidade e outra. O corpo editorial nao muda.
 */
@media (min-width: 1400px) {
    .ct-header [data-row*="middle"] > .ct-container { max-width: 1640px; }
}

/*
 * Entre 1024 e 1400 o container do Blocksy fica em 1229px numa tela de
 * 1366 — e era isso que empurrava "Jornal Alerta" para o "Mais" que o
 * tema monta por JavaScript. A faixa do cabecalho passa a usar a tela
 * inteira menos a margem, e os seis itens cabem sem encolher fonte nem
 * marca.
 */
@media (min-width: 1024px) and (max-width: 1599px) {
    /*
     * A faixa subiu de 1399 para 1599 na 06H.
     *
     * Com "Inicio" o menu ganhou um setimo item, e em 1440 e 1536 o
     * container voltava ao padrao do Blocksy — que sobra tela nas
     * bordas e falta na navegacao. O resultado foi "Jornal Alerta"
     * recolhido para o "Mais" em 1440, 1366 e 1280.
     *
     * A margem caiu de 3rem para 2rem: continua havendo respiro nas
     * bordas, e a navegacao recebe 16px de volta.
     */
    .ct-header [data-row*="middle"] > .ct-container {
        max-width: calc(100vw - 2rem);
    }
}

/*
 * O cabecalho cresce para caber a marca, e nao o contrario.
 *
 * Com 490px de largura o logotipo tem 118px de altura — nos 120px que o
 * Blocksy usava, ele encostaria nas duas bordas. A faixa vai a 145px no
 * desktop e a 92px no celular, onde a marca de 260px tem 63px de altura.
 */
/*
 * A especificidade precisa alcancar a do Blocksy, que escreve
 * `[data-header*="type-1"] .ct-header [data-row*="middle"]` no CSS
 * inline do Customizer (0-3-0). Com um seletor mais curto o `--height`
 * nao pegava, e o cabecalho so crescia empurrado pelo conteudo: a
 * marca chegava a ocupar 83% da faixa, sem respiro nenhum.
 */
body[data-header] .ct-header [data-row*="middle"] { --height: 170px; }

@media (max-width: 999px) {
    body[data-header] .ct-header [data-row*="middle"] { --height: 92px; }
}

.ct-header [data-id="logo"] {
    padding-block: 0.75rem;
    display: flex;
    align-items: center;
}

/*
 * A marca nao cede espaco para o menu — regra da 04E, que continua
 * valendo. O que se aperta e o espacamento entre os itens do menu.
 */
.ct-header [data-id="menu"] > ul > li > a {
    padding-inline: 0.7rem;
}

/*
 * Entre 1024 e 1400 a marca ja esta grande e os seis itens ficam no
 * limite: em 1366 o Blocksy recolhia um deles para "MAIS". O que se
 * aperta e o espaco ENTRE os itens, e nao o corpo da fonte — reduzir a
 * tipografia do menu para caber e o que a especificacao proibe.
 */
@media (min-width: 1024px) and (max-width: 1399px) {
    /*
     * 0.20rem — e este valor e um COMPROMISSO, nao um otimo.
     *
     * Em 1366 o responsavel pediu duas coisas que competem pelo mesmo
     * espaco: o logo ampliado (524px de arte, 38% da tela) e os sete
     * itens do menu sem "MAIS". Sobram 678px para a navegacao, e os
     * sete rotulos ocupam 624px deles.
     *
     * O respiro entre rotulos foi bisecado com carga limpa: 0.28rem e
     * 0.32rem devolvem o "Mais", 0.20rem cabe. Sobram ~7px entre uma
     * palavra e a seguinte, contra 22px em 1920. E apertado, e esta
     * anotado como aperto — nao como escolha estetica.
     *
     * O que NAO foi feito para resolver: diminuir a fonte e diminuir a
     * marca. Os dois estao proibidos, e os dois seriam piores.
     */
    .ct-header [data-id="menu"] > ul > li > a { padding-inline: 0.2rem; }

    /*
     * Abaixo de 1400 a conta e apertada e foi MEDIDA, nao estimada: com
     * "Inicio", os sete rotulos somam 645px em 1366 e o Blocksy so
     * entregava 604px a navegacao. Faltavam 41px, e o excedente virava
     * "Mais" com o Jornal Alerta dentro.
     *
     * Os 41px saem de tres vaos, nenhum deles do logo nem da fonte:
     * a margem do container (2rem -> 1rem), o respiro entre rotulos
     * (0.28rem -> 0.18rem) e o vao entre marca e navegacao (1rem ->
     * 0.25rem).
     */
    .ct-header [data-row*="middle"] > .ct-container {
        max-width: calc(100vw - 1rem);
        column-gap: 0.25rem;
    }
}

/*
 * Entre 1400 e 1700 o setimo item tambem nao cabia com 0.7rem de cada
 * lado: sao 11px por lado, 154px so de respiro entre rotulos. A faixa
 * intermediaria fica com 0.4rem, que e o mesmo valor que a 06G ja usava
 * abaixo de 1400 sem que ninguem reclamasse de aperto.
 *
 * A fonte NAO diminui, e a marca NAO diminui. O que diminui e o vao
 * entre um rotulo e o seguinte, que era o unico excesso.
 */
@media (min-width: 1400px) and (max-width: 1700px) {
    .ct-header [data-id="menu"] > ul > li > a { padding-inline: 0.4rem; }
}

/*
 * `auto 1fr`: a marca ocupa o que precisa, a navegacao recebe o resto e
 * se alinha a direita. Sem isso o Blocksy distribui as duas colunas em
 * partes iguais e abre um vao entre elas.
 */
@media (min-width: 1024px) {
    .ct-header [data-row*="middle"] > .ct-container {
        grid-template-columns: auto 1fr;
        column-gap: 1rem;
    }
    .ct-header [data-row*="middle"] [data-column="end"] { justify-self: end; }
}

/* =============================================================
 * 6. Impressao
 * ============================================================= */
@media print {
    .ct-header, .ct-footer, .secm-pular { display: none !important; }
    body { color: #000; }
}

/* =============================================================
 * 7. Home
 *
 * A abertura da 06A (`.secm-abertura`, `.secm-atalhos__*`) saiu daqui
 * na 06D: a Home ganhou template proprio e o sistema visual dela vive
 * em `assets/css/home.css`, carregado so na Home.
 *
 * Esta folha continua sendo a do SITE — tokens, tipografia, foco,
 * cabecalho, rodape e impressao. O que e exclusivo de uma pagina nao
 * pesa nas outras.
 * ============================================================= */

/* =============================================================
 * 8. Imagem destacada da noticia
 * ============================================================= */
.secm-destaque-single {
    margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}

.secm-destaque-single img {
    width: 100%;
    border-radius: var(--secm-raio);
    display: block;
}

.secm-destaque-single__legenda {
    color: var(--secm-texto-suave);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* =============================================================
 * 9. Rodape institucional
 * ============================================================= */
.secm-rodape {
    background: var(--secm-marca-escura);
    color: #e7eef6;
    padding: clamp(2rem, 5vw, 3rem) 1.25rem;
}

.secm-rodape__grade {
    max-width: var(--secm-largura-larga);
    margin: 0 auto;
    display: grid;
    gap: clamp(1.5rem, 3.5vw, 2.5rem);
    grid-template-columns: minmax(0, 1fr);
}

/*
 * A grade era `auto-fit` com minimo de 15rem, e por isso caia para
 * TRES colunas em 1024 - a quarta descia sozinha e o rodape ficava
 * torto. Com breakpoints declarados sao quatro colunas em tela larga,
 * 2x2 no meio e uma no celular, sem nunca deixar uma coluna orfa.
 *
 * A sede leva 1.4fr porque o nome da entidade tem 49 caracteres e o
 * endereco tem duas linhas; as outras tres carregam pouco.
 */
@media (min-width: 600px) {
    .secm-rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .secm-rodape__grade { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.secm-rodape__titulo {
    font-size: 1.0625rem;
    margin: 0 0 0.6rem;
    color: #ffffff;
    line-height: 1.35;
}

/*
 * O acento e um filete de 1.5rem sob o rotulo, e nao mais um icone:
 * os icones ja estao nos ITENS, e repeti-los no titulo viraria ruido.
 * O dourado da marca aparece aqui porque e decoracao, e nao texto -
 * sobre o azul escuro ele nao precisa passar em contraste de leitura.
 */
.secm-rodape__subtitulo {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.7rem;
    color: #a9c4de;
}

.secm-rodape__subtitulo::after {
    content: "";
    display: block;
    width: 1.5rem;
    height: 2px;
    margin-block-start: 0.35rem;
    background: var(--secm-acento);
    border-radius: 2px;
}

.secm-rodape__endereco {
    font-style: normal;
    line-height: 1.6;
    font-size: 0.9375rem;
}

.secm-rodape__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9375rem;
    display: grid;
    gap: 0.55rem;
}

/*
 * Icone e conteudo lado a lado. `align-items: start` porque o
 * endereco tem duas linhas e o icone deve ficar na altura da
 * PRIMEIRA, e nao centralizado no bloco inteiro.
 */
.secm-rodape__lista li,
.secm-rodape__linha {
    display: flex;
    align-items: start;
    gap: 0.6rem;
}

.secm-rodape__linha { margin-block-start: 0.15rem; }

/*
 * O icone e decorativo e nao tem contraste de texto a cumprir, mas
 * fica em #a9c4de - o mesmo tom dos rotulos - para nao brigar com o
 * branco dos links.
 */
.secm-rodape__icone {
    flex: none;
    display: inline-flex;
    color: #a9c4de;
    margin-block-start: 0.1rem;
}

.secm-rodape__icone .secm-icone { width: 1.15rem; height: 1.15rem; }

/*
 * `inline-block` com altura minima porque, medido por Tab real na 06D,
 * o telefone, o e-mail e o Instagram do rodape saiam com 21px de altura
 * — abaixo dos 24px do WCAG 2.5.8. Sao justamente os tres links que
 * alguem tenta acertar com o polegar.
 */
.secm-rodape a {
    display: inline-block;
    min-height: 24px;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid rgb(255 255 255 / 35%);
    transition: border-bottom-color .15s ease, opacity .15s ease;
}

/*
 * O sublinhado ja existe em repouso e apenas ACENDE no hover. Link
 * que so ganha sublinhado ao passar o mouse deixa de ser reconhecivel
 * como link para quem nao usa mouse - e a cor sozinha nao pode ser o
 * unico sinal de que algo e clicavel.
 */
.secm-rodape a:hover {
    border-bottom-color: #ffffff;
    opacity: .92;
}

/*
 * Pastilhas de filiacao.
 *
 * Borda translucida e fundo quase imperceptivel: elas identificam,
 * nao convidam a clicar. Nao ha `cursor: pointer` nem hover, porque
 * nao ha link - o projeto nao tem URL cadastrada para nenhuma das
 * tres, e pastilha que parece botao e nao leva a lugar nenhum e uma
 * promessa falsa.
 */
.secm-rodape__chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.secm-rodape__chip {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: #e7eef6;
    background: rgb(255 255 255 / 7%);
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
}

/* No rodape escuro o anel de foco inverte, para continuar visivel. */
.secm-rodape a:focus-visible {
    outline: 3px solid #ffffff;
    box-shadow: 0 0 0 6px var(--secm-marca-escura);
}