/**
 * CSS Personalizado para OJS - Inspirado na Revista ReGeo
 *
 * Instruções:
 * 1. Faça o upload deste arquivo no seu painel OJS em:
 *    Painel > Configurações > Site > Aparência > Folha de Estilos da Revista
 * 2. Faça o upload de uma imagem de cabeçalho em:
 *    Painel > Configurações > Site > Aparência > Imagem da Página Inicial (ou similar)
 *    E copie o link dessa imagem para a variável --header-background-image abaixo.
 * 3. Faça o upload do seu logo em:
 *    Painel > Configurações > Site > Aparência > Logo
 */

/* --------------------------------------------------------------
   1. VARIÁVEIS DE COR E FONTE (Fácil de editar)
-------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

:root {
    --font-principal: 'Montserrat', sans-serif;
    --cor-primaria-principal: #021a4b;
    --cor-texto-claro: #ffffff;
    --cor-texto-escuro: #333333;
    --cor-destaque: #c8e63a; /* Verde-limão inspirado no logo ReGeo */
    --cor-fundo-claro: #f4f4f4;
    --cor-bordas: #dddddd;
    --cor-fundo-claro: #f0f0f0; 

    /* !!! IMPORTANTE: Substitua pela URL da sua imagem de cabeçalho !!! */
    --header-background-image: url('https://revistaocidente.com/public/journals/1/homepageImage_pt_BR.png');
}

/* --------------------------------------------------------------
   2. ESTILOS GERAIS DO CORPO
-------------------------------------------------------------- */
body {
    font-family: var(--font-principal);
    color: var(--cor-texto-escuro);
    background-color: var(--cor-fundo-claro);
}

a {
    color: #006db2;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.homepage_image {
    display: none;
}


/* --------------------------------------------------------------
   3. CABEÇALHO (HEADER) - A principal mudança
-------------------------------------------------------------- */
.pkp_site_name .is_text {
    color: var(--cor-texto-claro);
}

.pkp_site_nav_toggle>span {
    border-bottom: 3px solid var(--cor-texto-claro);
}

.pkp_site_nav_toggle>span:before, .pkp_site_nav_toggle>span:after {
    background: var(--cor-texto-claro);
} 

.pkp_site_nav_toggle {
    margin-top: 12px;
}


/* Remove a cor de fundo azul padrão */
.pkp_structure_head {
    background: none;
    border-bottom: none;
    padding: 0;
}

/* * Container do cabeçalho com a imagem de fundo
 * ----- ESTA É A SEÇÃO MODIFICADA -----
 */
header[role="banner"] .pkp_head_wrapper {
    /* Estilos originais que devem ser mantidos */
    background-image: var(--header-background-image);
    background-size: cover;
    background-position: center center;
    text-align: center;

    /* --- INÍCIO DAS MODIFICAÇÕES --- */
    
    /* 1. Define uma altura mínima para o cabeçalho. Ajuste este valor conforme desejar. */
    min-height: 400px; 
    
    /* 2. Ativa o layout Flexbox */
    display: flex;
    
    /* 3. Define a direção dos itens para coluna (um em cima do outro) */
    flex-direction: column;
    
    /* 4. Distribui o espaço: o primeiro item (título) vai para o topo, o último (menu) para a base. */
    justify-content: space-between; 
    
    
    /* --- FIM DAS MODIFICAÇÕES --- */
}

/* Estilo do Título da Revista (caso não use logo) */
.pkp_site_name a {
    font-size: 4.5rem;
    font-weight: 900;
    color: var(--cor-texto-claro);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    display: block; /* Garante que o link ocupe toda a largura */
}

/* Estilo do subtítulo/descrição (Revista Interdisciplinar) */
.pkp_site_name .subheading, .pkp_site_name span {
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--cor-texto-claro);
    letter-spacing: 2px;
    margin-top: -10px;
}

/* Esconde o texto do título se um logo for enviado */
.pkp_site_name img {
    max-width: 350px; /* Ajuste o tamanho do seu logo */
    height: auto;
}
.pkp_site_name .pkp_screen_reader {
    display: none;
}

/* Barra superior de Acesso/Registro */
.pkp_navigation_user_wrapper {
    background-color: var(--cor-primaria-escura);
    border-bottom: 1px solid #444;
}
.pkp_navigation_user ul a {
    color: var(--cor-texto-escuro);
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.9rem;
}
.pkp_navigation_user li a {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.9rem;
}
.pkp_site_nav_menu {
    background: #021a4b;
    top: 8rem;
}
.pkp_site_nav_menu a {
    color: var(--cor-texto-claro)
}

.pkp_navigation_user li.profile a {
    color: white;
}

a#pkpDropdown02#text {
    color: white !important;
}

/* --------------------------------------------------------------
   4. BARRA DE NAVEGAÇÃO PRINCIPAL
-------------------------------------------------------------- */

.pkp_navigation_primary_wrapper {
    border-bottom: 1px solid var(--cor-bordas);
}
.pkp_navigation_primary ul a, .pkp_navigation_primary li a, a.pkp_search {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.pkp_navigation_primary ul li a, .pkp_navigation_primary ul li a:hover {
    color: black;
}


.pkp_navigation_primary li a, .pkp_navigation_primary li a:hover {
    color: white;
}

.pkp_navigation_primary_row {
    background-color: #021a4b;
}



/* --------------------------------------------------------------
   5. CONTEÚDO PRINCIPAL E SIDEBAR
-------------------------------------------------------------- */
.page_title {
    font-weight: 700;
    border-bottom: 3px solid var(--cor-primaria-escura);
    padding-bottom: 10px;
    margin-bottom: 25px;
}

/* Estilo dos blocos da sidebar (Informações, etc) */
.pkp_block {
    margin-bottom: 2rem;
}
.pkp_block .title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--cor-texto-escuro);
    border-bottom: 2px solid var(--cor-bordas);
    padding-bottom: 8px;
    margin-bottom: 15px;
}
.pkp_block a {
    font-weight: bold;
}

/* Estilo dos artigos na página inicial */
.obj_article_summary {
    border: 1px solid var(--cor-bordas);
    background-color: #fff;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.obj_article_summary .title {
    font-size: 1.3rem;
    font-weight: 700;
}


/* --------------------------------------------------------------
   6. RODAPÉ (FOOTER)
-------------------------------------------------------------- */
.pkp_structure_footer_wrapper {
    background-color: white
}

/* --------------------------------------------------------------
   7. AJUSTES PARA DISPOSITIVOS MÓVEIS (RESPONSIVO) - VERSÃO 3
-------------------------------------------------------------- */
@media(max-width: 994px) {
    header[role="banner"] .pkp_head_wrapper {
        text-align: left !important;
    }

    .pkp_navigation_primary ul li a {
        color: white;
    }
}

/* Aplica estes estilos apenas em telas com largura máxima de 768px (tablets e celulares) */
@media (max-width: 768px) {

    /* 1. Ajusta o container do cabeçalho para servir de "âncora" */
    header[role="banner"] .pkp_head_wrapper {
        /* Define uma altura fixa para a imagem de fundo ter espaço */
        min-height: 250px; 
        
        /* Torna este o container de referência para o menu */
        position: relative; 
        
        /* Remove o padding inferior, pois o menu não ocupará mais espaço no fluxo */
        padding: 2rem 1rem 0 1rem;
    }

    /* Reduz o tamanho da fonte do título em telas menores */
    .pkp_site_name a {
        font-size: 2.5rem; 
    }
    
    /* 2. Posiciona o menu de forma absoluta (flutuando) sobre o cabeçalho */
    .pkp_site_nav_menu {
        position: absolute;
        
        /* * !!! AQUI VOCÊ AJUSTA A POSIÇÃO VERTICAL !!! 
         * Diminua o valor (ex: 7rem) para subir o menu.
         * Aumente o valor (ex: 9rem) para descer o menu.
        */
        top: 7rem; 
        
        /* Garante que o menu ocupe toda a largura */
        left: 0;
        right: 0;

        /* Garante o fundo branco para legibilidade */
        background: #021a4b;
    }

    /* Garante que o texto dentro do menu seja escuro para contrastar com o fundo branco */
}