/*
 * REMat-SP — CSS da nova identidade visual
 * Abordagem 2: o OJS administra a marca REMat por
 * $displayPageHeaderLogo e o SBEM-SP é inserido no header.tpl.
 *
 * Compatível com a estrutura visual padrão do OJS 3.x.
 *
 * IMPORTANTE:
 * - Este arquivo deve ser inserido em:
 *   Configurações > Website > Aparência > Folha de estilos da revista
 *   ou carregado como stylesheet personalizado, conforme a configuração
 *   da instalação OJS.
 * - O HTML/Smarty correspondente às duas marcas deve estar no header.tpl.
 */

/* ============================================================================
   0. IDENTIDADE VISUAL — cores extraídas das marcas anexadas
   ============================================================================ */

:root {
    --remat-red: #A61F2B;
    --remat-red-dark: #7F1721;
    --remat-red-light: #C52B38;

    --remat-black: #050505;
    --remat-white: #FFFFFF;

    --remat-gray-050: #FAFAFA;
    --remat-gray-100: #F3F3F3;
    --remat-gray-200: #E5E5E5;
    --remat-gray-300: #D1D1D1;
    --remat-gray-500: #737373;
    --remat-gray-700: #404040;
    --remat-gray-900: #171717;

    --remat-radius: 8px;
    --remat-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    --remat-transition: .2s ease;
}

/* =========================================================
   1. CABEÇALHO
   ========================================================= */

.pkp_structure_head {
    background: var(--remat-white);
    border-top: 6px solid var(--remat-red);
    border-bottom: 1px solid var(--remat-gray-200);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.pkp_head_wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/*
 * Área das duas marcas.
 * O HTML esperado é:
 *
 * <div class="remat_header_brands">
 *     <div class="remat_brand remat_brand_remat">
 *         ...logo REMat...
 *     </div>
 *     <span class="remat_brand_divider"></span>
 *     <a class="remat_brand remat_brand_sbem">...logo SBEM-SP...</a>
 * </div>
 */

.remat_header_brands {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;

    width: 100%;
    min-height: 170px;
    padding: 26px 0;

    box-sizing: border-box;
}

.remat_brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;

    text-decoration: none;
}

.remat_brand a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* ---------------------------------------------------------
   Logo REMat
   --------------------------------------------------------- */

.pkp_site_name {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: min(52%, 680px);
    min-height: 105px;
    margin: 0;
}

.pkp_site_name > a {
    display: block;
    width: 100%;
    color: var(--remat-black);
    font-weight: 800;
    text-decoration: none;
}

/*
 * Se a logo REMat for cadastrada pelo próprio OJS, estas regras controlam
 * automaticamente seu tamanho.
 */
.pkp_site_name .is_img img,
.pkp_site_name img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 118px;
    object-fit: contain;
    object-position: left center;
}

/*
 * Quando --remat-logo-url for preenchida, a logo pode ser controlada
 * independentemente da imagem inserida pelo OJS.
 */
.pkp_site_name a[title]:has(img) {
    line-height: 0;
}

/* =========================================================
   2. ÁREA DE BUSCA / USUÁRIO
   ========================================================= */

.pkp_head_wrapper .pkp_search,
.pkp_head_wrapper .pkp_navigation_user_wrapper {
    color: var(--remat-gray-900);
}

.pkp_head_wrapper .pkp_search button,
.pkp_head_wrapper .pkp_navigation_user_wrapper a {
    color: var(--remat-black);
}

.pkp_head_wrapper .pkp_search button:hover,
.pkp_head_wrapper .pkp_search button:focus,
.pkp_head_wrapper .pkp_navigation_user_wrapper a:hover,
.pkp_head_wrapper .pkp_navigation_user_wrapper a:focus {
    color: var(--remat-red);
}

/* =========================================================
   3. MENU PRINCIPAL
   ========================================================= */

.pkp_navigation_primary_row {
    background: var(--remat-black);
    margin-left: -24px;
    margin-right: -24px;
}

.pkp_navigation_primary {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.pkp_navigation_primary > li > a {
    color: var(--remat-white);
    font-weight: 600;
    text-decoration: none;

    border-bottom: 3px solid transparent;
    transition:
        background-color var(--remat-transition),
        color var(--remat-transition),
        border-color var(--remat-transition);
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: var(--remat-white);
    background: var(--remat-red);
    border-bottom-color: var(--remat-white);
}

.pkp_navigation_primary > li > a[aria-expanded="true"] {
    background: var(--remat-red);
    color: var(--remat-white);
}

/* Dropdown */

.pkp_navigation_primary .dropdown-menu {
    border-top: 3px solid var(--remat-red);
    border-radius: 0 0 var(--remat-radius) var(--remat-radius);
    box-shadow: var(--remat-shadow);
}

.pkp_navigation_primary .dropdown-menu a {
    color: var(--remat-gray-900);
}

.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus {
    color: var(--remat-white);
    background: var(--remat-red);
}

/* =========================================================
   4. LINKS E TÍTULOS
   ========================================================= */

a {
    color: var(--remat-red);
    transition: color var(--remat-transition);
}

a:hover,
a:focus {
    color: var(--remat-red-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--remat-black);
    font-weight: 700;
}

h1::after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin-top: 10px;
    background: var(--remat-red);
}

/* =========================================================
   5. CONTEÚDO PRINCIPAL
   ========================================================= */

.pkp_structure_content {
    background: var(--remat-white);
}

.pkp_page_index .homepage_about {
    line-height: 1.7;
    color: var(--remat-gray-700);
}

.pkp_page_index .homepage_about h2 {
    color: var(--remat-black);
    border-left: 5px solid var(--remat-red);
    padding-left: 14px;
}

/* =========================================================
   6. EDIÇÃO ATUAL
   ========================================================= */

.current_issue {
    border-top: 4px solid var(--remat-red);
}

.current_issue .current_issue_title {
    color: var(--remat-black);
}

.current_issue .obj_issue_toc .heading {
    color: var(--remat-red);
}

/* =========================================================
   7. LISTAGEM DE ARTIGOS / SUMÁRIO
   ========================================================= */

.obj_issue_toc .heading a,
.obj_article_summary .title a {
    color: var(--remat-black);
    font-weight: 700;
}

.obj_issue_toc .heading a:hover,
.obj_issue_toc .heading a:focus,
.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus {
    color: var(--remat-red);
}

.obj_article_summary {
    border-bottom: 1px solid var(--remat-gray-200);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.obj_article_summary .abstract {
    color: var(--remat-gray-700);
    line-height: 1.65;
}

/* =========================================================
   8. PÁGINA DO ARTIGO
   ========================================================= */

.obj_article_details .title {
    color: var(--remat-black);
}

.obj_article_details .author {
    color: var(--remat-gray-700);
}

.obj_article_details .galley-link,
.obj_article_details .download {
    background: var(--remat-red);
    border-color: var(--remat-red);
    color: var(--remat-white);
    border-radius: 5px;
    font-weight: 600;
}

.obj_article_details .galley-link:hover,
.obj_article_details .galley-link:focus,
.obj_article_details .download:hover,
.obj_article_details .download:focus {
    background: var(--remat-red-dark);
    border-color: var(--remat-red-dark);
    color: var(--remat-white);
}

/* =========================================================
   9. SIDEBAR
   ========================================================= */

.pkp_structure_sidebar {
    color: var(--remat-gray-700);
}

.block {
    border-top: 3px solid var(--remat-red);
    margin-bottom: 28px;
}

.block .title {
    color: var(--remat-black);
    font-weight: 700;
}

/* =========================================================
   10. BOTÕES
   ========================================================= */

button,
.button,
.btn {
    border-radius: 5px;
}

button.primary,
.button.primary,
.btn-primary {
    background: var(--remat-red);
    border-color: var(--remat-red);
    color: var(--remat-white);
}

button.primary:hover,
button.primary:focus,
.button.primary:hover,
.button.primary:focus,
.btn-primary:hover,
.btn-primary:focus {
    background: var(--remat-red-dark);
    border-color: var(--remat-red-dark);
    color: var(--remat-white);
}

/* =========================================================
   11. FORMULÁRIOS
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
    border: 1px solid var(--remat-gray-300);
    border-radius: 5px;
    background: var(--remat-white);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: var(--remat-red);
    box-shadow: 0 0 0 2px rgba(166, 31, 43, .12);
    outline: none;
}

/* =========================================================
   12. TABELAS
   ========================================================= */

table {
    width: 100%;
    border-collapse: collapse;
}

table thead th {
    background: var(--remat-black);
    color: var(--remat-white);
}

table tbody tr:nth-child(even) {
    background: var(--remat-gray-050);
}

table tbody tr:hover {
    background: rgba(166, 31, 43, .05);
}

table th,
table td {
    border-bottom: 1px solid var(--remat-gray-200);
}

/* =========================================================
   13. ALERTAS / NOTIFICAÇÕES
   ========================================================= */

.notification {
    border-left: 5px solid var(--remat-red);
}

.notification a {
    color: var(--remat-red);
}

/* =========================================================
   14. RODAPÉ
   ========================================================= */

.pkp_structure_footer_wrapper {
    margin-top: 2rem;
    border-top: 5px solid var(--remat-red);
    background: var(--remat-black);
}

.pkp_structure_footer {
    background: var(--remat-black);
    color: var(--remat-white);
}

.pkp_structure_footer a {
    color: var(--remat-white);
}

.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus {
    color: var(--remat-red-light);
}

.pkp_brand_footer img {
    max-height: 72px;
    width: auto;
}

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--remat-red);
    outline-offset: 3px;
}

/* =========================================================
   16. RESPONSIVIDADE
   ========================================================= */

@media (max-width: 900px) {

    .remat_header_brands {
        gap: 18px;
        min-height: 140px;
        padding: 20px 0;
    }

    .remat_brand_remat {
        min-width: 0;
        max-width: 55%;
    }

    .remat_brand_sbem {
        min-width: 0;
        max-width: 40%;
    }

    .remat_brand_remat img {
        max-height: 108px;
    }

    .remat_brand_sbem img {
        max-height: 84px;
    }

    .remat_brand_divider {
        height: 65px;
    }
}

@media (max-width: 650px) {

    .pkp_head_wrapper {
        padding: 0 16px;
    }

    .remat_header_brands {
        justify-content: center;
        gap: 12px;
        min-height: 105px;
        padding: 15px 0;
    }

    .remat_brand_remat {
        max-width: 58%;
    }

    .remat_brand_sbem {
        max-width: 36%;
    }

    .remat_brand_remat img {
        max-height: 70px;
    }

    .remat_brand_sbem img {
        max-height: 65px;
    }

    .remat_brand_divider {
        height: 52px;
    }

    .pkp_navigation_primary_row {
        margin-left: -16px;
        margin-right: -16px;
    }

    .pkp_navigation_primary {
        padding: 0 16px;
    }
}

@media (max-width: 450px) {

    .remat_header_brands {
        gap: 9px;
        min-height: 90px;
        padding: 12px 0;
    }

    .remat_brand_remat {
        max-width: 60%;
    }

    .remat_brand_sbem {
        max-width: 34%;
    }

    .remat_brand_remat img {
        max-height: 58px;
    }

    .remat_brand_sbem img {
        max-height: 52px;
    }

    .remat_brand_divider {
        height: 42px;
    }
}

/* =========================================================
   17. REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}