/* =========================================================
   TEMA CUSTOMIZADO - REVISTA AÇÃO & SOCIEDADE (RAS)
   (Versão Segura: Apenas Cabeçalho, Menu e Fundo)
   =========================================================
*/

/* Importação das fontes que você escolheu */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@500;700;800&display=swap');

/* =========================================================
   1. FUNDO GERAL E O "GAP" (Efeito de Cards)
   ========================================================= */
/* O fundo cinza claro que permite enxergar os contêineres como cards brancos */
body, .pkp_structure_page {
    background-color: #f4f6f8 !important; 
}

/* O distanciamento (gap) abaixo do banner vermelho e alinhamento do menu na base */
.pkp_structure_head {
    margin-bottom: 17px !important; /* Aqui está o seu gap */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    display: flex !important; 
    flex-direction: column !important; 
    justify-content: flex-end !important;
    background-size: 100% auto !important; /* Trava a largura na tela toda, mas mantém a altura natural (NUNCA dá zoom) */
    background-repeat: no-repeat !important; /* Proíbe o OJS de multiplicar a imagem como azulejo se sobrar espaço */
    background-position: top center !important; /* Fixa a imagem "imantada" no teto do site */    
}

/* Garante que os containers internos do OJS fiquem brancos parecendo cards */
.pkp_structure_main, .pkp_structure_sidebar {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    padding: 30px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important;

    
    /* O SEU CADIQUIM A MAIS AQUI: */
    margin-top: -5px !important; /* Puxa o card para cima do grid, engolindo a curva! */
}

/* Faz as divs brancas deslizarem para o teto do conteúdo e tapar a ponta das linhas */
.pkp_structure_content {
    padding-top: 0 !important; 
}


/* =========================================================
   2. A LOGOMARCA (Caixa Branca Otimizada)
   ========================================================= */
.pkp_site_name a {
    display: inline-block !important; 
    background-color: #ffffff !important; 
    box-shadow: 0 6px 15px rgba(0,0,0,0.12) !important;
    border-radius: 8px !important; 
    margin: 15px 0 15px 20px !important; 
    padding: 0 !important; 
    border: none !important; 
}

.pkp_site_name .is_img img {
    max-height: 170px !important; /* Ajustado para harmonia da barra */
    width: auto !important; 
    padding: 6px !important; 
    background-color: transparent !important; 
    margin: 0 !important;
}

/* =========================================================
   3. MENU PRINCIPAL (Barra Branca Contínua de Fora a Fora)
   ========================================================= */
/* Zera as margens do OJS para permitir que a barra ocupe 100% da tela APENAS NO PC */
@media (min-width: 992px) {
    .pkp_head_wrapper, .pkp_navigation_primary_row {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .pkp_navigation_primary_wrapper {
        width: 100% !important;
        display: flex !important; 
        justify-content: center !important; 
    }
    ul.pkp_navigation_primary { 
        display: flex !important; 
        justify-content: center !important; 
    }
}

/* A barra branca e seus estilos gerais (mantidos em todas as telas) */
.pkp_navigation_primary_wrapper {
    background-color: #ffffff !important; 
    align-items: center !important; 
    min-height: 50px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

ul.pkp_navigation_primary { 
    margin: 0 !important; 
    padding: 0 !important; 
}

ul.pkp_navigation_primary > li > a { 
    color: #222222 !important; 
    font-family: 'Montserrat', sans-serif !important; 
    font-weight: 800 !important; 
    text-transform: uppercase !important; 
    font-size: 13px !important; 
    padding: 15px 20px !important; 
}

ul.pkp_navigation_primary > li > a:hover { 
    color: #c91028 !important;
}

/* Tira o quadrado preto ao clicar (foco) e na página atual */
ul.pkp_navigation_primary > li > a:focus,
ul.pkp_navigation_primary > li > a:active,
ul.pkp_navigation_primary > li[aria-current] > a {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* =========================================================
   4. MENU DO USUÁRIO (Botão Pílula c/ Ajuste da Bolinha)
   ========================================================= */
/* Posiciona o botão do usuário flutuando sobre o banner vermelho (APENAS NA TELA GRANDE) */
@media (min-width: 992px) {
    .pkp_navigation_user_wrapper { 
        position: absolute !important; 
        top: 20px !important; 
        right: -10% !important; 
        z-index: 9999 !important; 
    }
}

/* Formato pílula branca */
ul#navigationUser > li > a { 
    color: #333333 !important; 
    font-weight: 600 !important; 
    font-family: 'Inter', sans-serif !important;
    background-color: #ffffff !important; 
    padding: 8px 16px !important; 
    border-radius: 20px !important; 
    font-size: 13px !important; 
    border: none !important; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; 
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

ul#navigationUser > li > a:hover { 
    color: #c91028 !important; 
}

/* A bolinha de notificação perfeitamente alinhada na borda */
ul#navigationUser > li > a .badge,
ul#navigationUser > li > a .task_count {
    position: absolute !important;
    top: -6px !important;   
    right: -6px !important; 
    background-color: #c91028 !important; 
    color: #ffffff !important;            
    font-size: 0.75rem !important;        
    width: 20px !important;               
    height: 20px !important;              
    border-radius: 50% !important;        
    padding: 0 !important;                
    display: flex !important;      
    align-items: center !important;       
    justify-content: center !important;   
    line-height: 1 !important;
}

/* =========================================================
   5. RODAPÉ SLIM (Correção Final)
   ========================================================= */
.pkp_structure_footer_wrapper {
    padding: 0 !important; 
    /* Mágica do Banner: */
    background-image: url('https://periodicos.ifgoiano.edu.br/public/journals/6/homepageImage_pt_BR.png') !important;
    background-color: #c91028 !important;
    background-size: cover !important;
    background-position: bottom center !important;
    color: #ffffff !important;
}

/* Força eventuais links soltos dentro do rodapé a ficarem brancos */
.pkp_structure_footer_wrapper a,
.pkp_structure_footer a {
    color: #ffffff !important;
}

.pkp_structure_footer {
    padding: 20px !important; /* Mais fofinho no celular para dar distanciamento */
    margin: 0 !important;
    text-align: center; /* Centraliza as logos se elas caírem/empilharem no celular */
}

/* Container de texto limpo para o Flexbox rodar liso */
.pkp_structure_footer .pkp_footer_content {
    margin: 0 !important; /* Removemos o falso centro! */
    padding: 0 !important;
}

/* ALINHAMENTO DO RODAPÉ APENAS NO PC */
@media (min-width: 992px) {
    .pkp_structure_footer {
        padding: 10px 40px !important; 
        display: flex !important;
        justify-content: space-between !important; 
        align-items: center !important; 
    }
    .pkp_structure_footer .pkp_footer_content {
        width: auto !important;
        margin: 0 !important;
    }
}

/* Estilização da Logo da OJS/PKP */
.pkp_brand_footer {
    padding: 0 !important; /* Removemos a margem interna gigante que inflava o rodapé do lado direito */
    margin: 0 !important;
}

.pkp_brand_footer img {
    max-height: 50px !important; /* Logo do PKP bem tímida */
    width: auto !important;
    filter: grayscale(1); 
    opacity: 0.6;
}

/* "Reserva de Integridade" da marca do IF Goiano (Caixa Branca Otimizada) */
.pkp_structure_footer .pkp_footer_content img {
    /* Logo maior internamente */
    max-height: 70px !important; 
    width: auto !important;
    
    /* Borda enxuta e arredondada! */
    background-color: #ffffff !important; 
    padding: 8px 15px !important; /* Borda bem mais fina (respiro menor) */
    border-radius: 8px !important; /* Arredondamento profundo! (formato pílula/cápsula) */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important; 
    
    margin: 0 !important;
}

/* Destroi o espaço vazio fantasma que o "Parágrafo" do editor de texto cria por padrão */
.pkp_structure_footer .pkp_footer_content p {
    margin: 0 !important;
    padding: 0 !important;
}



/* =========================================================
   6. ESPAÇAMENTOS DA PÁGINA DE EDIÇÃO (Limpeza de Margem)
   ========================================================= */

/* Limpa a gordura (padding duplo) acima e abaixo da "Edição Completa" e do Botão PDF */
.obj_issue_toc .galleys {
    margin-top: 15px !important;    /* Original era 30px */
    margin-bottom: 15px !important; /* Original era 30px */
    
    padding-top: 10 !important;      /* Original era 30px, cortamos pra matar o vazio duplo! */
    padding-bottom: 0 !important;   /* Cortado! */
}

/* Reduz drasticamente o "vácuo" entre o fim do bloco do PDF e o início da lista de Artigos (Editorial) */
.obj_issue_toc .sections {
    margin-top: 20px !important;    /* O absurdamente original era de 60px! */
}


/* Reduz o espaço abaixo da Data ("Publicado: 2026...") */
.obj_issue_toc .published {
    margin-bottom: 5px !important; /* Original era 20px */
}

/* =========================================================
   7. APROXIMAÇÃO DAS SEÇÕES (Artigos Originais / Relatos / etc)
   ========================================================= */

/* Limpa o excesso de lixo (padding duplo) que separa grandes blocos de artigos */
.obj_issue_toc .section {
    margin-top: 5px !important;    /* Original era 30px */
    margin-bottom: 10px !important; /* Mantém 30px de distanciamento limpo do próximo bloco */
    
    padding-top: 10px !important;      /* Mata a gordura interna do topo! Original 30px */
    padding-bottom: 0 !important;   /* Mata a gordura interna da base! Original 30px */
}

/* Aproxima as palavras com linha cinza (ex: "Relato de experiência") do primeiro artigo */
.obj_issue_toc .section > h2 {
    margin-top: 0 !important;       /* Garante que o título não desça demais */
    margin-bottom: 15px !important; /* Original costuma ser 20px~30px. Encurtamos! */
}

/* =========================================================
   8. AJUSTES EXCLUSIVOS PARA CELULAR (MOBILE-FIRST POLISH)
   ========================================================= */
@media (max-width: 991px) {
    /* 1. O Cabeçalho (Puxa o banner "mais pra baixo" para engolir a logo inteira sem enforcar) */
    .pkp_structure_head {
        background-size: cover !important; 
        background-position: center !important; 
        padding-bottom: 62px !important; /* Conforme pedido: +50px de mergulho para desenterrar a logo! */
    }

    /* 2. A Logo da Revista (Encolhe de 170px para tamanho elegante sem dominar a tela) */
    .pkp_site_name .is_img img {
        max-height: 80px !important; /* Tamanho delicado para smartphone */
        padding: 4px !important;
    }
    .pkp_site_name a {
        margin: 10px auto !important; /* Centraliza a caixa branca gentilmente na tela */
    }

    /* 3. O Rodapé (Exatamente como pediu: Lado a Lado e Hiper Estreito) */
    .pkp_structure_footer {
        display: flex !important;
        flex-direction: row !important; /* Obriga as logos a sentarem na mesa linha horizontal */
        justify-content: space-between !important; 
        align-items: center !important; 
        padding: 15px 10px !important; /* Rodapé "Fit" (magrinho) para celular */
        gap: 5px !important; /* Impede colisão frontal em telas antigas muito finas */
    }

    /* Como as duas logos disputarão o espaço magro do celular, elas precisam encolher mais do que no PC */
    .pkp_structure_footer .pkp_footer_content img {
        max-height: 40px !important; /* IF discreto */
        padding: 5px 8px !important; /* Moldura de segurança micro */
        margin: 0 !important;
    }
    .pkp_brand_footer img {
        max-height: 35px !important; /* Plataforma OJS minúscula */
    }

    /* 4. Menu Celular: Submenus com Identação (Degrau com guia de leitura) */
    /* Empurra filhos para a direita e coloca um fio lateral rosa guiando a hierarquia */
    .pkp_navigation_primary ul {
        padding-left: 20px !important; 
        border-left: 2px solid #fec7df !important; 
        margin-left: 10px !important;
    }
    
    /* 5. Menu Celular: Botões de Acesso/Cadastro perdem o ego e viram link comum na lista */
    ul#navigationUser > li > a {
        background-color: transparent !important; /* Tira o fundo pílula */
        color: #222222 !important; /* Texto escuro normal */
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 10px 15px !important;
        font-size: 14px !important;
        display: block !important;
    }
    
    /* Corrige a bolinha vermelha de tarefa encavalada para colar do lado do texto */
    ul#navigationUser > li > a .badge,
    ul#navigationUser > li > a .task_count {
        position: relative !important; 
        top: -8px !important;
        right: 0 !important;
        display: inline-flex !important;
        margin-left: 5px !important;
        font-size: 0.6rem !important;        
        width: 16px !important;               
        height: 16px !important;              
    }
    
    /* 6. A "Caixa Suprema" do Menu Sanduíche (Envolve 100% da navegação) */
    .pkp_site_nav_menu {
        background-color: #ffffff !important; /* O fundo branco pertence APENAS à "Gaiola" curva externa */
        border: 2px solid #c91028 !important; /* "Bordinha" escarlate delimitando TUDO */
        border-radius: 12px !important;       /* Cantos curvos macios para o usuário */
        margin: 10px !important;              /* Afasta fisicamente TODO o menu das bordas de vidro da tela */
        width: calc(100% - 25px) !important;  /* [NÚCLEO DO SEU PEDIDO] Subtrai a margem total da caixa pra matar o scroll arrastado na direita! */
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; 
        overflow: hidden !important;          /* Máscara de corte para os cantos em 90 dos botões internos */
    }
    
    /* Neutralização total da Tropa de Choque interna (Impede as filhas de desenharem caixas retas ou sombras fantasmas) */
    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper,
    .pkp_navigation_user_wrapper {
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important; /* Zera qualquer margem que possa vazar do limite de 10px do Pai */
    }
}