/* ===================================================================
   IGORBRASIL · PREMIUM UI SYSTEM · premium.css
   CSS premium centralizado, carregado DEPOIS do cyber.css.
   Move pra ca os blocos aprovados nas Etapas 2.1 e 2.2, pra parar de
   inflar o parts/header.html (que vinha batendo no Imunify).
   Enfileirado por inc/security.php, depende do handle 'igorbrasil-cyber'.
   Visual identico ao que estava no header, so mudou de arquivo.
   =================================================================== */

/* ---- STEP 2.1 · FOCUS + GLOW ---- */

/* 1. FOCO ACESSIVEL — anel neon controlado, so quando o foco vem do teclado.
   Cobre links, botoes, inputs, filtros, CTAs, nav, busca, footer, cookie. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible{
  outline:1px solid var(--cy-neon) !important;
  outline-offset:4px !important;
  box-shadow:0 0 0 4px rgba(var(--cy-neon-rgb),.12) !important;
}
/* foco vindo de mouse/clique NAO mostra o anel (so teclado) */
:focus:not(:focus-visible){ outline:none; }

/* 2. GLOW CALIBRADO — neon como acento editorial, menos "arcade".
   NAO mexe em titulos/H1 (cy-title .n, cy-title--news em, cy-archive__title em). */
.cy-btn--solid:hover{ box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 30px rgba(var(--cy-neon-rgb),.30) !important; }
.cy-btn--ghost:hover{ box-shadow:0 0 22px rgba(var(--cy-neon-rgb),.15) !important; }
.cy-cta__t em{ text-shadow:0 0 44px rgba(var(--cy-neon-rgb),.30) !important; }

/* ---- STEP 2.2 · PILLS + ESTADO VAZIO ---- */

/* 1. PILL menos arredondada (era border-radius:100px) — selo tecnico,
   coerente com cards/botoes/filtros (quadrados). */
.cy-pill{ border-radius:2px !important; }

/* 2. ESTADO VAZIO premium — painel dark + glyph tecnico + titulo + texto + acao.
   Reaproveita .cy-btn--ghost na acao (nao cria botao novo). */
.cy-empty{ border:1px solid var(--cy-line); background:var(--cy-panel);
  padding:clamp(44px,6.5vw,76px) clamp(24px,5vw,56px);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  position:relative; overflow:hidden; }
.cy-empty::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 0%, rgba(var(--cy-neon-rgb),.05), transparent 70%); }
.cy-empty > *{ position:relative; z-index:1; }
.cy-empty__glyph{ width:clamp(60px,7vw,72px); height:clamp(60px,7vw,72px); display:grid; place-items:center;
  border:1px solid var(--cy-line-neon); background:rgba(var(--cy-neon-rgb),.04); line-height:1; margin-bottom:8px;
  font-family:var(--wp--preset--font-family--mono); font-size:clamp(30px,3.6vw,40px); color:var(--cy-neon); }
.cy-empty__title{ font-family:var(--wp--preset--font-family--display); text-transform:uppercase; margin:0;
  font-size:clamp(24px,3vw,38px); line-height:1; letter-spacing:.01em; color:var(--cy-bone); }
.cy-empty__text{ font-family:var(--wp--preset--font-family--mono); font-size:clamp(13px,1.1vw,15px); margin:0;
  line-height:1.6; letter-spacing:.02em; color:var(--cy-smoke); max-width:44ch; }
.cy-empty__action{ margin-top:12px; }

/* ===================================================================
   SPRINT VISUAL · NIVEL 1 · BLOCO 1 · ATMOSFERA + DISCIPLINA DO NEON
   Tudo aqui, sem tocar em HTML/cyber/style/JS.

   ATMOSFERA como BACKGROUND (sem pseudo-elemento novo, sem z-index novo).
   cyber.css:22 forca `html,body,.wp-site-blocks{ background:#000 !important }`
   (blindagem anti modo-escuro). O .wp-site-blocks e o wrapper OPACO visivel
   que cobre html/body, entao a atmosfera entra NELE, sobrepondo aquele
   !important. Por ser BACKGROUND, fica atras de TODOS os filhos (header,
   conteudo, etc.) e nunca cobre nada. Banner/modal sao fixed, acima e opacos.
   Grao NAO duplicado (ja existe em style.css/modern-2026.css). So malha + vinheta. */
.wp-site-blocks{
  background-color:#000 !important;
  background-image:
    /* malha tecnica fina (quase imperceptivel, nao "papel quadriculado") */
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
    /* vinheta que EMOLDURA (so a borda escurece, centro intacto) */
    radial-gradient(ellipse 120% 92% at 50% 36%, transparent 60%, rgba(0,0,0,.5) 100%) !important;
  background-size:72px 72px, 72px 72px, cover !important;
  background-attachment:fixed !important;
}
/* mobile: ainda mais leve, so vinheta, sem malha e sem fixed (evita jank no iOS) */
@media(max-width:768px){
  .wp-site-blocks{
    background-image:radial-gradient(ellipse 135% 96% at 50% 36%, transparent 64%, rgba(0,0,0,.45) 100%) !important;
    background-size:cover !important;
    background-attachment:scroll !important;
  }
}

/* ---- DISCIPLINA DO NEON · neon vira holofote, nao decoracao ---- */
:root{ --cy-neon-dim:rgba(var(--cy-neon-rgb),.42); }

/* PERDEM o neon cheio (viram osso/cinza, param de competir com o foco) */
.cy-card__ico{ color:var(--cy-smoke) !important; border-color:var(--cy-line) !important;
  background:rgba(255,255,255,.02) !important; }        /* iconezinho de cada card */
.cy-card__n{ color:var(--cy-smoke) !important; }         /* numeros 01/02/03 dos cards */
.cy-prob__list li::before{ color:var(--cy-smoke) !important; }  /* os "//" decorativos da lista */
.cy-sec-head__i{ color:var(--cy-neon-dim) !important; }  /* numero de secao: neon quieto, nao gritante */

/* MANTEM o neon CHEIO (foco real) — sem override, so registrado:
   .cy-feat__cat (categoria do post no Blog, preservada a pedido) · .cy-btn--solid
   · em/.n dos titulos · .cy-sec-head__t em · .cy-cta__t em / .cy-cta__l
   · .cy-filter--active · borda do .cy-stats · .cy-pill (1x por hero)
   · a:hover · .cy-sec-lead b ("generalista") · ::selection */

/* ===================================================================
   GLOBAL · titulo de post no HOVER = BRANCO + glow branco sutil (nao verde).
   Verde fica so como acento (categoria, CTA "Ler artigo", bordas/HUD).
   Aqui trato o sistema ANTIGO (cy-*) do Blog: cards da grade (.cy-card__t)
   e a materia em destaque (.cy-feat__title). !important vence o verde do
   cyber.css e do header.html. A Home (.cyx-*) e tratada no cyx.css.
   =================================================================== */
/* cor + glow no hover do CARD (consistente com a Home: dispara no hover do card, nao do link) */
.cy-card:hover .cy-card__t a,
.cy-feat:hover .cy-feat__title a{ color:#fff !important; text-shadow:0 0 10px rgba(255,255,255,.32),0 0 22px rgba(255,255,255,.24) !important; }
/* micro-glitch sutil no titulo (reusa o @keyframes cyx-title-glitch definido no cyx.css) */
.cy-card:hover .cy-card__t,
.cy-feat:hover .cy-feat__title{ animation:cyx-title-glitch .3s steps(2,end) 1; }
@media(prefers-reduced-motion:reduce){
  .cy-card:hover .cy-card__t, .cy-feat:hover .cy-feat__title{ animation:none !important; }
}