/*
Theme Name: Tema Ufopa
Theme URI: https://ufopa.edu.br
Author: CTIC - Ufopa
Author URI: https://ufopa.edu.br
Description: Tema institucional da Universidade Federal do Oeste do Pará, baseado no Design System GOV.BR com identidade visual da Ufopa.
Version: 1.60
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tema-ufopa
Tags: government, institutional, accessibility, responsive
*/

/* Os estilos principais estão em assets/css/ds-ufopa.min.css,
   carregados via functions.php. Este arquivo existe para
   registro obrigatório do tema no WordPress. */

/* ==========================================================================
   MENU LATERAL (br-menu off-canvas) — indentação por nível
   O GOV.BR DS aplica uma regra única e "achatada" para todo item de submenu
   (.menu-folder>.menu-item+ul .menu-item{padding-left:var(--spacing-scale-2x)}),
   então níveis 2 e 3 ficam com o mesmo recuo do nível 1. Aqui sobrescrevemos
   com um recuo progressivo por profundidade real da árvore.
   ========================================================================== */
.br-menu .menu-body .menu-folder > .menu-item + ul > li > .menu-item {
  padding-left: var(--spacing-scale-5x) !important; /* nível 1 */
}

.br-menu .menu-body .menu-folder > .menu-item + ul > li > ul > li > .menu-item {
  padding-left: var(--spacing-scale-7x) !important; /* nível 2 */
}

.br-menu .menu-body .menu-folder > .menu-item + ul > li > ul > li > ul > li > .menu-item {
  padding-left: var(--spacing-scale-9x) !important; /* nível 3 */
}

/* ==========================================================================
   MENU LATERAL (br-menu off-canvas) — cor do texto no hover
   O GOV.BR DS usa var(--interactive) tanto no fundo quanto no texto em
   estados diferentes, e ainda soma um gradiente de overlay + uma regra
   hardcoded (#1f1f1f) — o resultado é texto e fundo com a mesma cor,
   texto some. Fixamos os valores explicitamente e neutralizamos o overlay.
   ========================================================================== */
.br-menu a.menu-item:not(:disabled):hover,
.br-menu .menu-panel a:hover,
.br-menu .menu-panel button:hover {
  background: #f0f0ec !important;
  background-image: none !important;
  color: #0f6460 !important;
}

.br-menu a.menu-item:not(:disabled):hover .content,
.br-menu a.menu-item:not(:disabled):hover .support,
.br-menu .menu-panel a:hover .content,
.br-menu .menu-panel a:hover .support {
  color: #0f6460 !important;
}

/* ==========================================================================
   MENU LATERAL (br-menu off-canvas) — padrão de cores do Figma (v1.35)
   - Item principal retraído (e links diretos): fundo #0f6460, texto branco
   - Item principal expandido: fundo #123131, seta na cor de destaque
   - Subitens do menu expandido: fundo #f0f0ec, texto #0f6460
   - Subitens de primeiro nível em negrito
   Escopo restrito a .menu-body (rodapé do menu não é afetado) e desativado
   no modo alto contraste, que mantém suas próprias regras.
   ========================================================================== */
.br-menu {
  --ufopa-menu-retraido: #0f6460;
  --ufopa-menu-expandido: #123131;
  --ufopa-menu-subitem: #f0f0ec;
  --ufopa-menu-texto-claro: #ffffff;
  --ufopa-menu-texto-subitem: #0f6460;
  --ufopa-menu-divisor-subitem: rgba(0, 0, 0, 0.35);
}

/* Itens de nível principal — retraídos e links diretos */
body:not(.high-contrast) .br-menu .menu-body > a.menu-item,
body:not(.high-contrast) .br-menu .menu-body > .menu-folder > a.menu-item {
  background: var(--ufopa-menu-retraido) !important;
  color: var(--ufopa-menu-texto-claro) !important;
}

body:not(.high-contrast) .br-menu .menu-body > a.menu-item .content,
body:not(.high-contrast) .br-menu .menu-body > a.menu-item .support,
body:not(.high-contrast) .br-menu .menu-body > .menu-folder > a.menu-item .content,
body:not(.high-contrast) .br-menu .menu-body > .menu-folder > a.menu-item .support {
  color: var(--ufopa-menu-texto-claro) !important;
}

/* Negrito em todos os subitens de primeiro nível (itens principais sem negrito) */
.br-menu .menu-body .drop-menu > ul > li > a.menu-item .content {
  font-weight: var(--font-weight-bold, 700);
}

/* Item principal expandido */
body:not(.high-contrast) .br-menu .menu-body > .drop-menu.active > a.menu-item {
  background: var(--ufopa-menu-expandido) !important;
}

body:not(.high-contrast) .br-menu .menu-body > .drop-menu.active > a.menu-item .support,
body:not(.high-contrast) .br-menu .menu-body > .drop-menu.active > a.menu-item .support i {
  color: var(--secondary-color-ufopa) !important;
}

/* Subitens do menu expandido */
body:not(.high-contrast) .br-menu .menu-body .drop-menu > ul {
  background: var(--ufopa-menu-subitem) !important;
}

body:not(.high-contrast) .br-menu .menu-body .drop-menu > ul a.menu-item {
  background: var(--ufopa-menu-subitem) !important;
  color: var(--ufopa-menu-texto-subitem) !important;
  border-bottom: 1px solid var(--ufopa-menu-divisor-subitem);
}

body:not(.high-contrast) .br-menu .menu-body .drop-menu > ul a.menu-item .content,
body:not(.high-contrast) .br-menu .menu-body .drop-menu > ul a.menu-item .support {
  color: var(--ufopa-menu-texto-subitem) !important;
}

/* Hover: escurecimento leve sobre as novas cores */
body:not(.high-contrast) .br-menu .menu-body > a.menu-item:hover,
body:not(.high-contrast) .br-menu .menu-body > .menu-folder > a.menu-item:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)) !important;
}

body:not(.high-contrast) .br-menu .menu-body .drop-menu > ul a.menu-item:hover {
  background-image: linear-gradient(rgba(15, 100, 96, 0.10), rgba(15, 100, 96, 0.10)) !important;
}

/* ==========================================================================
   RODAPÉ — árvore com ícones de pasta/seta (estilo do mapa institucional)
   Pasta para item com filhos, seta para item-folha, em qualquer profundidade.
   ========================================================================== */
.footer-menu-tree,
.footer-menu-sub {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.footer-menu-sub {
  padding-left: var(--spacing-scale-3x, 24px);
  margin-top: var(--spacing-scale-half, 4px);
}

.footer-menu-tree > li,
.footer-menu-sub > li {
  padding: var(--spacing-scale-half, 4px) 0;
}

.footer-menu-tree a,
.footer-menu-sub a {
  display: flex;
  align-items: center;
  color: var(--text-color, inherit);
  text-decoration: none;
  font-family: var(--font-family-base);
}

.footer-menu-tree a:hover,
.footer-menu-sub a:hover {
  color: var(--secondary-color-ufopa);
  text-decoration: underline;
}

.footer-menu-icone {
  width: 16px;
  flex-shrink: 0;
  margin-right: var(--spacing-scale-half, 8px);
  color: var(--secondary-color-ufopa);
  font-size: 0.85em;
}

.footer-menu-icone.folha {
  font-size: 0.65em;
  margin-left: 2px;
}

.footer-menu-pasta > a {
  font-weight: var(--font-weight-semi-bold, 600);
}

/* ==========================================================================
   MENU LATERAL (br-menu off-canvas) — submenu em acordeão com slide-down
   O GOV.BR DS alterna o submenu com display:none/block (sem transição
   possível). Substituímos por max-height + overflow, controlado por hover
   (e por clique/foco, via JS, para teclado/toque).
   ========================================================================== */
.br-menu .menu-body .drop-menu > ul {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-fast, 0.3s) var(--animation-ease, ease);
}

/* Sem JS: sem teto de altura. Com JS, a altura é definida inline pelo
   ufopa-main.js (scrollHeight), mantendo a animação sem cortar itens. */
.br-menu .menu-body .drop-menu.active > ul {
  max-height: none;
}

/* Item pai não deve mudar de cor quando o submenu está aberto — o GOV.BR DS
   aplica um fundo escuro (var(--active)) e sobrescreve a variável de texto
   (--interactive), deixando o texto quase invisível. Neutralizamos aqui. */
.br-menu .menu-body .drop-menu.active > .menu-item:not(:hover) {
  background-color: transparent !important;
  --interactive: var(--interactive-light) !important;
}

/* ==========================================================================
   CONTEÚDO — corrige restrição de largura do GOV.BR DS
   O GOV.BR DS define .textos-comum{width:75%;padding-right:20px}, pensado
   pra um layout onde essa classe já ocupa a coluna inteira. Aqui, quem
   controla a largura da coluna é o grid (col-md-8/col-lg-9), então os 75%
   sobram como um vão em branco antes da barra lateral, independente do
   padding da coluna. Fixamos 100% pra ocupar a coluna corretamente.
   ========================================================================== */
.textos-comum {
  width: 100% !important;
  padding-right: var(--spacing-scale-4x, 32px) !important;
}

/* ==========================================================================
   WIDGET LATERAL — cards de "Últimas Notícias" e "Categorias"
   ========================================================================== */

/* Remove o efeito de sombra dos cards de notícia (padrão e hover) */
.card-ufopa,
.card-ufopa:hover {
  box-shadow: none !important;
}

/* Espaçamento entre um card de notícia e outro */
.card-ufopa {
  margin-bottom: var(--spacing-scale-2x, 16px) !important;
}

.card-ufopa:last-of-type {
  margin-bottom: 0 !important;
}

/* Cards de categoria na barra lateral (widget de notícias/categorias)
   ocupando a largura inteira da coluna, em vez de 50% (que deixava metade
   do espaço em branco). Restrito à barra lateral para não afetar o grid
   de 6 colunas usado na página inicial. */
.barra-lateral .card-categoria {
  flex: 0 0 100% !important;
  width: 100% !important;
}

/* ==========================================================================
   CARD DE EQUIPE (home) — ícones de redes sociais
   ========================================================================== */
.card-equipe-redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-scale-half, 8px);
  margin-top: var(--spacing-scale-half, 8px);
}

.card-equipe-redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tertiary-color-ufopa);
  color: var(--primary-color-ufopa);
  font-size: 1.1em;
  transition: background 0.2s ease, color 0.2s ease;
}

.card-equipe-redes a:hover {
  background: var(--secondary-color-ufopa);
  color: #fff;
}

/* ==========================================================================
   PÁGINA "PERFIS DA EQUIPE" — seções com grid de 4 colunas
   ========================================================================== */
.equipe-secao {
  margin-top: var(--spacing-scale-6x, 48px);
}

.equipe-secao:first-child {
  margin-top: var(--spacing-scale-3x, 24px);
}

.equipe-secao-titulo {
  font-weight: var(--font-weight-semi-bold, 600);
  color: var(--quaternary-color-ufopa);
}

.equipe-secao-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-scale-3x, 24px);
  margin-top: var(--spacing-scale-3x, 24px);
}

@media (max-width: 1200px) {
  .equipe-secao-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .equipe-secao-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .equipe-secao-grid {
    grid-template-columns: 1fr;
  }
}

.card-perfil-equipe {
  display: flex;
  flex-direction: column;
  background: var(--background);
  border: 1px solid var(--gray-warm-10, #e5e5e5);
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
}

.card-perfil-equipe-foto {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.card-perfil-equipe-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-perfil-equipe-info {
  padding: var(--spacing-scale-3x, 24px);
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Nome e cargo — mesma configuração usada no card da home, pra manter
   consistência visual entre os dois lugares onde a equipe aparece. */
.card-equipe-nome,
.card-perfil-equipe-nome {
  font-weight: var(--font-weight-semi-bold, 600);
  font-size: 1rem;
  margin: 0 0 2px;
  color: var(--quaternary-color-ufopa);
}

.card-equipe-cargo,
.card-perfil-equipe-cargo {
  font-size: 0.85rem;
  font-weight: 400;
  margin: 0 0 var(--spacing-scale-2x, 16px);
  color: var(--secondary-color-ufopa);
}

.card-perfil-equipe-link-curriculo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin: 0 0 var(--spacing-scale-2x, 16px);
  padding: 0;
  border: none;
  background: none;
  color: var(--secondary-color-ufopa);
  font-size: 0.85rem;
  font-weight: var(--font-weight-semi-bold, 600);
  text-decoration: underline;
  cursor: pointer;
}

.card-perfil-equipe-link-curriculo:hover {
  color: var(--quaternary-color-ufopa);
}

.card-perfil-equipe .card-equipe-redes {
  margin-top: auto;
}

/* ── Tema Escuro (Alto Contraste) — corrige contraste dos cards de Equipe ──
   Em alto contraste, uma regra geral força a cor de <p>/<span>/<a> para
   branco (--text-color), mas os cards de Equipe mantinham fundo claro
   (var(--background) / var(--pure-0)), deixando o texto branco sobre
   fundo branco. Damos aos cards de Equipe o mesmo tratamento escuro já
   usado em .card-ufopa (notícias). */
body.high-contrast .card-equipe,
body.high-contrast .card-perfil-equipe {
  background: #111 !important;
  border: 1px solid #fff !important;
}
body.high-contrast .card-equipe-nome,
body.high-contrast .card-perfil-equipe-nome {
  color: #fff !important;
}
body.high-contrast .card-equipe-cargo,
body.high-contrast .card-perfil-equipe-cargo {
  color: #ccc !important;
}
body.high-contrast .card-equipe-sem-foto {
  background: #222 !important;
  color: #fff !important;
}
body.high-contrast .ufopa-modal-curriculo-conteudo {
  background: #111 !important;
  border: 1px solid #fff !important;
}
body.high-contrast .ufopa-modal-curriculo-bio {
  color: #ccc !important;
}

/* ==========================================================================
   POP-UP DE CURRÍCULO — card completo (foto, minicurrículo, redes)
   ========================================================================== */
.ufopa-modal-curriculo {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-scale-3x, 24px);
  background: rgba(0, 0, 0, 0.6);
}

.ufopa-modal-curriculo[hidden] {
  display: none;
}

body.ufopa-modal-aberto {
  overflow: hidden;
}

.ufopa-modal-curriculo-conteudo {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--background, #fff);
  border-radius: 8px;
}

.ufopa-modal-fechar {
  position: absolute;
  top: var(--spacing-scale-2x, 12px);
  right: var(--spacing-scale-2x, 12px);
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.ufopa-modal-fechar:hover {
  background: rgba(0, 0, 0, 0.7);
}

.ufopa-modal-curriculo-foto {
  aspect-ratio: 3 / 4;
  max-height: 320px;
  overflow: hidden;
}

.ufopa-modal-curriculo-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ufopa-modal-curriculo-info {
  padding: var(--spacing-scale-3x, 24px);
}

.ufopa-modal-curriculo-bio {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color, #4d4d4d);
  margin: 0 0 var(--spacing-scale-2x, 16px);
}

/* ─── Banner principal: resumo da notícia no lugar da data ────────────── */
.carrossel-inicial .info-subtitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 720px;
}

/* ─── Banner principal: altura mais próxima do layout original do projeto ──
   O componente GOV.BR DS aplica min-height: 400px por padrão, deixando o
   slide muito "esticado" (panorâmico) em telas largas. Aqui aumentamos a
   altura para aproximar da proporção do design original (~20:9). */
.carrossel-inicial .br-carousel {
  --carousel-min-height: 540px;
}

@media (max-width: 1280px) {
  .carrossel-inicial .br-carousel {
    --carousel-min-height: 460px;
  }
}

@media (max-width: 992px) {
  .carrossel-inicial .br-carousel {
    --carousel-min-height: 380px;
  }
}

@media (max-width: 576px) {
  .carrossel-inicial .br-carousel {
    --carousel-min-height: 300px;
  }
}