/* ============================================================================
   Tema visual "Hacker" (branch teste) — inspirado em referência de mercado
   (curso de pentest com estética hacker: fundo preto, verde matrix neon,
   tipografia angulosa). Camada aditiva sobre o styles.css (Bootstrap 5
   vendorizado) — não altera o vendor, só sobrescreve variáveis/estilo.
   ============================================================================ */

:root {
  --hk-bg: #010401;
  --hk-bg-alt: #050d06;
  --hk-card-bg: #081208;
  --hk-green: #00ff41;
  --hk-green-hover: #39ff6a;
  --hk-green-dark: #008f2c;
  --hk-green-deep: #003b00;
  --hk-text: #d7ffd9;
  --hk-text-muted: #6ea672;
  --hk-border: rgba(0, 255, 65, 0.35);

  /* Sobrescreve o Bootstrap vendorizado (styles.css) para casar com o tema. */
  --bs-primary: var(--hk-green-dark);
  --bs-primary-rgb: 0, 143, 44;
  --bs-dark: var(--hk-bg);
  --bs-dark-rgb: 1, 4, 1;
  --bs-body-bg: var(--hk-bg);
  --bs-body-color: var(--hk-text);
  --bs-body-color-rgb: 215, 255, 217;
  --bs-link-color: var(--hk-green);
  --bs-link-hover-color: var(--hk-green-hover);
  --bs-border-color: var(--hk-border);
}

body {
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 255, 65, 0.16), transparent),
              radial-gradient(ellipse 60% 40% at 100% 100%, rgba(0, 255, 65, 0.08), transparent),
              var(--hk-bg);
  /* Rajdhani (condensada/angulosa) é ótima em títulos/botões mas cansa em texto
     corrido; o corpo do texto usa Raleway (mais legível em parágrafos longos). */
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  position: relative;
}

/* Marca-d'água: a própria foto do hero (curso.jpg, já em tom verde) fixa no fundo,
   com vinheta (mask-image) para as bordas sumirem no preto em vez de cortar em
   retângulo — mais "presença" que o ícone simples, mas ainda bem sutil (opacity baixa,
   grayscale) para não brigar com o conteúdo em primeiro plano. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url(/images/curso.jpg?v=2);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  filter: grayscale(0.3) brightness(0.85);
  opacity: 0.12;
  -webkit-mask-image: radial-gradient(ellipse 55% 65% at 78% 45%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 65% at 78% 45%, #000 0%, transparent 72%);
  pointer-events: none;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .card-title {
  font-family: "Gruppo", "Rajdhani", sans-serif;
  letter-spacing: 0.03em;
}

h1, .h1 { text-transform: uppercase; }

/* Navbar */
.navbar.bg-dark {
  background-color: var(--hk-bg-alt) !important;
  border-bottom: 1px solid var(--hk-border);
}

.navbar-brand h2 {
  margin: 0;
  background: linear-gradient(90deg, var(--hk-green-dark), var(--hk-green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--hk-text-muted);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--hk-green);
}

/* Botões — cantos cortados (estilo "terminal/HUD") + gradiente + glow no hover.
   Aplicado em .btn (classe base do Bootstrap) p/ cobrir TODAS as variantes usadas no
   site (primary/outline-primary/outline-dark/outline-secondary/etc.) de forma consistente. */
.btn {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  border-radius: 0 !important;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-family: "Rajdhani", sans-serif;
  transition: box-shadow 0.2s ease, transform 0.15s ease, color 0.2s ease, background 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-sm {
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--hk-green-dark), #00c23c);
  border-color: var(--hk-green-dark);
  color: #01120a;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--hk-green), var(--hk-green-hover));
  border-color: var(--hk-green);
  color: #01120a;
  box-shadow: 0 0 16px rgba(0, 255, 65, 0.65);
  transform: translateY(-1px);
}

.btn-outline-primary {
  color: var(--hk-green);
  border-color: var(--hk-green);
  background: transparent;
}

.btn-outline-primary:hover {
  background-color: var(--hk-green);
  border-color: var(--hk-green);
  color: #01120a;
  box-shadow: 0 0 16px rgba(0, 255, 65, 0.45);
  transform: translateY(-1px);
}

/* Botão "Inscrever e-mail" do rodapé (layout_foot.php) — era um pill branco/creme
   (--bs-btn-bg de styles.css), destoava do tema escuro; alinhado ao mesmo estilo do CTA. */
.btn-submit1 {
  --bs-btn-bg: linear-gradient(135deg, var(--hk-green-dark), #00c23c);
  background: linear-gradient(135deg, var(--hk-green-dark), #00c23c) !important;
  --bs-btn-color: #01120a;
  color: #01120a !important;
  border-color: var(--hk-green-dark) !important;
}

.btn-submit1:hover {
  background: linear-gradient(135deg, var(--hk-green), var(--hk-green-hover)) !important;
  border-color: var(--hk-green) !important;
  box-shadow: 0 0 16px rgba(0, 255, 65, 0.65);
}

/* Cards (páginas públicas) */
.card {
  background-color: var(--hk-card-bg);
  border: 1px solid var(--hk-border);
  color: var(--hk-text);
}

.card:hover {
  border-color: var(--hk-green);
  box-shadow: 0 0 18px rgba(0, 255, 65, 0.25);
}

.card .text-muted { color: var(--hk-text-muted) !important; }

/* styles.css fixa .card-body em --bs-body-color-black (texto escuro p/ card branco);
   nossos cards são escuros, então sobrescreve para o texto claro do tema. */
.card-body {
  color: var(--hk-text);
}

/* Citações (index.php: .citation) — reforça o tom "hacker sem ética". */
.citation {
  color: var(--hk-green-hover);
  font-family: "Rajdhani", monospace;
  border-left: 3px solid var(--hk-green-dark);
  padding-left: 12px;
}

a { color: var(--hk-green); }
a:hover { color: var(--hk-green-hover); }

hr {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, var(--hk-green-dark), var(--hk-green), transparent);
  opacity: 1;
}

/* Badges de acesso/status (cursos/index.php) — reforça o contraste no fundo escuro. */
.badge.bg-success { background-color: var(--hk-green) !important; color: #010401 !important; }
.badge.bg-warning { background-color: #ffb800 !important; color: #010401 !important; }

/* Feature icon (cursos/index.php: .feature) */
.feature.bg-primary {
  background: linear-gradient(135deg, var(--hk-green-dark), var(--hk-green)) !important;
}

/* Rodapé (layout_foot.php): styles.css fixa fundo/texto em cores fixas (#202126/#fff)
   pensadas p/ um rodapé neutro — aqui o texto branco destoava do resto do tema (que usa
   verde nos títulos/links). Escurece o fundo e reaproveita a paleta do tema. */
.footer-32892 {
  background-color: var(--hk-bg-alt);
  color: var(--hk-text-muted);
}

.footer-32892 h3 {
  color: var(--hk-green);
}

.footer-32892 p,
.footer-32892 .quick-info li,
.footer-32892 .footer-menu li a {
  color: var(--hk-text-muted);
}

.footer-32892 .quick-info li a,
.footer-32892 .tweets li a {
  color: var(--hk-text);
}

.footer-32892 .quick-info li a:hover,
.footer-32892 .footer-menu li a:hover,
.footer-32892 .tweets li a:hover {
  color: var(--hk-green);
}

.footer-32892 #ft_copyr {
  color: var(--hk-text-muted) !important;
}

/* .btn-outline-dark (usado em painel/prof/cursos p/ ações secundárias, ex.: "Acessar
   Aula") vem de styles.css com --bs-btn-color/border em #212529 — quase invisível no
   nosso fundo quase preto. Realinha p/ um contorno claro, preenche de verde no hover. */
.btn-outline-dark {
  --bs-btn-color: var(--hk-text);
  --bs-btn-border-color: var(--hk-text-muted);
  --bs-btn-hover-color: #01120a;
  --bs-btn-hover-bg: var(--hk-green);
  --bs-btn-hover-border-color: var(--hk-green);
  --bs-btn-active-color: #01120a;
  --bs-btn-active-bg: var(--hk-green);
  --bs-btn-active-border-color: var(--hk-green);
  --bs-btn-disabled-color: var(--hk-text-muted);
  --bs-btn-disabled-border-color: var(--hk-text-muted);
}

.btn-outline-dark:hover {
  box-shadow: 0 0 16px rgba(0, 255, 65, 0.45);
}

/* Livro de apoio (Livrebook) — banner DESTACADO nas páginas de curso
   (painel/curso.php e cursos/curso.php) quando o curso tem curso.livro_id.
   Link direto p/ o PDF público do livreebooks.com.br. */
.hk-livrobox {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 18px 0;
  padding: 14px 18px;
  border: 1px solid var(--hk-green);
  background: linear-gradient(135deg, rgba(0, 255, 65, 0.10), rgba(0, 143, 44, 0.06));
  box-shadow: 0 0 14px rgba(0, 255, 65, 0.25);
  color: var(--hk-text);
  text-decoration: none;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.hk-livrobox:hover {
  color: var(--hk-text);
  box-shadow: 0 0 26px rgba(0, 255, 65, 0.55);
  transform: translateY(-2px);
}

.hk-livrobox .hk-livroicone {
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(0, 255, 65, 0.6));
}

.hk-livrobox .hk-livrotitulo {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hk-green);
}

.hk-livrobox .hk-livrosub {
  color: var(--hk-text-muted);
}