/* ==========================================================================
   PALETA PRINCIPAL DO SITE
   ========================================================================== */

:root {
    --cor-principal: #413E3C;
    --cor-principal-hover: #333130;
    --cor-principal-escura: #222120;

    --cor-cinza-claro: #eeeeee;
    --cor-cinza-texto: #d1cecc;
    --cor-cinza-borda: #d8d6d4;

    --cor-branco: #ffffff;
}


/* ==========================================================================
   1. MENU PRINCIPAL
   ========================================================================== */

/* Links principais e menu do usuário */
.pkp_navigation_primary > li > a,
.pkp_navigation_user > li > a,
.pkp_navigation_user > li > a > span {
    color: var(--cor-branco) !important;
    background-color: transparent !important;
}

/* Hover e foco */
.pkp_navigation_primary > li:hover > a,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_user > li:hover > a,
.pkp_navigation_user > li > a:focus {
    color: var(--cor-branco) !important;
    background-color: var(--cor-principal-hover) !important;
}


/* ==========================================================================
   2. SUBMENUS FLUTUANTES - DESKTOP
   ========================================================================== */

/* Borda superior */
.pkp_navigation_primary ul,
.pkp_navigation_user ul {
    border-top-color: var(--cor-principal) !important;
}

/* Links do submenu */
.pkp_navigation_primary ul a,
.pkp_navigation_user ul a {
    color: var(--cor-principal) !important;
    background-color: var(--cor-branco) !important;
}

/* Hover e foco */
.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus,
.pkp_navigation_user ul a:hover,
.pkp_navigation_user ul a:focus {
    color: var(--cor-principal-hover) !important;
    background-color: var(--cor-cinza-claro) !important;
}

/* Remove elementos decorativos que podem trazer o azul padrão */
.pkp_navigation_primary ul a::before,
.pkp_navigation_user ul a::before {
    display: none !important;
    content: none !important;
}

/* Indicador lateral do item selecionado */
.pkp_navigation_primary ul li:hover > a,
.pkp_navigation_primary ul li.pkp_nav_focus > a,
.pkp_navigation_user ul li:hover > a,
.pkp_navigation_user ul li.pkp_nav_focus > a {
    box-shadow: inset 3px 0 0 var(--cor-principal) !important;
    border-left-color: var(--cor-principal) !important;
}


/* ==========================================================================
   3. CELULAR E TABLET
   ========================================================================== */

@media (max-width: 991px) {

    /* Submenu background reset para mobile */
    .pkp_navigation_primary ul,
    .pkp_navigation_user ul {
        background-color: transparent !important;
    }

    /* Links do submenu */
    .pkp_navigation_primary ul a,
    .pkp_navigation_user ul a,
    .pkp_navigation_primary ul li a,
    .pkp_navigation_user ul li a {
        color: var(--cor-cinza-texto) !important;
        background-color: transparent !important;
    }

    /* Hover nos links do submenu em telas de toque */
    .pkp_navigation_primary ul a:hover,
    .pkp_navigation_user ul a:hover {
        background-color: var(--cor-principal-hover) !important;
        color: var(--cor-branco) !important;
    }

    /* Toque, foco e seleção */
    .pkp_navigation_primary ul a:active,
    .pkp_navigation_primary ul a:focus,
    .pkp_navigation_user ul a:active,
    .pkp_navigation_user ul a:focus {
        color: var(--cor-branco) !important;
        background-color: var(--cor-principal-hover) !important;
    }
}


/* ==========================================================================
   4. BOTÕES GERAIS
   ========================================================================== */

button,
input[type="button"],
input[type="submit"],
.pkp_button,
button.submit {
    background-color: var(--cor-principal) !important;
    border-color: var(--cor-principal-hover) !important;
    color: var(--cor-branco) !important;
}

/* Pseudo-elementos dos botões */
button::after,
button::before,
button.submit::after,
button.submit::before,
.pkp_button::after,
.pkp_button::before {
    background-color: var(--cor-principal) !important;
    background-image: none !important;
}

/* Hover dos botões */
button:hover,
button.submit:hover,
input[type="submit"]:hover {
    background-color: var(--cor-principal-hover) !important;
    border-color: var(--cor-principal-escura) !important;
    color: var(--cor-branco) !important;
}

/* Hover dos pseudo-elementos */
button:hover::after,
button:hover::before,
button.submit:hover::after,
button.submit:hover::before,
.pkp_button:hover::after,
.pkp_button:hover::before {
    background-color: var(--cor-principal-hover) !important;
}


/* ==========================================================================
   5. BOTÃO "ENVIAR SUBMISSÃO"
   ========================================================================== */

/* Estado normal */
.pkp_structure_sidebar .block_make_submission_link,
.pkp_structure_sidebar .block_make_submission_link:link,
.pkp_structure_sidebar .block_make_submission_link:visited {
    display: inline-block !important;

    color: var(--cor-branco) !important;
    background-color: var(--cor-principal) !important;

    border: 1px solid var(--cor-principal-hover) !important;

    text-decoration: none !important;

    cursor: pointer !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease !important;
}

/* Hover */
.pkp_structure_sidebar .block_make_submission_link:hover,
.pkp_structure_sidebar .block_make_submission_link:focus,
.pkp_structure_sidebar .block_make_submission_link:active {
    color: var(--cor-branco) !important;
    background-color: var(--cor-principal-hover) !important;
    border-color: var(--cor-principal-escura) !important;

    text-decoration: none !important;
}

/* Remove qualquer azul dos elementos internos */
.pkp_structure_sidebar .block_make_submission_link *,
.pkp_structure_sidebar .block_make_submission_link::before,
.pkp_structure_sidebar .block_make_submission_link::after {
    color: var(--cor-branco) !important;
    background-image: none !important;
}


/* ==========================================================================
   6. BARRA LATERAL / SIDEBAR
   ========================================================================== */

/* Links gerais da sidebar */
.pkp_structure_sidebar a,
.pkp_structure_sidebar a:link,
.pkp_structure_sidebar a:visited {
    color: var(--cor-principal) !important;
}

/* Hover e foco */
.pkp_structure_sidebar a:hover,
.pkp_structure_sidebar a:focus {
    color: var(--cor-principal-hover) !important;
}

/* Clique */
.pkp_structure_sidebar a:active {
    color: var(--cor-principal-escura) !important;
}


/* ==========================================================================
   7. MENU "INFORMAÇÕES" DA BARRA LATERAL

   Links:
   - Para Leitores
   - Para Autores
   - Para Bibliotecários
   ========================================================================== */

/* Lista */
.pkp_structure_sidebar .block_information .content ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Cada item */
.pkp_structure_sidebar .block_information .content li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================================
   7.1 LINKS - ESTADO NORMAL
   ========================================================================== */

.pkp_structure_sidebar .block_information .content li a {
    position: relative !important;

    display: block !important;

    color: #413E3C !important;
    background-color: transparent !important;

    padding: 7px 10px 7px 20px !important;
    margin: 2px 0 !important;

    border-left: 3px solid transparent !important;

    text-decoration: none !important;

    cursor: pointer !important;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        padding-left 0.2s ease,
        border-color 0.2s ease !important;
}


/* ==========================================================================
   7.2 SETA
   ========================================================================== */

.pkp_structure_sidebar .block_information .content li a::before {
    content: "›" !important;

    position: absolute !important;

    left: 6px !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    color: #413E3C !important;

    font-size: 18px !important;
    font-weight: bold !important;
    line-height: 1 !important;

    opacity: 0.45 !important;

    transition:
        left 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease !important;
}


/* ==========================================================================
   7.3 HOVER
   ========================================================================== */

.pkp_structure_sidebar .block_information .content li a:hover {
    color: #333130 !important;

    background-color: #eeeeee !important;

    border-left: 3px solid #413E3C !important;

    padding-left: 24px !important;

    text-decoration: none !important;
}


/* Seta no hover */
.pkp_structure_sidebar .block_information .content li a:hover::before {
    left: 9px !important;

    color: #333130 !important;

    opacity: 1 !important;
}


/* ==========================================================================
   7.4 FOCO - TECLADO
   ========================================================================== */

.pkp_structure_sidebar .block_information .content li a:focus,
.pkp_structure_sidebar .block_information .content li a:focus-visible {
    color: #333130 !important;

    background-color: #eeeeee !important;

    border-left: 3px solid #413E3C !important;

    padding-left: 24px !important;

    text-decoration: none !important;

    outline: 2px solid #413E3C !important;
    outline-offset: 1px !important;
}


/* ==========================================================================
   7.5 CLIQUE
   ========================================================================== */

.pkp_structure_sidebar .block_information .content li a:active {
    color: #ffffff !important;

    background-color: #413E3C !important;

    border-left-color: #222120 !important;
}


/* ==========================================================================
   7.6 LINKS VISITADOS
   ========================================================================== */

/* Impede que o navegador coloque roxo nos links visitados */
.pkp_structure_sidebar .block_information .content li a:visited {
    color: #413E3C !important;
}

/* Link visitado + hover */
.pkp_structure_sidebar .block_information .content li a:visited:hover {
    color: #333130 !important;

    background-color: #eeeeee !important;

    border-left: 3px solid #413E3C !important;
}


/* ==========================================================================
   8. LINKS GERAIS DO CONTEÚDO
   ========================================================================== */

.pkp_structure_main a,
.pkp_links a,
.pagination a {
    color: var(--cor-principal) !important;
}

/* Hover */
.pkp_structure_main a:hover,
.pkp_links a:hover,
.pagination a:hover {
    color: var(--cor-principal-hover) !important;
}


/* ==========================================================================
   9. PAGINAÇÃO
   ========================================================================== */

.pagination > li > a,
.pagination > li > span {
    color: var(--cor-principal) !important;

    border-color: var(--cor-cinza-borda) !important;

    background-color: var(--cor-branco) !important;
}

/* Página atual */
.pagination > .active > a,
.pagination > .active > span {
    color: var(--cor-branco) !important;

    background-color: var(--cor-principal) !important;

    border-color: var(--cor-principal) !important;
}

/* Hover */
.pagination > li > a:hover,
.pagination > li > a:focus {
    color: var(--cor-branco) !important;

    background-color: var(--cor-principal-hover) !important;

    border-color: var(--cor-principal-hover) !important;
}


/* ==========================================================================
   10. CAIXAS DE AVISO / NOTIFICAÇÕES
   ========================================================================== */

.cmp_notification,
.cmp_notification.info,
.pkp_notification,
.notification_info {
    border-left-color: var(--cor-principal) !important;

    box-shadow:
        inset 4px 0 0 var(--cor-principal) !important;
}

/* Ícone/barra da notificação */
.cmp_notification::before,
.cmp_notification.info::before {
    background-color: var(--cor-principal) !important;
}


/* ==========================================================================
   11. ELEMENTOS DE FORMULÁRIO
   ========================================================================== */

/* Campos quando recebem foco */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--cor-principal) !important;

    box-shadow:
        0 0 0 1px var(--cor-principal) !important;
}


/* ==========================================================================
   12. CHECKBOXES / RADIOS / ELEMENTOS SELECIONADOS
   ========================================================================== */

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--cor-principal) !important;
}


/* ==========================================================================
   13. ÍCONES E ELEMENTOS INTERATIVOS
   ========================================================================== */

/* Evita que ícones herdados recebam azul */
.pkp_structure_sidebar svg,
.pkp_structure_sidebar i {
    color: inherit !important;
}

/* Links com ícones */
.pkp_structure_sidebar a svg,
.pkp_structure_sidebar a i {
    color: var(--cor-principal) !important;
}


/* ==========================================================================
   14. REMOÇÃO DO AZUL PADRÃO DO PKP/OJS
   ========================================================================== */

/* Componentes comuns */
.pkp_page_index a,
.pkp_page_about a,
.pkp_page_issue a,
.pkp_page_article a,
.pkp_page_search a {
    --link-color: var(--cor-principal) !important;
}

/* Hover */
.pkp_page_index a:hover,
.pkp_page_about a:hover,
.pkp_page_issue a:hover,
.pkp_page_article a:hover,
.pkp_page_search a:hover {
    --link-color: var(--cor-principal-hover) !important;
}


/* ==========================================================================
   15. ACESSIBILIDADE / FOCO
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--cor-principal) !important;
    outline-offset: 2px !important;
}


/* ==========================================================================
   16. CURSOR PARA ELEMENTOS CLICÁVEIS
   ========================================================================== */

.pkp_structure_sidebar a,
.pkp_navigation_primary a,
.pkp_navigation_user a,
button,
.pkp_button,
input[type="submit"] {
    cursor: pointer !important;
}