/*
Theme Name: Bora Rolê
Theme URI: https://borarole.app.br
Description: Tema do portal nacional de eventos. Lista, filtra e exibe os eventos
             publicados pela fabrica local.
Author: Bora Rolê
Author URI: https://borarole.app.br
Version: 0.1.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bora-role
Requires PHP: 8.1
*/

/*
 * Fonte servida por nos, nao pelo CDN do Google (spec §2.7): puxar de la faria
 * cada visitante bater num terceiro em toda pagina, e isso e dado de navegacao
 * que a LGPD nos obriga a justificar.
 * font-display: swap — o texto aparece na fonte do sistema enquanto a Dosis
 * carrega, em vez de a pagina ficar em branco.
 */
@font-face {
    font-family: 'Dosis';
    src: url('assets/fontes/dosis-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Dosis';
    src: url('assets/fontes/dosis-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Dosis';
    src: url('assets/fontes/dosis-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/* Reset minimo. Sem normalize externo: e mais CSS do que este tema usa. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

/*
 * O !important aqui NAO e preguica: e a unica forma de o atributo ganhar.
 * "[hidden] { display: none }" e regra da folha do agente do usuario, e regra
 * de autor vence folha do agente sempre — entao .br-compartilhar__botao, que
 * declara inline-flex, revelava sozinho os dois botoes que o servidor manda
 * com hidden. Sem JavaScript (ou em qualquer navegador sem navigator.share)
 * eles apareciam visiveis, focaveis e sem fazer nada ao clique. Nao da para
 * resolver so por especificidade: qualquer classe futura que declare display
 * voltaria a vencer, porque atributo e classe pesam igual.
 */
[hidden] { display: none !important; }

/*
 * Ocultacao visual: some da tela, permanece na arvore de acessibilidade.
 * display:none e visibility:hidden retiram o elemento da arvore junto com o
 * pixel, e e exatamente isso que nao se quer aqui — o texto e o unico nome que
 * esses botoes tem, e a unica data que o card fala. clip-path com 1px de caixa
 * e o padrao que preserva o no sem reservar espaco.
 */
.br-oculto-visual,
.br-card .br-compartilhar__rotulo,
.br-card .br-compartilhar__texto {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

body {
    background: var(--wp--preset--color--bg-main);
    color: var(--wp--preset--color--text-main);
    font-family: var(--wp--preset--font-family--body);
    font-size: 16px;
    line-height: 1.6;
}

a { color: var(--wp--preset--color--accent); }

/* O container centraliza tudo. Mesmo papel do .container do quizyflow-lp. */
.br-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.br-rodape {
    border-top: 1px solid var(--wp--preset--color--border);
    margin-top: 64px;
    padding: 32px 0;
}

/*
 * Paginas institucionais. max-width menor que o container das listagens: texto
 * corrido em linha larga demais faz o olho perder a linha seguinte.
 */
.br-pagina {
    max-width: 720px;
    padding-bottom: 32px;
    padding-top: 32px;
}

.br-pagina__titulo {
    font-size: 2rem;
    margin: 0 0 24px;
}

.br-pagina__conteudo h2 {
    font-size: 1.25rem;
    margin: 32px 0 8px;
}

.br-pagina__conteudo p {
    line-height: 1.65;
    margin: 0 0 16px;
}

.br-pagina__conteudo a {
    color: var(--wp--preset--color--accent);
}

/*
 * Tres colunas numa linha: a marca ocupa a primeira e os links as outras duas.
 * A primeira e mais larga porque carrega uma frase, nao dois rotulos curtos.
 */
.br-rodape__grade {
    align-items: start;
    display: grid;
    gap: 24px 32px;
    grid-template-columns: 2fr 1fr 1fr;
}

/*
 * O <nav> ocupa as colunas 2 e 3 e repete a grade por dentro, entao cada
 * coluna de links cai exatamente sobre uma coluna da grade de fora — alinhado
 * sem numero magico e sem depender da largura do texto ao lado.
 */
.br-rodape__nav {
    display: grid;
    gap: 32px;
    grid-column: 2 / -1;
    grid-template-columns: 1fr 1fr;
}

.br-rodape__coluna {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/*
 * min-height de 24px e o alvo minimo do WCAG 2.5.8. Medido, a linha de texto
 * dava 22: passava pela excecao de espacamento, mas depender de excecao para
 * cumprir criterio e fragil — basta alguem apertar o gap depois.
 */
.br-rodape__link {
    align-items: center;
    color: var(--wp--preset--color--text-muted);
    display: inline-flex;
    font-size: 0.875rem;
    min-height: 24px;
    text-decoration: none;
    width: fit-content;
}

.br-rodape__link:hover,
.br-rodape__link:focus-visible {
    color: var(--wp--preset--color--accent);
    text-decoration: underline;
}

/*
 * Tres colunas em 360px dariam rotulo quebrado no meio da palavra. Empilha, e
 * a marca vai para o fim: quem rola ate o rodape no celular esta procurando
 * link, nao aviso de direito autoral.
 */
@media (max-width: 640px) {
    .br-rodape__grade {
        grid-template-columns: 1fr;
    }

    .br-rodape__nav {
        grid-column: 1;
        order: -1;
    }
}

.br-rodape__texto {
    color: var(--wp--preset--color--text-muted);
    font-size: 0.875rem;
    margin: 0;
}

/*
 * A imagem e ornamento, entao vive no CSS e nao no HTML: nao ha o que descrever
 * para leitor de tela, e um <img> aqui pediria alt vazio de qualquer forma.
 *
 * O veu nao e estetica, e requisito medido. Sem ele, texto branco sobre o meio
 * da imagem da 1,39:1 — o palco e as chamas sao clarissimos.
 *
 * 0,78, e nao 0,75 como antes: com background-attachment: fixed o recorte
 * visivel deixou de ser a imagem inteira e passou a ser o que cabe na janela, e
 * nesse recorte o apoio do hero caia a 4,45:1. Os numeros abaixo sao do PIXEL
 * pior de cada caixa de texto, lidos da pagina renderizada de verdade (nao a
 * media, nao a imagem solta):
 *
 *   titulo (texto grande, AA pede 3:1) .... 8,19:1
 *   apoio do hero .......................... 4,96:1
 *   numero da contagem ..................... 5,90:1
 *   rotulo do filtro, sobre o painel ....... 5,73:1
 *   texto do select ........................ 9,62:1
 *   chip inativo ........................... 9,42:1
 *
 * Baixar este alfa, clarear o painel de filtros ou trocar a imagem reprova a
 * pagina — os tres entram na mesma conta.
 *
 * A cor do veu e #191919, o fundo do tema, e nao preto puro: assim a base do
 * hero emenda na pagina sem costura visivel.
 */
.br-hero {
    background:
        linear-gradient(rgba(25, 25, 25, 0.78), rgba(25, 25, 25, 0.78)),
        url("assets/img/hero.webp") center / cover no-repeat,
        var(--wp--preset--color--bg-main);
    /* Fixo: a imagem fica parada enquanto o hero rola por cima dela. Com fixed a
       area de posicionamento passa a ser a JANELA, nao o elemento — entao o
       recorte visivel muda, e por isso o contraste foi remedido depois desta
       linha, nao antes. */
    background-attachment: fixed, fixed, scroll;
    border-bottom: 1px solid var(--wp--preset--color--border);
    /* O padrao de baixo e maior que o de cima porque o painel de filtros sobe
       para cavalgar esta borda: sem folga, ele cobriria os chips. */
    padding: 64px 0 104px;
    text-align: center;
}

/*
 * O logo carrega o lockup completo, com a tarja miuda de categorias, entao ele
 * precisa de tamanho para ser lido — 260px espremiam a tarja de volta ao borrao
 * que motivou tira-lo do cabecalho. 400px e a largura em que ela se le, e o
 * sobretitulo saiu justamente porque o logo ja diz "portal de eventos".
 */
.br-hero__logo {
    display: block;
    height: auto;
    margin: 0 auto 20px;
    max-width: 400px;
    width: 100%;
}

.br-hero__titulo {
    font-family: var(--wp--preset--font-family--heading);
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 12px;
}

/* Acento, e nao text-muted: o cinza secundario dava 3,41:1 sobre a imagem do
   hero mesmo com o veu de 0,75 — abaixo dos 4,5:1 de AA. O acento da 4,80:1. */
.br-hero__apoio { color: var(--wp--preset--color--accent); margin: 0; }

.br-hero__contagem {
    align-items: center;
    color: var(--wp--preset--color--text-main);
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    margin: 20px 0 0;
}

.br-hero__contagem strong { color: var(--wp--preset--color--accent); }

.br-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 24px;
}

.br-chip {
    align-items: center;
    /* Fundo proprio, e nao transparente: o chip fica sobre a foto, e um pilulo
       translucido herdaria o contraste imprevisivel da imagem embaixo. */
    background: rgba(25, 25, 25, 0.72);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 999px;
    color: var(--wp--preset--color--text-main);
    display: inline-flex;
    gap: 6px;
    padding: 8px 16px;
    text-decoration: none;
}

.br-chip:hover { border-color: var(--wp--preset--color--accent); }

.br-chip--ativo {
    background: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--accent-ink);
    font-weight: 600;
}

.br-icone { flex: none; vertical-align: -0.15em; }

.br-contagem { color: var(--wp--preset--color--text-muted); margin: 32px 0 16px; }

/* So o numero recebe o acento: e ele que responde "quantos", e o resto da frase
   e moldura. Mesmo tratamento da contagem do hero, para as duas nao divergirem. */
.br-contagem strong { color: var(--wp--preset--color--accent); font-size: 1.125rem; }

/* O arquivo de taxonomia nao tem hero, entao o topo da pagina e o proprio <h1>:
   sem este respiro ele encosta na borda de cima da janela. */
.br-arquivo { padding-top: 32px; }
.br-arquivo__titulo { font-size: 2rem; line-height: 1.15; margin: 0; }
.br-arquivo .br-contagem { margin-top: 8px; }

/*
 * 720px pelo mesmo motivo de .br-pagina, e nao os 1200px do container das
 * listagens: texto corrido em linha larga demais faz o olho perder a linha
 * seguinte. A lista abaixo continua na largura cheia — sao coisas diferentes.
 */
.br-arquivo__texto {
    max-width: 720px;
    margin: 0 0 32px;
}

.br-arquivo__texto p { margin: 0 0 16px; }
.br-arquivo__texto p:last-child { margin-bottom: 0; }

.br-lista { display: grid; gap: 16px; }

.br-card {
    align-items: center;
    background: var(--wp--preset--color--bg-surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 4px;
    display: grid;
    gap: 16px;
    /* 168px, e nao 140: a imagem do card foi para 168px, mas a coluna ficou em
       140 e o reset "img { max-width: 100% }" a trazia de volta — o card
       renderizava 140x132, com MAIS recorte horizontal do que antes, nao menos. */
    grid-template-columns: 168px 72px 1fr auto;
    overflow: hidden;
}

.br-card__imagem img { height: 132px; object-fit: cover; width: 168px; }

.br-card__data {
    border-right: 1px solid var(--wp--preset--color--border);
    padding-right: 16px;
    text-align: center;
}

/* Dia e mes no acento: a data e o primeiro filtro que o olho aplica ao varrer a
   lista, e em cinza ela competia de igual para igual com o venue e a hora. */
.br-card__dia {
    color: var(--wp--preset--color--accent);
    display: block;
    font-family: var(--wp--preset--font-family--heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.br-card__mes {
    color: var(--wp--preset--color--accent);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.br-card__corpo { padding: 12px 0; min-width: 0; }

.br-card__titulo { font-size: 1.125rem; margin: 0 0 4px; }
.br-card__titulo a { color: var(--wp--preset--color--text-main); text-decoration: none; }
.br-card__titulo a:hover { color: var(--wp--preset--color--accent); }

.br-card__meta {
    align-items: center;
    color: var(--wp--preset--color--text-muted);
    display: flex;
    gap: 6px;
    margin: 0 0 4px;
}

.br-card__pilula {
    border-radius: 999px;
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: 6px 0 0;
    padding: 4px 10px;
    text-transform: uppercase;
}

.br-card__acao { padding-right: 16px; }

.br-botao {
    /* inline-flex, e nao inline-block: o botao passou a levar icone ao lado do
       texto, e so o flex alinha os dois pela linha de base visual e aplica o gap. */
    align-items: center;
    background: var(--wp--preset--color--accent);
    border-radius: 3px;
    /* Par do acento, nao branco fixo: trocar a paleta em theme.json tem que bastar
       (spec §2.8), e um acento claro exigiria texto escuro aqui. */
    color: var(--wp--preset--color--accent-ink);
    display: inline-flex;
    font-weight: 600;
    gap: 6px;
    justify-content: center;
    padding: 10px 18px;
    text-decoration: none;
    white-space: nowrap;
}

.br-botao:hover { filter: brightness(1.12); }

/*
 * O painel cavalga a fronteira entre o hero e o corpo: parte dele fica sobre a
 * imagem, parte sobre o fundo da pagina. A margem negativa e o que puxa; o
 * z-index e o que garante que ele fique por cima, e nao por baixo, da imagem.
 *
 * A sombra nao e enfeite: e ela que separa o painel da foto atras. Sem ela, um
 * retangulo escuro sobre imagem escura perde a borda e vira mancha.
 */
.br-filtros {
    align-items: end;
    /* Translucido, e nao opaco: deixa a foto atravessar de leve e amarra o painel
       ao hero em vez de o cobrir. O blur existe para o texto nao disputar com o
       detalhe da foto atras dele. O alfa nao e escolha solta — e o maior valor de
       transparencia em que os rotulos ainda passam AA sobre a imagem: medido no
       pixel pior da caixa do rotulo, 5,73:1. Ver a tabela no comentario do
       .br-hero, que e a mesma conta. */
    backdrop-filter: blur(12px);
    background: rgba(43, 43, 43, 0.88);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 12px;
    /* Sutil de proposito: a sombra so precisa descolar o painel da foto. Mais que
       isto e ela que vira o elemento, no lugar do que esta dentro dela. */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, 1fr) auto;
    margin-top: -60px;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.br-filtros__campo { display: block; min-width: 0; }

.br-filtros__rotulo {
    color: var(--wp--preset--color--text-muted);
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.br-filtros select {
    background: var(--wp--preset--color--bg-main);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 3px;
    color: var(--wp--preset--color--text-main);
    font: inherit;
    padding: 8px;
    width: 100%;
}

.br-filtros__enviar { border: 0; cursor: pointer; font: inherit; font-weight: 600; }

/* Os dois botoes dividem UMA celula da grade: sem isto o "Limpar" viraria um
   setimo item e quebraria a linha, e a barra mudaria de altura conforme houvesse
   filtro ativo ou nao. */
.br-filtros__acoes { display: flex; gap: 8px; }

/* Secundario de proposito: "Filtrar" e a acao que a pessoa veio fazer. */
.br-botao--fantasma {
    background: none;
    border: 1px solid var(--wp--preset--color--border);
    color: var(--wp--preset--color--text-muted);
}

.br-botao--fantasma:hover {
    border-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--accent);
}

.br-vazio {
    border: 1px dashed var(--wp--preset--color--border);
    border-radius: 4px;
    margin: 32px 0;
    padding: 48px 16px;
    text-align: center;
}

.br-vazio__titulo { font-size: 1.25rem; margin: 0 0 8px; }
.br-vazio__apoio { color: var(--wp--preset--color--text-muted); margin: 0 0 20px; }

.br-paginacao { display: flex; gap: 8px; justify-content: center; margin: 32px 0; }

.br-paginacao .page-numbers {
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 3px;
    color: var(--wp--preset--color--text-main);
    padding: 8px 14px;
    text-decoration: none;
}

.br-paginacao .page-numbers.current {
    background: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
    /* Sem isto herdaria text-main, que sobre o acento claro fica ilegivel. */
    color: var(--wp--preset--color--accent-ink);
}

/*
 * O cabecalho saiu, e com ele o unico link de volta a home que a pagina do
 * evento tinha. Sem isto o evento vira beco sem saida: quem chega por busca ou
 * por link compartilhado nao tem como descobrir que existe uma listagem.
 */
/*
 * .br-voltar, e nao .br-evento__voltar: tres telas usam este link — evento,
 * arquivo de taxonomia e pagina institucional. O nome antigo dizia pertencer ao
 * bloco do evento, e ja mentia quando o taxonomy.php passou a usa-lo.
 */
.br-voltar {
    align-items: center;
    color: var(--wp--preset--color--text-muted);
    display: inline-flex;
    gap: 6px;
    margin-bottom: 20px;
    text-decoration: none;
}

.br-voltar:hover { color: var(--wp--preset--color--accent); }
.br-voltar .br-icone { transform: rotate(180deg); }

.br-evento { padding: 32px 0; }
.br-evento__titulo { font-size: 2rem; line-height: 1.15; margin: 0 0 8px; }

.br-evento__tags {
    color: var(--wp--preset--color--accent);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    margin: 0 0 20px;
    text-transform: uppercase;
}

/* Herda a cor da linha, e nao o azul de link: sao rotulos que tambem levam a
   algum lugar, nao uma lista de links. O sublinhado no hover e o que avisa. */
.br-evento__tags a { color: inherit; text-decoration: none; }
.br-evento__tags a:hover { text-decoration: underline; }

.br-evento__imagem {
    border-radius: 4px;
    /* 340, e nao 420: dentro da coluna a imagem e mais estreita, e a altura antiga
       deixava um retangulo alto demais antes do resumo. */
    max-height: 340px;
    margin-bottom: 24px;
    object-fit: cover;
    width: 100%;
}

.br-evento__grade { display: grid; gap: 32px; grid-template-columns: 2fr 1fr; }
.br-evento__subtitulo { font-size: 1.25rem; margin: 32px 0 12px; }

.br-ficha {
    background: var(--wp--preset--color--bg-surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 4px;
    margin: 0 0 16px;
    padding: 16px;
}

.br-ficha dt {
    color: var(--wp--preset--color--text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    margin-top: 12px;
    text-transform: uppercase;
}

.br-ficha dt:first-child { margin-top: 0; }
.br-ficha dd { margin: 4px 0 0; }
.br-ficha__fraco { color: var(--wp--preset--color--text-muted); font-size: 0.875rem; }

.br-botao--largo { display: block; text-align: center; }

.br-evento__fonte {
    color: var(--wp--preset--color--text-muted);
    font-size: 0.8125rem;
    margin-top: 16px;
}

.br-compartilhar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.br-compartilhar__rotulo {
    color: var(--wp--preset--color--text-muted);
    font-size: 0.75rem;
}

.br-compartilhar__botao {
    align-items: center;
    background: none;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 999px;
    color: var(--wp--preset--color--text-muted);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 0.75rem;
    gap: 6px;
    padding: 6px 12px;
    text-decoration: none;
}

.br-compartilhar__botao:hover {
    border-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--accent);
}

/*
 * No card o espaco e curto: so o icone aparece. Mas o texto vai para a regra de
 * ocultacao visual la em cima, e nao para display:none — o icone e
 * aria-hidden, entao com o texto fora da arvore o botao ficava sem nome nenhum
 * ({"role":"button","name":""}). Ocultar so o pixel resolve sem duplicar a
 * string num aria-label, que sairia da traducao junto e envelheceria sozinho.
 */
.br-card .br-compartilhar__botao { padding: 6px 10px; }

/* Tablet: o card perde a coluna da imagem, que vira faixa no topo. */
@media (max-width: 900px) {
    .br-filtros { grid-template-columns: repeat(2, 1fr); }
    .br-filtros__acoes { grid-column: 1 / -1; }
    .br-evento__grade { grid-template-columns: 1fr; }
    .br-hero { padding: 40px 0 80px; }
    .br-filtros { margin-top: -48px; }
    /* Sem este degrau o titulo fica nos 4,5rem inteiros ate 620px: nao
       estoura o container (quebra em duas linhas), mas e grande demais
       para tablet — perto de 72px numa tela de 768px de largura. */
    .br-hero__titulo { font-size: 3rem; }
}

/* Celular: card em uma coluna, data ao lado do titulo. Logo encolhe junto,
   senao domina a primeira dobra numa tela de 360px. */
@media (max-width: 620px) {
    .br-card { grid-template-columns: 72px 1fr; }
    .br-card__imagem { grid-column: 1 / -1; }
    .br-card__imagem img { height: 180px; width: 100%; }
    .br-card__acao { grid-column: 1 / -1; padding: 0 16px 16px; }
    .br-botao { display: block; text-align: center; }
    .br-filtros__acoes > * { flex: 1; }
    /* background-attachment: fixed e ignorado no iOS e causa repaint caro no
       Android. No celular a imagem volta a rolar junto — o efeito se perde,
       a pagina nao. */
    .br-hero { background-attachment: scroll, scroll, scroll; }
    .br-filtros { margin-top: -36px; }
    .br-hero__logo { max-width: 180px; margin-bottom: 16px; }
    .br-hero__titulo { font-size: 2rem; }
    .br-filtros { grid-template-columns: 1fr; }

    /* Os chips passam a rolar na horizontal em vez de virar cinco linhas:
       empilhados, eles sozinhos ocupariam a primeira dobra inteira. */
    .br-chips {
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin-inline: -16px;
        overflow-x: auto;
        padding-inline: 16px;
        scrollbar-width: none;
    }
    .br-chip { flex: none; }
    .br-compartilhar { margin-top: 12px; }
}