/* =========================================================================
   curso-v2.css — identidade visual v2 aplicada às páginas de curso
   (engenharia-eletrica.html e energias-renovaveis.html).

   Diferente do resto do site, estas páginas são CLARAS e cada uma tem sua
   própria cor de curso (azul na Elétrica, verde nas Renováveis). Em vez de
   forçar o vidro escuro da home — que deixaria o texto ilegível em fundo
   claro — este arquivo traduz a mesma linguagem visual para o tema claro e
   lê a cor de destaque de uma variável, definida por cada página:

       body { --curso-accent: #00509e; }   (ver cada .html)

   Carregar SEMPRE depois de css/<curso>.css, porque sobrescreve.
   ========================================================================= */

:root {
  --cv-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body[class*="v2-curso"] {
  /* valores neutros de fallback; cada página sobrescreve --curso-accent */
  --curso-accent: #00509e;
  --curso-accent-soft: rgba(0, 80, 158, 0.1);
  --curso-accent-line: rgba(0, 80, 158, 0.22);
  --cv-surface: #ffffff;
  --cv-ink: #12181f;
  --cv-ink-soft: #5b6673;
  --cv-shadow: 0 20px 45px -26px rgba(9, 30, 45, 0.3);
}

/* =========================================================================
   TIPOGRAFIA — mesma hierarquia do resto do site
   ========================================================================= */
body[class*="v2-curso"] h1,
body[class*="v2-curso"] h2,
body[class*="v2-curso"] h3,
body[class*="v2-curso"] .section-title,
body[class*="v2-curso"] .text-display {
  font-family: "Plus Jakarta Sans", sans-serif;
  letter-spacing: -0.02em;
}
body[class*="v2-curso"] .page-nav-link,
body[class*="v2-curso"] .area-tag,
body[class*="v2-curso"] .coordinator-tag {
  font-family: "Space Grotesk", sans-serif;
}

/* Título de seção com a "régua" de acento — mesmo recurso do .v2-kicker */
body[class*="v2-curso"] .section-title {
  position: relative;
  font-weight: 700;
  color: var(--cv-ink);
}
body[class*="v2-curso"] .section-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-top: 14px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--curso-accent), transparent);
}
body[class*="v2-curso"] .text-center .section-title::after,
body[class*="v2-curso"] .section-title.text-center::after {
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, transparent, var(--curso-accent), transparent);
}

/* =========================================================================
   NAVBAR — pílula flutuante de vidro, versão clara

   ATENÇÃO à estrutura (partials/header-curso.html): o header do curso tem
   DUAS linhas dentro de um contêiner fixo:

       <header id="header-container">        <- é ESTE que vira a pílula
         <div id="header">      ... logo + ferramentas   (linha 1)
         <nav id="page-nav-bar"> ... links das seções    (linha 2)
       </header>

   Transformar só o #header em pílula deixaria a linha 2 solta atrás dela.
   Por isso a pílula é o #header-container, e as duas linhas internas ficam
   transparentes pra formar um único bloco de vidro.
   ========================================================================= */
body[class*="v2-curso"] #header-container {
  top: 14px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 28px));
  border-radius: 20px;
  overflow: hidden; /* as bordas das linhas internas não vazam do canto arredondado */
  /* Vidro ACINZENTADO/escuro, não claro: as logos dos cursos são brancas
     (feitas pra navbar escura) e sumiriam contra um fundo quase-branco.
     Essa também é a mesma linguagem de vidro escuro do resto do site. */
  background-color: rgba(17, 24, 33, 0.78);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 38px -18px rgba(9, 30, 45, 0.55);
  transition: background-color 0.4s ease, box-shadow 0.4s ease,
    border-color 0.4s ease, left 0.4s var(--cv-ease), transform 0.4s var(--cv-ease),
    width 0.4s var(--cv-ease), border-radius 0.4s var(--cv-ease);
}

/* As duas linhas internas perdem o fundo escuro próprio e viram parte do
   mesmo vidro. (Sobrescreve as classes bg-gray-900 / bg-gray-800 do HTML.) */
body[class*="v2-curso"] #header,
body[class*="v2-curso"] #page-nav-bar {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Os atalhos (Sobre o Curso, Corpo Docente...) não ficam numa segunda
   fileira/"cartão" grudado embaixo — viram uma camada absoluta sobreposta
   à MESMA fileira da logo, centralizada no espaço vazio entre a logo e as
   ferramentas (accessibilidade/idioma). Só faz sentido em telas md+, que é
   quando o #page-nav-bar deixa de estar com "hidden" (classe do Tailwind). */
@media (min-width: 768px) {
  body[class*="v2-curso"] #page-nav-bar {
    position: absolute;
    inset: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    pointer-events: none; /* a área vazia ao redor dos links não intercepta cliques */
    /* #header (linha 1) tem z-[10000] próprio (classe Tailwind) — sem um
       z-index maior aqui os links ficam visualmente por cima mas o clique
       é capturado pelo #header, que pinta acima por causa do z-index dele. */
    z-index: 10001;
  }
  body[class*="v2-curso"] #page-nav-list {
    pointer-events: auto;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Pílula mais enxuta: a linha 1 vinha com h-20 (80px), que somada à linha 2
   deixaria a navbar alta demais pra algo que flutua sobre o conteúdo. */
body[class*="v2-curso"] #header > .container {
  height: 62px !important;
}
body[class*="v2-curso"] #course-logo-img {
  height: 38px;
  /* O logo vem com "brightness-0 invert" (fica BRANCO) porque a navbar
     original era escura — mantemos a cor original (branca) do arquivo,
     que agora tem contraste de sobra contra o vidro escuro/acinzentado. */
  filter: none !important;
}

/* Logo do NUFPERPI, no lugar do antigo botão de texto "Voltar ao NUFPERPI" */
body[class*="v2-curso"] .v2c-home-logo {
  height: 28px;
  width: 28px;
  object-fit: contain;
  border-radius: 8px;
  opacity: 0.88;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
body[class*="v2-curso"] .v2c-home-link:hover .v2c-home-logo {
  opacity: 1;
  transform: scale(1.08);
}

/* =========================================================================
   NAVBAR COMPACTA — minimiza ao rolar a página (mesmo padrão da home:
   ver .v2-header-compact em css/index-v2.css), mas disparada por posição
   de scroll normal (não por "slide atual", que não existe fora da home).
   No estado compacto some tudo, menos a logo do curso.
   ========================================================================= */
body[class*="v2-curso"] #header-container.course-header-compact {
  left: 20px;
  transform: none;
  width: auto;
  border-radius: 999px;
  background-color: rgba(12, 18, 26, 0.85);
  cursor: pointer;
}
body[class*="v2-curso"] #header-container.course-header-compact #header > .container {
  height: 54px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
body[class*="v2-curso"] #header-container.course-header-compact #course-logo-img {
  height: 30px;
}
body[class*="v2-curso"] #header-container.course-header-compact .v2c-toolbar,
body[class*="v2-curso"] #header-container.course-header-compact #page-nav-bar {
  display: none !important;
}

/* O header fixo sai do fluxo: sem isto o hero subiria pra trás dele.
   O hero é full-bleed de propósito (a navbar flutua por cima, como na
   home), então o respiro vai só nas páginas internas de conteúdo. */
body[class*="v2-curso"] #header-wrapper {
  height: 0;
}

/* Links e ícones: navbar agora é vidro escuro/acinzentado, então o texto
   claro que já vinha no HTML (text-gray-300 / text-white) funciona bem —
   só precisamos garantir um branco consistente e o realce de hover na cor
   do curso. Escopo no #header-container porque os links de seção ficam na
   linha 2. */
body[class*="v2-curso"] #header-container a,
body[class*="v2-curso"] #header-container .course-nav-link,
body[class*="v2-curso"] #header-container .dropdown-toggle,
body[class*="v2-curso"] #header-container #mobile-menu-button {
  color: rgba(255, 255, 255, 0.82) !important;
  transition: color 0.25s ease, background-color 0.25s ease;
}
body[class*="v2-curso"] #header-container .course-nav-link,
body[class*="v2-curso"] #header-container .dropdown-toggle {
  border-radius: 10px;
}
body[class*="v2-curso"] #header-container a:hover,
body[class*="v2-curso"] #header-container .dropdown-toggle:hover {
  color: #fff !important;
  background-color: color-mix(in srgb, var(--curso-accent) 45%, transparent);
}
/* Atalhos de seção (Sobre o Curso, Corpo Docente...): sem troca de cor/fundo
   no hover — o texto fica branco sempre, sem "efeito". */
body[class*="v2-curso"] #header-container .course-nav-link,
body[class*="v2-curso"] #header-container .course-nav-link:hover {
  color: #fff !important;
  background-color: transparent !important;
}
/* separador vertical entre logo e ferramentas (vinha bg-gray-700) */
body[class*="v2-curso"] #header-container .bg-gray-700 {
  background-color: rgba(255, 255, 255, 0.14) !important;
}

/* Dropdowns (acessibilidade / idioma): vidro escuro, coerente com a navbar —
   inclusive substitui a regra que estava corrompida em UTF-16 no CSS de
   cada curso e nunca chegava a valer. */
body[class*="v2-curso"] .course-dropdown-menu {
  background-color: rgba(17, 24, 33, 0.94) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 18px 40px -20px rgba(9, 30, 45, 0.55) !important;
}
body[class*="v2-curso"] .course-dropdown-menu a,
body[class*="v2-curso"] .course-dropdown-menu button,
body[class*="v2-curso"] .course-dropdown-menu span {
  color: rgba(255, 255, 255, 0.85) !important;
}
body[class*="v2-curso"] .course-dropdown-menu a:hover,
body[class*="v2-curso"] .course-dropdown-menu button:hover {
  background-color: color-mix(in srgb, var(--curso-accent) 35%, transparent) !important;
  color: #fff !important;
}

/* Navegação lateral da página */
body[class*="v2-curso"] .page-nav-link {
  border-radius: 10px;
  transition: color 0.25s ease, background-color 0.25s ease;
}
body[class*="v2-curso"] .page-nav-list a:hover,
body[class*="v2-curso"] .page-nav-link:hover {
  color: #fff !important;
  background-color: color-mix(in srgb, var(--curso-accent) 45%, transparent);
}

/* =========================================================================
   CARDS — mesma linguagem da home (borda fina, barra de acento no topo que
   acende no hover, elevação suave), traduzida pro tema claro.
   ========================================================================= */
body[class*="v2-curso"] .glass-card,
body[class*="v2-curso"] .info-card,
body[class*="v2-curso"] .area-card,
body[class*="v2-curso"] .faculty-card,
body[class*="v2-curso"] .accordion-item {
  position: relative;
  overflow: hidden;
  background: var(--cv-surface);
  border: 1px solid rgba(9, 30, 45, 0.09);
  border-radius: 20px;
  box-shadow: var(--cv-shadow);
  transition: transform 0.35s var(--cv-ease), box-shadow 0.35s var(--cv-ease),
    border-color 0.35s var(--cv-ease);
}
body[class*="v2-curso"] .glass-card::before,
body[class*="v2-curso"] .info-card::before,
body[class*="v2-curso"] .area-card::before,
body[class*="v2-curso"] .faculty-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--curso-accent), transparent);
  opacity: 0.3;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 0.35s var(--cv-ease), opacity 0.35s var(--cv-ease);
}
body[class*="v2-curso"] .glass-card:hover::before,
body[class*="v2-curso"] .info-card:hover::before,
body[class*="v2-curso"] .area-card:hover::before,
body[class*="v2-curso"] .faculty-card:hover::before {
  transform: scaleX(1);
  opacity: 1;
}
body[class*="v2-curso"] .glass-card:hover,
body[class*="v2-curso"] .info-card:hover,
body[class*="v2-curso"] .area-card:hover,
body[class*="v2-curso"] .faculty-card:hover {
  transform: translateY(-6px);
  border-color: var(--curso-accent-line);
  box-shadow: 0 28px 55px -28px rgba(9, 30, 45, 0.45);
}

/* Ícone das áreas: selo com gradiente da cor do curso */
body[class*="v2-curso"] .area-icon {
  background: linear-gradient(135deg, var(--curso-accent), color-mix(in srgb, var(--curso-accent) 55%, #ffffff)) !important;
  color: #fff !important;
  border-radius: 14px;
  box-shadow: 0 10px 22px -12px var(--curso-accent);
}

/* Etiquetas */
body[class*="v2-curso"] .area-tag,
body[class*="v2-curso"] .coordinator-tag {
  background: var(--curso-accent-soft) !important;
  color: var(--curso-accent) !important;
  border: 1px solid var(--curso-accent-line);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Links de documento: viram "tiles" como os da página do GIPERTS */
body[class*="v2-curso"] .document-link {
  border-radius: 16px;
  border: 1px solid rgba(9, 30, 45, 0.1);
  background: var(--cv-surface);
  transition: transform 0.25s var(--cv-ease), border-color 0.25s ease,
    box-shadow 0.25s ease;
}
body[class*="v2-curso"] .document-link:hover {
  transform: translateY(-3px);
  border-color: var(--curso-accent);
  box-shadow: 0 16px 34px -20px rgba(9, 30, 45, 0.4);
}

/* Botões */
body[class*="v2-curso"] .back-to-home-btn,
body[class*="v2-curso"] .btn-secondary-light {
  border-radius: 12px;
  transition: transform 0.25s var(--cv-ease), box-shadow 0.25s ease;
}
body[class*="v2-curso"] .back-to-home-btn:hover,
body[class*="v2-curso"] .btn-secondary-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px var(--curso-accent);
}

/* Corrige o contraste do card de docente: o HTML/CSS original foi feito pra
   um card com fundo ESCURO (nome em text-white, descrição em text-gray-300),
   mas aqui em cima o card virou branco — sem isto o nome fica branco sobre
   fundo branco, ilegível. */
body[class*="v2-curso"] .faculty-card h3,
body[class*="v2-curso"] .faculty-card .text-white {
  color: var(--cv-ink) !important;
}
body[class*="v2-curso"] .faculty-card .text-gray-300,
body[class*="v2-curso"] .faculty-card .text-gray-400 {
  color: var(--cv-ink-soft) !important;
}
body[class*="v2-curso"] .faculty-card-img {
  border-color: var(--curso-accent-line) !important;
}
body[class*="v2-curso"] .faculty-card:hover .faculty-card-img {
  border-color: var(--curso-accent) !important;
}
body[class*="v2-curso"] .faculty-social-link {
  background-color: var(--curso-accent-soft) !important;
  color: var(--curso-accent) !important;
}
body[class*="v2-curso"] .faculty-social-link:hover {
  background: var(--curso-accent) !important;
  color: #fff !important;
}
body[class*="v2-curso"] .description-toggle-btn {
  border-color: var(--curso-accent-line) !important;
  color: var(--cv-ink-soft) !important;
}
body[class*="v2-curso"] .description-toggle-btn:hover {
  background-color: var(--curso-accent-soft) !important;
  color: var(--curso-accent) !important;
}

/* Botões de navegação do carrossel de docentes */
body[class*="v2-curso"] .faculty-nav-btn {
  border: 1px solid var(--curso-accent-line);
  background: rgba(255, 255, 255, 0.92);
  color: var(--curso-accent);
  backdrop-filter: blur(8px);
  transition: transform 0.25s var(--cv-ease), background-color 0.25s ease;
}
body[class*="v2-curso"] .faculty-nav-btn:hover {
  background: var(--curso-accent);
  color: #fff;
  transform: scale(1.08);
}

/* =========================================================================
   RODAPÉ — mesmo tom escuro sólido usado no resto do site, pra fechar a
   página com a mesma âncora visual da home.
   ========================================================================= */
body[class*="v2-curso"] #footer-wrapper footer {
  background: #0c1512 !important;
  border-top: 1px solid var(--curso-accent-line) !important;
}

@media (prefers-reduced-motion: reduce) {
  body[class*="v2-curso"] .glass-card,
  body[class*="v2-curso"] .info-card,
  body[class*="v2-curso"] .area-card,
  body[class*="v2-curso"] .faculty-card,
  body[class*="v2-curso"] .document-link,
  body[class*="v2-curso"] #header {
    transition: none;
  }
  body[class*="v2-curso"] .glass-card:hover,
  body[class*="v2-curso"] .info-card:hover,
  body[class*="v2-curso"] .area-card:hover,
  body[class*="v2-curso"] .faculty-card:hover,
  body[class*="v2-curso"] .document-link:hover {
    transform: none;
  }
}