/* Visual do site. As cores e as fontes do cliente vêm da identidade (painel/assets/identidade/cores.css, a mesma do
   painel), que o topo carrega depois deste arquivo: o que estiver lá passa por cima dos valores abaixo. */
:root {
    --cor-texto: #222;
    --cor-fundo: #fff;
    --cor-destaque: #0d6efd;
    --cor-suave: #6c757d;
    --cor-borda: #e5e5e5;
    --fonte: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --largura: 1100px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--fonte); color: var(--cor-texto); background: var(--cor-fundo); line-height: 1.6; }
a { color: var(--cor-destaque); }
img { max-width: 100%; height: auto; }
.conteudo { max-width: var(--largura); margin: 0 auto; padding: 0 1rem; }
main.conteudo { padding-top: 2rem; padding-bottom: 3rem; min-height: 60vh; }

/* Cabeçalho e rodapé */
.topo { border-bottom: 1px solid var(--cor-borda); }
.topo .conteudo { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding-top: 1rem; padding-bottom: 1rem; flex-wrap: wrap; }
.marca { font-size: 1.4rem; font-weight: bold; color: var(--cor-texto); text-decoration: none; }
.marca img { display: block; max-height: 48px; width: auto; }
/* Os títulos usam a fonte dos títulos da identidade (--fonte-titulos); sem ela, a mesma do texto. */
h1, h2, h3, h4, .marca { font-family: var(--fonte-titulos, var(--fonte)); }
/* Menu do site: Início, as páginas do Institucional (com submenus de até 3 níveis) e o Blog. No computador, o submenu
   abre ao passar o mouse, ao chegar pelo teclado ou ao clicar na seta; no celular, o botão "Menu" mostra a lista e cada
   seta abre as filhas. A classe com-js (posta pelo site/assets/js/menu.js) só existe com JavaScript: sem ele, o celular
   mostra o menu inteiro, aberto. */
.menu-lista, .menu-lista ul { list-style: none; margin: 0; padding: 0; }
.menu-lista a { text-decoration: none; color: var(--cor-texto); }
.menu-lista a:hover { color: var(--cor-destaque); }
.seta-submenu { background: none; border: 0; padding: .25rem; margin-left: .15rem; cursor: pointer; color: var(--cor-texto);
    line-height: 1; font: inherit; }
/* a setinha é um triângulo feito com borda: não depende de fonte */
.seta-submenu::after { content: ""; display: inline-block; vertical-align: middle;
    border: .3em solid transparent; border-top-color: currentColor; border-bottom: 0; }
.botao-menu { display: none; background: none; border: 1px solid var(--cor-borda); border-radius: .25rem;
    padding: .35rem .75rem; font: inherit; color: var(--cor-texto); cursor: pointer; }

@media (min-width: 768px) {
    .menu-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; }
    .menu-lista li { position: relative; display: flex; align-items: center; }
    .submenu { display: none; position: absolute; top: 100%; left: 0; z-index: 10; min-width: 13rem; padding: .25rem 0;
        background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: .25rem;
        box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08); }
    .submenu li { justify-content: space-between; flex-wrap: wrap; }
    .submenu a { display: block; flex: 1; padding: .35rem .75rem; }
    /* o 3º nível abre dentro da caixa do 2º, logo abaixo da mãe e com recuo: ao lado, sairia da tela nos notebooks
       (o menu fica à direita do topo) */
    .submenu .submenu { position: static; flex-basis: 100%; min-width: 0; border: 0; box-shadow: none; padding: 0 0 0 .75rem; }
    .menu-lista li:hover > .submenu, .menu-lista li:focus-within > .submenu, .menu-lista li.aberto > .submenu { display: block; }
}

@media (max-width: 767.98px) {
    .menu { flex-basis: 100%; }
    .menu-lista a { display: inline-block; padding: .35rem 0; }
    .submenu { padding-left: 1.25rem; }
    /* área de toque de 44 px (2.75rem): a seta inteira é clicável, não só o triângulo */
    .seta-submenu { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; }
    .com-js .botao-menu { display: inline-block; }
    .com-js .menu-lista { display: none; margin-top: .5rem; }
    .com-js .menu.aberto .menu-lista { display: block; }
    .com-js .submenu { display: none; }
    .com-js li.aberto > .submenu { display: block; }
}
.rodape { border-top: 1px solid var(--cor-borda); color: var(--cor-suave); font-size: .9rem; }
.rodape .conteudo { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* Cartões de post (home e blog) */
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.cartao { border: 1px solid var(--cor-borda); border-radius: .5rem; overflow: hidden; display: flex; flex-direction: column; }
.cartao-capa { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cartao-texto { padding: 1rem; }
.cartao-texto h2 { font-size: 1.2rem; margin: .25rem 0 .5rem; }
.cartao-texto h2 a { color: var(--cor-texto); text-decoration: none; }
.cartao-info, .post-info { color: var(--cor-suave); font-size: .85rem; margin: 0; }

/* Post */
.post { max-width: 760px; margin: 0 auto; }
.post h1 { font-size: 2.2rem; line-height: 1.2; margin-bottom: .5rem; }
.post-capa { display: block; width: 100%; border-radius: .5rem; margin: 1.5rem 0; }
/* O editor grava width="300" height="150" no vídeo; aqui ele ocupa a largura do texto. */
.post-conteudo video { display: block; width: 100%; height: auto; }
.post-conteudo iframe { max-width: 100%; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.post-conteudo table { border-collapse: collapse; }
.post-conteudo td, .post-conteudo th { border: 1px solid var(--cor-borda); padding: .4rem .6rem; }
.post-conteudo blockquote { border-left: 4px solid var(--cor-borda); margin: 1rem 0; padding: .25rem 1rem; color: var(--cor-suave); }
.aviso-previa { background: #fff3cd; border: 1px solid #ffe69c; padding: .5rem 1rem; border-radius: .25rem; }

/* Página do Institucional: a trilha das mães em cima e as subpáginas em cartões embaixo do texto */
.trilha { color: var(--cor-suave); font-size: .9rem; margin-bottom: .5rem; }
.trilha a { color: var(--cor-suave); }
.subpaginas { margin-top: 2rem; }

/* Paginação: as mesmas classes do Bootstrap, para a links_paginacao() servir no site e no painel */
.pagination { display: flex; gap: .35rem; list-style: none; padding: 0; margin: 2rem 0 0; flex-wrap: wrap; }
.page-link { display: block; padding: .35rem .75rem; border: 1px solid var(--cor-borda); border-radius: .25rem; text-decoration: none; }
.page-item.active .page-link { background: var(--cor-destaque); border-color: var(--cor-destaque); color: #fff; }