/* BloggenAI — retoques de marca + fundo sci-fi colorido sobre o Twenty Twenty-Five. */
:root {
  --bg-grad: linear-gradient(90deg, #3b82f6, #8b5cf6);
}

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Botoes no gradiente da marca */
.wp-block-button__link,
.wp-element-button {
  background: var(--bg-grad) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 9px;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
  filter: brightness(1.12);
}

a { transition: color .15s, filter .15s; }

/* Logo no header */
.wp-block-site-logo img,
.custom-logo { height: 46px; width: auto; }
.wp-block-site-title a { letter-spacing: -.3px; font-weight: 800; }

/* Logo (icone cerebro+caneta) antes do nome no header — lockup igual a landing */
.wp-block-site-title a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wp-block-site-title a::before {
  content: "";
  width: 26px;
  height: 42px;
  flex: 0 0 auto;
  background: url(logo-icon.png) no-repeat center/contain;
}

/* Imagens com cantos arredondados */
.wp-block-post-featured-image img,
.wp-block-image img { border-radius: 12px; }

/* Campos de formulario no dark */
input[type=text], input[type=email], input[type=search], input[type=url], textarea {
  background: #1e293b;
  border: 1px solid #334155;
  color: #e2e8f0;
  border-radius: 8px;
}

/* Separacao sutil entre posts na listagem */
.wp-block-post { border-bottom: 1px solid #1e293b; }

/* Codigo / pre no dark */
pre, code { background: #1e293b; color: #e2e8f0; border-radius: 8px; }

/* ============================================================
   FUNDO SCI-FI — nebulosa colorida + rede neural (canvas: bg.js)
   ============================================================ */
body {
  background-color: #0a0e1f !important;
  background-image:
    radial-gradient(60vw 60vw at 10% 6%,  rgba(6, 182, 212, .30), transparent 58%),   /* ciano */
    radial-gradient(58vw 58vw at 90% 4%,  rgba(139, 92, 246, .32), transparent 58%),   /* violeta */
    radial-gradient(54vw 54vw at 94% 72%, rgba(236, 72, 153, .26), transparent 60%),   /* magenta */
    radial-gradient(60vw 60vw at 6% 88%,  rgba(59, 130, 246, .30), transparent 60%),   /* azul */
    radial-gradient(70vw 70vw at 50% 48%, rgba(99, 102, 241, .18), transparent 66%) !important; /* indigo centro */
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* camada de nebulosa extra (profundidade + movimento) */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42vw 42vw at 28% 30%, rgba(6, 182, 212, .22), transparent 60%),
    radial-gradient(42vw 42vw at 72% 62%, rgba(236, 72, 153, .20), transparent 60%),
    radial-gradient(38vw 38vw at 58% 18%, rgba(139, 92, 246, .22), transparent 60%);
  filter: blur(24px);
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: bloggenai-nebula 26s ease-in-out infinite alternate; }
}
@keyframes bloggenai-nebula {
  from { transform: translate3d(-3%, -2%, 0) scale(1) rotate(0deg); }
  to   { transform: translate3d(3%, 3%, 0) scale(1.14) rotate(6deg); }
}

/* canvas da rede neural: fixo, sobre a nebulosa, atras do conteudo */
#bgfx { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

/* conteudo sempre acima dos efeitos */
.wp-site-blocks { position: relative; z-index: 2; }

/* escurece sob a coluna de leitura (cor migra pras bordas) — facilita o texto */
.wp-site-blocks::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 52% 94% at 50% 46%,
    rgba(8, 11, 26, .60) 0%,
    rgba(8, 11, 26, .34) 42%,
    transparent 72%);
}

/* leve sombra no texto para legibilidade sobre o fundo vivo */
.wp-block-post-content, .entry-content, .wp-block-post-title,
.wp-block-post-excerpt, .wp-block-query-title, .wp-block-heading {
  text-shadow: 0 1px 10px rgba(8, 11, 26, .55);
}

/* ===== HEADER FIXO (sticky): icone + titulo nao rolam com a pagina ===== */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 14, 31, .72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(51, 65, 85, .55);
}

/* ===== Barra comercial (volta a landing / contratar / login) ===== */
.bg-actionbar {
  position: fixed; top: 14px; right: 20px; z-index: 200;
  display: flex; gap: 8px;
}
.bg-actionbar a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 10px; line-height: 1;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: #e2e8f0; background: rgba(15, 23, 42, .6);
  border: 1px solid rgba(99, 102, 241, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .15s, border-color .15s, background .15s, filter .15s;
}
.bg-actionbar a:hover { transform: translateY(-1px); border-color: #818cf8; background: rgba(99, 102, 241, .22); }
.bg-actionbar a.cta { background: linear-gradient(90deg, #3b82f6, #8b5cf6); border: 0; color: #fff; }
.bg-actionbar a.cta:hover { filter: brightness(1.1); }
.bg-actionbar svg { width: 16px; height: 16px; }
@media (max-width: 700px) {
  .bg-actionbar { top: 12px; right: 12px; }
  .bg-actionbar a span { display: none; }
  .bg-actionbar a { padding: 9px; }
}
/* esconde o menu default ("Pagina de exemplo") — a barra comercial assume a direita */
header.wp-block-template-part .wp-block-navigation { display: none; }

/* ===== Barra superior mais slim e equilibrada ===== */
header.wp-block-template-part .is-layout-flex.is-content-justification-space-between {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
/* logo e titulo menores */
.wp-block-site-title a::before { width: 22px; height: 34px; }
.wp-block-site-title { font-size: 1.2rem !important; }
.wp-block-site-title a { gap: 8px; }
/* barra de acoes proporcional ao header slim */
.bg-actionbar { top: 10px; right: 18px; gap: 7px; }
.bg-actionbar a { padding: 7px 11px; font-size: 12.5px; border-radius: 9px; }
.bg-actionbar svg { width: 15px; height: 15px; }

/* ===== Barra de acoes: maior e centralizada horizontalmente ===== */
.bg-actionbar {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  top: 13px;
  gap: 10px;
}
.bg-actionbar a { padding: 9px 17px; font-size: 15px; border-radius: 11px; }
.bg-actionbar svg { width: 19px; height: 19px; }

/* ===== logo maior + acoes a direita, centralizadas verticalmente ===== */
.wp-block-site-title a::before { width: 28px; height: 44px; }
.wp-block-site-title { font-size: 1.45rem !important; }
.bg-actionbar { left: auto; right: 24px; transform: none; top: 15px; }

.bg-actionbar { top: 18px; }