/* Fonte Roboto, usada em todo o site (item 5). O @import precisa ser a primeira regra do arquivo. */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap");

/* Paleta e medidas compartilhadas.
   Verdes ajustados para passar no contraste WCAG AA (4,5:1):
   --green com texto --green-dark = 5,23:1 | --green-text sobre branco = 5,29:1 */
:root {
  --content-width: 1140px;
  --green: #9bbd35;
  --green-hover: #b7d54f;
  --green-dark: #014511;
  --green-text: #587512;
}

/* =============================
   HOME / EDIÇÃO
   ============================= */

@media (max-width: 991.98px) {
  /* era 1024px: agora igual ao breakpoint do menu (lg do Bootstrap) */
  .homepage-issue-description-wrapper {
    padding: 0.5rem 1rem;
  }
}

.page-issue-description-wrapper {
  background: var(--green);
  color: var(--green-dark);
  font-weight: bold;
  border: 4px solid var(--green-dark);
}

@media (min-width: 992px) {
  /* era 1024: agora troca junto com o menu (breakpoint lg do Bootstrap) */
  .homepage-image-behind-issue {
    display: none;
  }
}

@media (max-width: 400px) {
  .homepage-additional-content {
    display: none;
  }
}

.homepage-image-behind-issue
  + .container-homepage-issue
  .homepage-issue-current,
.homepage-image-behind-issue
  + .container-homepage-issue
  .homepage-issue-identifier,
.homepage-image-behind-issue
  + .container-homepage-issue
  .homepage-issue-published {
  display: none;
}

.homepage-description-buttons {
  background: white;
  width: fit-content;
  padding: 0.25rem 1rem;
  border-radius: 8px;
}

#homepageDescriptionButtons {
  background: transparent;
}

.page-issue-details .col-lg-9 {
  display: none;
}

.section_policy {
  display: none;
}

.page-content {
  font-size: 16px;
  line-height: 1.6; /* o tema deixava 30px, pensado para fonte de 20px */
}

/* Mobile: o banner tem texto desenhado dentro da imagem e ficava ilegível
   (385x75). Mostra só a parte do logo, em altura fixa. */
@media (max-width: 991.98px) {
  .homepage-image-behind-issue img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    object-position: left center;
  }
}

/* =============================
   CABEÇALHO
   (regras achatadas, sem aninhamento, para funcionar em qualquer navegador)
   ============================= */

.main-header {
  background-color: #104e8f;
  width: 100%; /* era 100vw: gerava barra de rolagem horizontal */
  border-bottom: 1px solid white;
}

.main-header .container {
  margin: 0;
  max-width: 100% !important; /* era 100vw */
}

.navbar-toggler {
  background-color: white;
}

.navbar-logo,
.navbar-logo a {
  width: 100%;
  display: block;
  line-height: 0;
}

.navbar-logo .img-fluid {
  width: 100%;
  max-height: 350px !important;
  object-fit: cover;
  object-position: center;
}

.navbar-logo {
  max-width: 100% !important;
  padding-bottom: 0;
  margin: 1rem auto 0;
}

/* Em telas grandes o banner acompanha a largura do conteúdo (1140px);
   o azul do cabeçalho continua de ponta a ponta. */
@media (min-width: 1200px) {
  .navbar-logo {
    max-width: var(--content-width) !important;
  }
}

/* 991.98px = abaixo do breakpoint lg do Bootstrap (menu colapsado).
   Antes era 1024px, o que deixava 992-1024px com menu de desktop mas sem banner no topo. */
@media (max-width: 991.98px) {
  .navbar {
    justify-content: flex-end;
  }

  .navbar-brand,
  .navbar-logo {
    display: none;
  }
}

/* =============================
   MENUS: UM ÚNICO TAMANHO DE FONTE
   Altere só esta variável para mudar o menu inteiro.
   ============================= */

:root {
  --menu-font-size: 15px;
}

#primaryNav .nav-link,
#primaryNav .dropdown-item,
#primaryNav-userNav .nav-link,
#userNav .nav-link,
#userNav .dropdown-item,
#languageSmallNav .btn,
#languageSmallNav .dropdown-item,
#languageLargeNav .btn,
#languageLargeNav .dropdown-toggle,
#languageLargeNav .dropdown-item,
#languageToggleMenulanguageSmallNav,
#languageToggleMenulanguageLargeNav,
.navbar-nav .nav-link,
.navbar-nav .dropdown-item,
.dropdown-menu .dropdown-item {
  font-size: var(--menu-font-size) !important;
}

/* =============================
   MENUS: ESPAÇAMENTO IGUAL EM TODAS AS LARGURAS (>= 992px)
   Os itens ficam centralizados e juntos (nada de space-around espalhando).
   O respiro lateral de cada item encolhe de forma contínua em telas médias
   (de 12px para 8.8px) só o necessário para os 7 itens caberem.
   ============================= */

:root {
  --menu-band: var(
    --content-width
  ); /* idioma e "Acesso" alinham com o banner e o conteúdo */
  --menu-pad-x: clamp(8.8px, calc((100vw - 900px) / 14), 12px);
}

@media (min-width: 992px) {
  .navbar {
    padding-left: 0;
    padding-right: 0;
  }

  #primaryNav {
    justify-content: center;
  }

  #primaryNav .nav-link {
    padding-left: var(--menu-pad-x);
    padding-right: var(--menu-pad-x);
  }

  .language-toggle {
    left: max(1rem, calc((100% - var(--menu-band)) / 2 + 1rem));
  }

  #userNav {
    right: max(1rem, calc((100% - var(--menu-band)) / 2 + 1rem));
  }
}

/* =============================
   MENUS: CORES E ESTADOS
   ============================= */

.nav-item .nav-link {
  color: white !important;
  border: 1px solid transparent; /* evita o "pulo" de 2px ao passar o mouse */
}

.nav-item .nav-link:hover {
  border: 1px solid white !important;
}

.nmi_type_remote_url .nav-link {
  background: var(--green);
  color: var(--green-dark) !important;
  font-weight: bold;
}

/* o hover antigo (#83a229a1, semi-transparente) misturava com o azul do menu e perdia contraste */
.nmi_type_remote_url .nav-link:hover {
  color: var(--green-dark) !important;
  background: var(--green-hover) !important;
}

.nmi_type_user_login > a,
.nmi_type_user_register > a {
  color: white;
}

#languageToggleMenulanguageSmallNav,
#languageToggleMenulanguageSmallNav:hover,
#languageToggleMenulanguageSmallNav:focus,
#languageToggleMenulanguageLargeNav {
  color: white; /* o ::hover original era inválido */
}

.dropdown-item {
  color: white !important;
}

/* =============================
   DROPDOWN
   Desktop (>= 992px): abre ao passar o mouse, ao focar com o teclado
   ou ao tocar (classe .show do Bootstrap).
   Mobile (< 992px): comportamento padrão do Bootstrap, empilhado no menu.
   ============================= */

@media (min-width: 992px) {
  .nav-item.dropdown {
    position: relative !important;
  }

  .nav-item.dropdown .dropdown-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background-color: #104e8f !important;
    min-width: 250px !important;
    max-width: 300px !important;
    z-index: 9999 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4) !important;
    border: none !important;
    border-radius: 0 !important;
    flex-direction: column !important;
    white-space: normal !important;
  }

  .nav-item.dropdown:hover .dropdown-menu,
  .nav-item.dropdown:focus-within .dropdown-menu,
  .nav-item.dropdown .dropdown-menu.show {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* Mobile: alvos de toque de pelo menos 44px (item 7) e submenu recuado */
@media (max-width: 991.98px) {
  .navbar-nav .dropdown-menu .dropdown-item {
    padding-left: 2rem !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  #primaryNav .nav-link,
  #primaryNav-userNav .nav-link {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  #languageSmallNav .btn,
  .navbar-toggler {
    min-height: 44px;
    min-width: 44px;
  }
}

.dropdown-menu .dropdown-item {
  display: block !important;
  width: 100% !important;
  padding: 10px 15px !important;
  color: white !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  white-space: normal !important;
  background-color: transparent !important;
  box-sizing: border-box !important;
}

.dropdown-menu .dropdown-item:hover {
  background-color: var(--green) !important;
  color: var(--green-dark) !important;
}

/* =============================
   PÁGINAS DE TEXTO: MAIS LARGURA
   "Sobre a Revista", páginas personalizadas (políticas, diretrizes...) e
   "Equipe editorial" ficavam presas na coluna col-md-8 do Bootstrap (760px;
   só 468px de texto ao lado do menu "Nesta página").
   Mude --page-width para ajustar: 1000px = texto confortável,
   1140px = largura total do site.
   ============================= */

:root {
  --page-width: 1000px;
}

@media (min-width: 768px) {
  .page-about .row.justify-content-md-center > .col-md-8,
  .page-custom .row.justify-content-md-center > .col-md-8,
  .page-editorial-team .row.justify-content-md-center > .col-md-8 {
    flex: 0 0 100%;
    max-width: var(--page-width);
  }
}

/* =============================
   RODAPÉ
   ============================= */

.site-footer {
  background-color: #104e8f;
}

.site-footer-content > .row {
  display: grid;
  grid-template-columns: 1fr;
}

@media (max-width: 400px) {
  .site-footer-content > div:first-child {
    flex-direction: column;
  }

  .site-footer-content > div:first-child > div {
    width: 100% !important;
  }

  .site-footer-content > div:first-child > div:nth-child(2) {
    display: none !important;
  }
}

/* =============================
   BLOCOS DA SIDEBAR
   ============================= */

.block_make_submission {
  border-radius: 8px;
}

.block_make_submission_link {
  border-radius: 8px;
}

#customblock-indexadores {
  background: white;
  width: 100% !important;
  color: var(--green-text);
  border-radius: 0px;
  margin-top: 4rem !important;
}

#customblock-indexadores .content {
  overflow: hidden;
  width: 100%;
}

@keyframes scrollIndexadores {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* A animação é aplicada inline no HTML do bloco, por isso o !important.
   Pausa ao passar o mouse e respeita quem desativou animações no sistema. */
#customblock-indexadores:hover [style*="scrollIndexadores"] {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  #customblock-indexadores [style*="scrollIndexadores"] {
    animation: none !important;
  }

  #customblock-indexadores .content > div > div {
    overflow-x: auto !important; /* sem animação, dá para rolar os logos manualmente */
  }
}

/* =============================
   RESUMO DE ARTIGO
   ============================= */

.article-summary {
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;
  padding: 1rem; /* mobile; 2rem a partir de 768px (regra abaixo) */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); /* era 10px 10px 5px com 75% de opacidade */
}

.article-summary .article-summary-authors {
  order: 2;
}

.article-summary .article-summary-title {
  order: 1;
}

/* Ordem do cartão: título, autores, data, páginas, DOI, botões.
   Data e páginas só aparecem se o template do tema imprimir esses campos; sem
   um "order" próprio eles cairiam no 0 e subiriam para ACIMA do título. */
.article-summary .article-summary-date {
  order: 3;
  margin-top: 0.25rem;
  font-size: 14px;
  font-family: inherit;
  color: #757575;
}

.article-summary .article-summary-pages {
  order: 4;
  font-size: 14px;
  color: #757575;
}

.article-summary .article-summary-doi {
  background: #104e8f;
  width: fit-content;
  padding: 0 0.25rem;
  margin-top: 0.5rem;
  order: 5;
}

.article-summary .article-summary-doi > a {
  color: white;
}

.article-summary .article-summary-galleys {
  order: 6;
}

.article-summary .article-summary-galleys a {
  border-radius: 8px;
}

@media (min-width: 768px) {
  .article-summary {
    padding: 2rem;
  }
}

/* =============================
   TIPOGRAFIA GLOBAL
   ============================= */

body {
  font-family: Roboto, sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
a,
button {
  font-family: Roboto, sans-serif !important;
}