/* ============================================================
   CYBERPUNK SKIN — GLOBAL (site inteiro, sobre o Divi)
   Müller Fernandes | mfs.eng.br
   SEM reset (seguro pra carregar em todas as páginas).
   Carrega depois de design-tokens.css.
   ------------------------------------------------------------
   Serve para 2 coisas ao mesmo tempo:
   (A) SKIN AUTOMÁTICO dos elementos do próprio Divi
       (seções, títulos, botões, links) — o site já fica
       cyberpunk sem você tocar em nada.
   (B) CLASSES DE COMPONENTE achatadas (.blog-card, .btn,
       .section-title, .card-tag, .corner-bracket, etc.) para
       você adicionar no campo "CSS Class" dos módulos Divi.
   ============================================================ */

/* ---------- (A) SKIN DO DIVI ---------- */

/* base escura + corrige o fundo branco padrão das seções */
body{ background:var(--bg-dark) !important; color:var(--text-dark); font-family:var(--font-body); }
.et_pb_section.et_pb_section{ background-color:var(--bg-dark) !important; }
.et_pb_row, .et_pb_column{ background-color:transparent !important; }

/* mantém conteúdo acima da grade e abaixo da scanline */
#page-container, .et-l, #et-main-area, #main-content{ position:relative; z-index:5; }

/* overlays globais SEM HTML (grade + scanline) */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.15;
  background-image:
    linear-gradient(rgba(0,240,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.10) 1px, transparent 1px);
  background-size:50px 50px; transform:translateZ(0);
}
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px);
  transform:translateZ(0);
}

/* títulos (vence a cor inline do Divi com !important) */
.et_pb_section h1, .et_pb_section h2{
  font-family:var(--font-display) !important; color:#fff !important; letter-spacing:1px;
  text-shadow:0 0 20px rgba(0,240,255,.35);
}
.et_pb_section h3, .et_pb_section h4, .et_pb_section h5, .et_pb_section h6{
  font-family:var(--font-display) !important; color:var(--neon-cyan) !important; letter-spacing:1px;
}

/* texto de corpo */
.et_pb_text, .et_pb_text *, .et_pb_blurb_description, p, li{ color:var(--text-dark); font-family:var(--font-body); }

/* links de texto (corrige o e-mail azul) */
.et_pb_section a:not(.et_pb_button){ color:var(--neon-cyan) !important; transition:.3s ease; }
.et_pb_section a:not(.et_pb_button):hover{ color:var(--neon-pink) !important; text-shadow:0 0 8px currentColor; }

/* botões do Divi (⚠ alpha: se não pegar, a classe pode ter mudado — me avise) */
.et_pb_button, a.et_pb_button{
  font-family:var(--font-display) !important; text-transform:uppercase; letter-spacing:2px;
  color:var(--neon-cyan) !important; border:2px solid var(--neon-cyan) !important; border-radius:2px;
  background:transparent !important; box-shadow:0 0 10px rgba(0,240,255,.25); transition:.3s ease !important;
}
.et_pb_button:hover{
  background:var(--neon-cyan) !important; color:var(--bg-dark) !important;
  box-shadow:0 0 25px var(--neon-cyan) !important; padding-left:inherit !important;
}

/* inputs */
input, textarea, select{
  background:transparent !important; color:var(--text-dark) !important;
  border:1px solid var(--border-dark) !important; font-family:var(--font-mono) !important;
}
input:focus, textarea:focus{ border-color:var(--neon-cyan) !important; box-shadow:0 0 10px rgba(0,240,255,.2) !important; }

/* ---------- (B) COMPONENTES ACHATADOS (dark direto) ----------
   Adicione a classe no módulo Divi: Advanced > CSS ID & Classes > CSS Class */

.section-title{
  font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; text-transform:uppercase;
  letter-spacing:3px; color:var(--neon-cyan); display:flex; align-items:center; gap:var(--space-4);
}
.section-title::before{ content:'>'; font-family:var(--font-mono); animation:blink 1s infinite; }

.blog-card{
  padding:var(--space-5); border:1px solid var(--border-dark); border-radius:4px; position:relative;
  overflow:hidden; background:var(--bg-dark-card); transition:all .3s ease;
}
.blog-card:hover{ transform:translateY(-3px); border-color:var(--neon-cyan); box-shadow:var(--shadow-card-dark); }

.card-tag{
  font-family:var(--font-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:2px;
  padding:var(--space-1) var(--space-3); border-radius:2px; display:inline-block;
  background:rgba(0,240,255,.1); color:var(--neon-cyan); border:1px solid rgba(0,240,255,.3);
}
.card-title{ font-family:var(--font-display); font-weight:700; color:#fff; line-height:1.3; }
.card-meta{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--neon-green); display:flex; gap:var(--space-5); }

.btn{
  font-family:var(--font-display); font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:2px;
  padding:var(--space-4) var(--space-6); border:2px solid; cursor:pointer; display:inline-block; text-decoration:none;
  transition:all .3s ease;
}
.btn-primary{ border-color:var(--neon-cyan); color:var(--neon-cyan); box-shadow:0 0 10px rgba(0,240,255,.2); }
.btn-primary:hover{ background:var(--neon-cyan); color:var(--bg-dark); box-shadow:0 0 30px var(--neon-cyan); }
.btn-secondary{ border-color:var(--neon-pink); color:var(--neon-pink); }
.btn-secondary:hover{ background:var(--neon-pink); color:var(--bg-dark); box-shadow:0 0 30px var(--neon-pink); }

.tag-item{
  font-family:var(--font-mono); font-size:var(--text-xs); padding:var(--space-1) var(--space-3);
  border:1px solid var(--border-dark); border-radius:2px; color:var(--text-dark-muted); transition:all .2s ease;
}
.tag-item:hover{ border-color:var(--neon-cyan); color:var(--neon-cyan); background:rgba(0,240,255,.05); }

.glitch-text{
  font-family:var(--font-display); font-weight:900; color:#fff;
  text-shadow:2px 0 var(--neon-cyan), -2px 0 var(--neon-pink), 0 0 20px var(--neon-cyan);
  animation:glitch 3s infinite;
}
.neon-cyan{ color:var(--neon-cyan) !important; }
.neon-pink{ color:var(--neon-pink) !important; }
.neon-glow{ text-shadow:0 0 10px currentColor, 0 0 20px currentColor; }
.mono{ font-family:var(--font-mono) !important; }

.corner-bracket{ position:absolute; width:20px; height:20px; border:2px solid var(--neon-cyan); }
.cb-tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.cb-tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
.cb-bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
.cb-br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* ---------- KEYFRAMES (globais) ---------- */
@keyframes glitch{
  0%,90%,100%{ transform:translate(0); }
  92%{ transform:translate(-2px,1px); } 94%{ transform:translate(2px,-1px); }
  96%{ transform:translate(-1px,2px); } 98%{ transform:translate(1px,-2px); }
}
@keyframes blink{ 0%,50%{opacity:1;} 51%,100%{opacity:0;} }
@keyframes pulse-glow{ 0%,100%{box-shadow:0 0 10px var(--neon-cyan);} 50%{box-shadow:0 0 25px var(--neon-cyan);} }

/* scroll liso */
html{ scroll-behavior:auto; }

/* ============================================================
   HEADER CYBERPUNK GLOBAL (mesmo do blog, em todas as páginas)
   Renderizado pelo functions.php via wp_body_open.
   ============================================================ */

/* esconde o header padrão do Divi (usamos o nosso) */
#main-header, #top-header, .et-l--header, .et_pb_menu_0_tb_header { display:none !important; }

.cp-global-header{
  position:sticky; top:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--space-5) var(--space-6);
  border-bottom:1px solid var(--border-dark);
  background:rgba(10,10,15,.85); backdrop-filter:blur(8px);
  will-change:transform;
}
.cp-global-header .logo-text{
  font-family:var(--font-display); font-size:var(--text-xl); font-weight:900;
  letter-spacing:2px; text-transform:uppercase; color:var(--neon-cyan); text-shadow:var(--shadow-neon-cyan);
  line-height:1;
}
.cp-global-header .logo-sub{
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:4px;
  text-transform:uppercase; color:var(--neon-pink); margin-top:2px;
}
.cp-global-header .nav-links{ display:flex; gap:var(--space-6); list-style:none; margin:0; padding:0; }
.cp-global-header .nav-links li{ list-style:none; margin:0; }
.cp-global-header .nav-links a{
  font-family:var(--font-mono); font-size:.9rem; text-decoration:none; text-transform:uppercase;
  letter-spacing:2px; color:var(--text-dark-muted); transition:.3s ease; padding:var(--space-1) 0; position:relative;
}
.cp-global-header .nav-links a::after{ content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--neon-cyan); transition:width .3s ease; }
.cp-global-header .nav-links a:hover{ color:var(--neon-cyan) !important; }
.cp-global-header .nav-links a:hover::after{ width:100%; }
.cp-global-header .nav-links .current-menu-item > a,
.cp-global-header .nav-links .current_page_item > a{ color:var(--neon-cyan) !important; }

@media (max-width:700px){
  .cp-global-header{ flex-direction:column; gap:var(--space-4); }
  .cp-global-header .nav-links{ gap:var(--space-4); flex-wrap:wrap; justify-content:center; }
}

/* ============================================================
   MÓDULO BLOG DO DIVI -> card cyberpunk (igual ao template)
   Especificidade alta + !important para vencer o roxo do Divi
   (--gcid-primary-color: #1644db e regras .tagged_as/.more-link).
   ============================================================ */
body #page-container .et_pb_post,
body .et-l .et_pb_post{
  background:var(--bg-dark-card) !important;
  border:1px solid var(--border-dark) !important;
  border-radius:4px !important;
  padding:var(--space-5) !important;
  position:relative; overflow:hidden; transition:all .3s ease;
  margin-bottom:var(--space-5) !important;
}
body #page-container .et_pb_post:hover{
  transform:translateY(-3px);
  border-color:var(--neon-cyan) !important; box-shadow:var(--shadow-card-dark) !important;
}
/* cantos em colchete (2 cantos via pseudo-elementos) */
body #page-container .et_pb_post::before,
body #page-container .et_pb_post::after{
  content:''; position:absolute; width:18px; height:18px;
  border:2px solid var(--neon-cyan); pointer-events:none; z-index:2;
}
body #page-container .et_pb_post::before{ top:8px; left:8px; border-right:none; border-bottom:none; }
body #page-container .et_pb_post::after{ bottom:8px; right:8px; border-left:none; border-top:none; }

/* título -> branco Orbitron */
body #page-container .et_pb_post .entry-title,
body #page-container .et_pb_post .entry-title a{
  font-family:var(--font-display) !important; color:#fff !important;
}
body #page-container .et_pb_post .entry-title a:hover{ color:var(--neon-cyan) !important; }

/* data (span.published) -> verde mono */
body #page-container .et_pb_post .post-meta,
body #page-container .et_pb_post .post-meta .published{
  font-family:var(--font-mono) !important; color:var(--neon-green) !important;
  font-size:var(--text-xs) !important;
}

/* categoria/tag -> chip cyan */
body #page-container .et_pb_post .post-meta a,
body #page-container .et_pb_post .entry-categories a,
body #page-container .et_pb_post .post-meta a[rel~="tag"],
body #page-container .et_pb_post .post-meta a[rel~="category"]{
  font-family:var(--font-mono) !important; color:var(--neon-cyan) !important;
  text-decoration:none !important; text-transform:uppercase; letter-spacing:1px;
  display:inline-block; padding:2px 8px; border:1px solid rgba(0,240,255,.35) !important;
  border-radius:2px; background:rgba(0,240,255,.08) !important;
}

/* excerpt */
body #page-container .et_pb_post .post-content,
body #page-container .et_pb_post .post-content p,
body #page-container .et_pb_post .post-content-inner{
  color:var(--text-dark-muted) !important; font-family:var(--font-body) !important;
}

/* "ler mais" -> cyan mono, sem cara de botão roxo */
body #page-container .et_pb_post .more-link{
  font-family:var(--font-mono) !important; color:var(--neon-cyan) !important;
  text-decoration:none !important; text-transform:uppercase; letter-spacing:1px;
  border:none !important; background:transparent !important; padding:0 !important;
}
body #page-container .et_pb_post .more-link:hover{ text-shadow:0 0 8px var(--neon-cyan); }

/* ============================================================
   BLOCOS DE CÓDIGO — corrige "preto no preto"
   Gutenberg (.wp-block-code), <pre>, <code>, módulo Code do Divi.
   ============================================================ */
.wp-block-code,
.wp-block-preformatted,
body #page-container pre,
.et_pb_post pre, .et_pb_text pre{
  background:#0d0d16 !important;
  color:var(--text-dark) !important;
  border:1px solid var(--border-dark) !important;
  border-left:3px solid var(--neon-cyan) !important;
  border-radius:4px !important;
  padding:var(--space-4) !important;
  font-family:var(--font-mono) !important;
  font-size:.9rem !important; line-height:1.6 !important;
  overflow-x:auto !important; white-space:pre !important; tab-size:2;
}
.wp-block-code code,
body #page-container pre code,
.et_pb_post pre code{
  background:transparent !important; color:var(--text-dark) !important;
  font-family:var(--font-mono) !important; padding:0 !important; border:none !important;
  text-shadow:none !important;
}
/* código inline (fora de <pre>) -> chip cyan sutil */
:not(pre) > code{
  background:rgba(0,240,255,.08) !important; color:var(--neon-cyan) !important;
  font-family:var(--font-mono) !important; padding:2px 6px !important;
  border-radius:3px !important; border:1px solid rgba(0,240,255,.2) !important;
}
/* módulo Code do Divi */
.et_pb_code, .et_pb_code_inner{ color:var(--text-dark); font-family:var(--font-mono); }