/*
 * CSS Personalizado para Revista Educação Matemática em Revista - Rio Grande do Sul (EMR-RS)
 * OJS 3.4.0.8
 *
 * Objetivo: Ajustar layout, cores e adicionar funcionalidades visuais.
 * Versão: 2025-07-24 (Última atualização com base nas discussões)
 */

/* ------------------------------------------- */
/* **IMPORTANTE:** Carrega o Font Awesome 5 (Free) do CDN - Necessário para os ícones */
/* ------------------------------------------- */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");


/* ------------------------------------------- */
/* 1. PALETA DE CORES DEFINIDA COM VARIÁVEIS   */
/* Isso facilita a alteração das cores globalmente */
/* ------------------------------------------- */
:root {
    --emr-green: #4CAF50;     /* Verde vibrante da logo (um tom de verde RS) */
    --emr-red: #F44336;       /* Vermelho vibrante da logo (um tom de vermelho RS) */
    --emr-yellow: #FFEB3B;    /* Amarelo vibrante da logo (um tom de amarelo RS) */

    --emr-dark-text: #212121; /* Quase preto, para títulos e textos importantes */
    --emr-gray-text: #424242; /* Cinza escuro, para texto de corpo e a maioria dos links */
    --emr-light-gray-bg: #F5F5F5; /* Cinza bem claro, para fundos de seções ou do 'fora' da página */
    --emr-border-color: #EEEEEE; /* Cinza claro, para bordas e divisores sutis */
    --emr-accent-blue: #1A237E; /* Azul marinho profundo, como cor de contraste/destaque secundária */
    --emr-hover-blue: #0D47A1; /* Um tom mais escuro do azul para estados de hover */

    /* NOVAS CORES BASEADAS NOS SEUS PRINTS */
    --external-bg-color: #7B8B9B; /* Cor do fundo externo (do primeiro print) */
    --menu-bg-color: #3E444D;    /* Cor de fundo do menu principal (do segundo print) */
}

/* ------------------------------------------- */
/* 2. AJUSTE DE LAYOUT - EFEITO "VOANDO" E CENTRALIZAÇÃO */
/* ------------------------------------------- */

/* Define a largura máxima do conteúdo principal, centraliza e adiciona sombra */
.pkp_structure_page {
    max-width: 1200px; /* **Ajuste este valor conforme a largura desejada (ex: 1000px, 1100px, 1300px)** */
    margin-left: auto;
    margin-right: auto;
    /* Sombra mais pronunciada para o efeito "flutuante" */
    box-shadow: 0 12px 24px 8px rgba(0, 0, 0, 0.3); /* Sombra ajustada para ser mais visível */
    background-color: #FFFFFF; /* Fundo branco para a área de conteúdo */
}

/* Garante que o cabeçalho e rodapé também sigam a mesma largura e centralização */
/* O cabeçalho terá seu próprio background-color definido abaixo */
.pkp_head_wrapper,
.pkp_structure_footer_wrapper {
    max-width: 1200px; /* Mesma largura do .pkp_structure_page */
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF; /* Fundo branco para rodapé, o cabeçalho será definido abaixo */
}

/* Define a cor de fundo para a área "fora" da página centralizada */
body {
    background-color: var(--external-bg-color); /* Cor do primeiro print */
}


/* ------------------------------------------- */
/* 3. AJUSTES DO CABEÇALHO (HEADER)             */
/* ------------------------------------------- */

.pkp_head_wrapper {
    background-color: #B6C7DE; /* Cor de fundo do cabeçalho atualizada conforme sua solicitação */
    padding: 15px 0; /* Espaçamento interno superior/inferior para o cabeçalho */
    /* A cor de fundo já está definida em .pkp_structure_page para ser branca, mas pode ser sobrescrita aqui */
}

/* Ajuste do contêiner do nome do site/logo para melhor posicionamento */
.pkp_site_name_wrapper {
    position: relative;
    padding-top: 0; /* Remove qualquer padding superior padrão que possa estar empurrando */
}

/* Estilo para a imagem da logo */
.pkp_site_name.is_img img {
    max-height: 104px; /* Altura máxima da logo aumentada em 30% (80px * 1.3 = 104px) */
    max-width: 100%; /* Adicionado para garantir responsividade da largura */
    width: auto;
    display: block; /* Garante que a imagem se comporte como um bloco */
    margin: 0 auto; /* Centraliza a logo horizontalmente */
    padding-top: 5px; /* Pequeno padding acima da logo */
    padding-bottom: 5px; /* Pequeno padding abaixo da logo */
}

/* Cor do nome da revista (se for texto e não apenas imagem) */
.pkp_site_name h1,
.pkp_site_name h1 a {
    color: var(--emr-dark-text); /* Texto quase preto para contraste em fundo branco */
}

/* --- Menu de Navegação Principal (Horizontal) --- */
.pkp_navigation_primary_row {
    background-color: var(--menu-bg-color); /* Cor de fundo do segundo print para o menu principal */
}

/* Cor dos itens do menu de navegação principal */
.pkp_navigation_primary_row .pkp_navigation_primary > li > a {
    color: #FFFFFF; /* Texto branco para os itens do menu no fundo escuro */
    font-weight: 500; /* Um pouco mais de peso na fonte */
    padding: 10px 15px; /* Aumenta a área clicável dos itens do menu */
    border-radius: 5px; /* Bordas levemente arredondadas nos itens do menu */
}

/* Estilo ao passar o mouse (hover) sobre os itens do menu principal */
.pkp_navigation_primary_row .pkp_navigation_primary > li > a:hover {
    color: var(--emr-yellow); /* Amarelo da logo para destaque no hover */
    background-color: rgba(255, 255, 255, 0.1); /* Um branco translúcido sutil no hover */
    text-decoration: none; /* Remove sublinhado padrão se houver */
}

/* Estilo do item do menu que está ativo/selecionado */
.pkp_navigation_primary_row .pkp_navigation_primary > li.current > a,
.pkp_navigation_primary_row .pkp_navigation_primary > li.current > a:hover {
    color: var(--emr-yellow); /* Amarelo da logo para o item ativo */
    font-weight: bold; /* Deixa em negrito para reforçar o destaque */
    background-color: rgba(255, 255, 255, 0.2); /* Um branco translúcido mais forte para o item ativo */
}

/* Cor dos ícones e texto do botão "Buscar" no cabeçalho (dentro do menu principal) */
.pkp_navigation_search_wrapper .pkp_search {
    color: #FFFFFF;
}

.pkp_navigation_search_wrapper .pkp_search:hover {
    color: var(--emr-yellow);
}

/* Cor dos links de Usuário (Cadastro/Acesso/Perfil/Sair) no canto superior direito */
/* Estes links estão fora da área do menu principal colorido, então manteremos o cinza para eles */
.pkp_navigation_user_wrapper .pkp_navigation_user a {
    color: var(--emr-gray-text); /* Cinza para links de usuário */
}

.pkp_navigation_user_wrapper .pkp_navigation_user a:hover {
    color: var(--emr-accent-blue);
}

/* Cor e estilo para o botão de menu responsivo (ícone hambúrguer) */
.pkp_site_name_wrapper .pkp_site_nav_toggle {
    color: var(--emr-gray-text); /* Cor do ícone */
    background-color: transparent;
    border: 1px solid var(--emr-border-color);
}

.pkp_site_name_wrapper .pkp_site_nav_toggle:hover {
    color: var(--emr-accent-blue);
    border-color: var(--emr-accent-blue);
}


/* ------------------------------------------- */
/* 4. AJUSTES PARA O CONTEÚDO PRINCIPAL        */
/* ------------------------------------------- */

/* Estilo padrão do box de cada artigo na listagem (ex: Edição Atual) */
.obj_article_summary {
    border: 1px solid var(--emr-border-color); /* Borda sutil para separar */
    border-radius: 5px; /* Bordas arredondadas */
    padding: 15px; /* Espaçamento interno */
    margin-bottom: 20px; /* Espaçamento entre os artigos */
    transition: all 0.3s ease-in-out; /* Transição suave para o efeito de hover */
    background-color: #FFFFFF; /* Fundo branco para cada box de artigo */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sombra muito sutil no estado normal */
}

/* Efeito ao passar o mouse (hover) sobre os artigos */
.obj_article_summary:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada ao passar o mouse */
    transform: translateY(-5px); /* Move o box ligeiramente para cima */
    border-color: var(--emr-accent-blue); /* Muda a cor da borda para destacar */
}

/* Ajuste para a imagem da capa do artigo dentro do summary, se houver */
.obj_article_summary .cover {
    border-radius: 3px; /* Bordas levemente arredondadas para a capa */
    overflow: hidden; /* Garante que a imagem se ajuste ao raio */
}

/* Justificar texto nos resumos dos artigos */
.obj_article_summary .summary {
    text-align: justify !important; /* Adicionado !important para forçar a justificação */
}

/* Nova regra para justificar o resumo na página de detalhes do artigo */
.obj_article_details .abstract {
    text-align: justify !important;
    font: tahoma, geneva, sans-serif; /* Adicionado o estilo de fonte do vídeo */
}

/* Linhas coloridas sob os títulos de seção (ex: "Edição Atual", "ARTIGOS") */
.pkp_structure_page h2 { /* Aplica-se a h2 dentro do conteúdo principal da página */
    position: relative; /* Necessário para posicionar a linha com absolute */
    padding-bottom: 10px; /* Espaço para a linha abaixo do texto do título */
    margin-bottom: 20px; /* Espaço entre o título e o conteúdo abaixo */
}

.pkp_structure_page h2::after {
    content: ''; /* Conteúdo vazio para o pseudo-elemento */
    display: block; /* Para que a linha ocupe seu próprio espaço */
    width: 80px; /* Largura da linha, ajuste conforme preferir */
    height: 4px; /* Espessura da linha */
    background: linear-gradient(to right, var(--emr-green), var(--emr-red), var(--emr-yellow)); /* Gradiente com as cores da bandeira do RS */
    position: absolute; /* Posiciona a linha em relação ao h2 pai */
    bottom: 0; /* Alinha a linha na parte inferior do padding do h2 */
    left: 0; /* Alinha à esquerda */
}


/* Ícones para visualizações e downloads de PDF */
.viewsartigo:before {
    content: "\f06e"; /* Ícone de olho (Font Awesome fa-eye) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
    color: var(--emr-gray-text);
}

.viewspdf:before {
    content: "\f1c6"; /* Ícone de PDF (Font Awesome fa-file-pdf) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
    color: var(--emr-red); /* Cor vermelha para o ícone de PDF */
}

/* Destaque para as seções de "Chamada de Artigos" e "Notícias" na homepage */
.pkp_page_index .call_for_submissions,
.pkp_page_index .cmp_announcements {
    background-color: var(--emr-light-gray-bg);
    border: 1px solid var(--emr-border-color);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

/* Ajustes para o texto de descrição da revista na homepage ("Sobre a Revista") */
.homepage_about p {
    color: var(--emr-gray-text);
    line-height: 1.6;
    margin-bottom: 1em;
}

/* Cor dos links gerais (que não são menu, etc.) */
a {
    color: var(--emr-accent-blue);
}

a:hover,
a:focus {
    color: var(--emr-hover-blue);
}

/* Títulos principais da revista e seções (ex: "Edição Atual", "Sobre a Revista") */
h1.pkp_screen_reader,
h2 {
    color: var(--emr-dark-text);
}


/* ------------------------------------------- */
/* 5. AJUSTES PARA A BARRA LATERAL (SIDEBAR)   */
/* ------------------------------------------- */

/* Fundo e bordas para os títulos dos blocos da barra lateral */
.pkp_block.block_information h2,
.pkp_block.block_language h2,
.pkp_block.block_browse h2,
.pkp_block.block_custom h2,
.pkp_block.block_web_feed h2,
.pkp_block.block_developed_by .title,
.pkp_block.block_make_submission h2 {
    background-color: var(--emr-accent-blue); /* Fundo azul marinho para os títulos dos blocos */
    color: #FFFFFF; /* Texto branco */
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 5px 5px 0 0;
}

/* Estilo para o conteúdo dos blocos da barra lateral */
.pkp_block .content {
    border: 1px solid var(--emr-border-color);
    border-top: none;
    padding: 15px;
    margin-bottom: 30px;
    background-color: #FFFFFF; /* Fundo branco para o conteúdo dos blocos */
    border-radius: 0 0 5px 5px;
}

/* Ajuste específico para os links dentro dos blocos da barra lateral */
.pkp_block ul a {
    color: var(--emr-gray-text);
}

.pkp_block ul a:hover {
    color: var(--emr-accent-blue);
    text-decoration: underline;
}

/* Ajuste para o botão "Enviar Submissão" na barra lateral */
.pkp_block_make_submission a.block_make_submission_link {
    background-color: var(--emr-red); /* Usa o vermelho da logo para este botão de ação */
    color: #FFFFFF;
    border-color: var(--emr-red);
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

.pkp_block_make_submission a.block_make_submission_link:hover {
    background-color: #C62828; /* Vermelho mais escuro no hover */
    border-color: #C62828;
}

/* Ajuste para a nuvem de palavras-chave (se precisar mudar as cores aleatórias) */
#wordcloud .keyword {
    fill: var(--emr-accent-blue) !important;
}

#wordcloud .keyword:hover {
    fill: var(--emr-green) !important;
}


/* ------------------------------------------- */
/* 6. AJUSTES PARA O RODAPÉ (FOOTER)           */
/* ------------------------------------------- */

.pkp_structure_footer_wrapper {
    background-color: #FFFFFF; /* Mesmo fundo branco da página para manter a consistência */
    border-top: 1px solid var(--emr-border-color);
    padding: 20px 0;
}

.pkp_footer_content {
    color: var(--emr-gray-text);
    text-align: center;
    font-size: 0.9em;
}

.pkp_footer_content a {
    color: var(--emr-accent-blue);
}

/* Ajuste para o logo do OJS/PKP no rodapé */
.pkp_brand_footer img {
    max-height: 40px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.pkp_brand_footer img:hover {
    opacity: 1;
}

/* ------------------------------------------- */
/* 7. CORREÇÃO DA BARRA SUPERIOR SOBREPOSTA (EXPERIMENTAL) */
/* Isso tenta ocultar a barra azul superior que pode estar causando problemas de layout. */
/* Se a barra ainda aparecer, precisamos de uma inspeção mais aprofundada do HTML. */
/* ------------------------------------------- */
.pkp_toolbar_wrapper,
.pkp_header_utility,
.pkp_site_name_wrapper + div {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}