/* =====================================================================
   PulseIT — tokens de marca
   Fonte unica de tipografia, cor e ritmo. Tudo o que for estilo novo
   deve consumir estas variaveis em vez de repetir valores.
   ===================================================================== */

@font-face{
  font-family:"PulseIT Display";
  src:url("fonts/poppins-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"PulseIT Display";
  src:url("fonts/poppins-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

:root{
  /* ---- famílias ---- */
  --pit-display:"PulseIT Display",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pit-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --pit-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* ---- escala tipográfica (1.25) ---- */
  --pit-t-xs:.72rem;
  --pit-t-sm:.86rem;
  --pit-t-base:1rem;
  --pit-t-md:1.12rem;
  --pit-t-lg:1.4rem;
  --pit-t-xl:1.75rem;
  --pit-t-2xl:2.2rem;
  --pit-t-3xl:2.9rem;

  /* ---- ritmo ---- */
  --pit-space:8px;
  --pit-measure:68ch;

  /* ---- cor de editoria (usada como --pit-accent por artigo) ---- */
  --pit-c-seguranca:#f43f5e;
  --pit-c-redes:#3b82f6;
  --pit-c-datacenter:#06b6d4;
  --pit-c-cloud:#8b5cf6;
  --pit-c-ia:#10b981;
  --pit-c-energia:#f59e0b;
}

/* ---------------------------------------------------------------------
   Aplicação: display nos títulos, corpo declarado (não herdado por acaso)
   --------------------------------------------------------------------- */
body{font-family:var(--pit-body)}

h1,h2,h3,h4,h5,
.entry-title,
.site-title,
.pith-hero__title,
.pith-card__title,
.pith-latest__title,
.pit-related__name,
.pit-related__title,
.pith-card__standfirst{font-family:var(--pit-display)}

h1,.entry-title,.pith-hero__title{letter-spacing:-.024em;font-weight:700}
h2,h3{letter-spacing:-.014em;font-weight:700}
.pith-card__title,.pith-latest__title,.pit-related__name{font-weight:700;letter-spacing:-.008em}
.pith-card__standfirst{font-family:var(--pit-body)}

/* rótulos técnicos: mono, caixa alta, entrelinhado — o vernáculo do site */
.pith-sec__title,
.pith-hero__kicker,
.pith-card__cat,
.pith-card__when,
.pith-latest__when,
.pith-latest__cat,
.pit-byline__meta,
.pit-ticker__cat,
.pit-share__label,
.pit-tags__label,
.pit-credit{font-family:var(--pit-mono)}

/* o título do post na listagem do tema também é display */
.loop-entry h2.entry-title{font-family:var(--pit-display);letter-spacing:-.01em}

/* =====================================================================
   Superfícies claras herdadas do tema
   O site é escuro, mas o tema mantém o padrão claro em submenu, campos de
   formulário e comentários. Enquanto o Xpro estava ativo, o CSS dele cobria
   isso por acidente; sem ele, sobrou texto branco sobre fundo branco.
   Aqui essas superfícies passam a usar os mesmos tokens do resto do site.
   ===================================================================== */

:root{
  --pit-campo-bg:#0d121d;
  --pit-campo-borda:rgba(255,255,255,.14);
  --pit-campo-texto:#e9edf6;
  --pit-campo-placeholder:#8592a8;
  --pit-menu-bg:#131926;
}

/* ---------------------------------------------------------- submenu */
.header-navigation .sub-menu,
.primary-menu-container .sub-menu,
.header-menu-container .sub-menu,
.secondary-menu-container .sub-menu,
.mobile-navigation .sub-menu{
  background:var(--pit-menu-bg) !important;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:6px;
  box-shadow:0 20px 48px rgba(0,0,0,.55);
}
.header-navigation .sub-menu li a,
.primary-menu-container .sub-menu li a,
.header-menu-container .sub-menu li a,
.mobile-navigation .sub-menu li a{
  color:#cfd6e4 !important;
  border-radius:8px;
  transition:background .18s ease,color .18s ease;
}
/* O hover vinha claro por causa de uma regra do customizer do Kadence
   (.header-navigation .header-menu-container ul ul li.menu-item > a:hover,
   pintando com --global-palette4), que tem especificidade maior. Aqui o
   !important encerra a disputa em vez de empilhar seletor cada vez mais longo. */
.header-navigation .sub-menu li a:hover,
.header-navigation .sub-menu li a:focus,
.header-navigation .sub-menu li a:focus-visible,
.header-menu-container .sub-menu li a:hover,
.primary-menu-container .sub-menu li a:hover,
.header-navigation .header-menu-container ul ul li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul li.menu-item > a:focus{
  color:#fff !important;
  background:rgba(110,151,255,.16) !important;
}
/* o item do submenu inteiro, quando o mouse passa pela linha */
.header-navigation .sub-menu li:hover > a,
.header-menu-container .sub-menu li:hover > a{
  color:#fff !important;
  background:rgba(110,151,255,.16) !important;
}
.header-navigation .sub-menu li.current-menu-item > a{color:#fff !important}

/* gaveta do menu no celular */
#mobile-drawer .drawer-inner,
.popup-drawer .drawer-inner{background:var(--pit-menu-bg)}
#mobile-drawer .mobile-navigation li a{color:#cfd6e4}

/* ------------------------------------------------- campos nativos */
body:not(.wp-admin) input[type="text"],
body:not(.wp-admin) input[type="email"],
body:not(.wp-admin) input[type="url"],
body:not(.wp-admin) input[type="search"],
body:not(.wp-admin) input[type="tel"],
body:not(.wp-admin) input[type="number"],
body:not(.wp-admin) input[type="password"],
body:not(.wp-admin) textarea,
body:not(.wp-admin) select{
  background:var(--pit-campo-bg);
  color:var(--pit-campo-texto);
  border:1px solid var(--pit-campo-borda);
  border-radius:10px;
}
#wpadminbar input{background:none;color:inherit;border:0;border-radius:0}

body:not(.wp-admin) input::placeholder,
body:not(.wp-admin) textarea::placeholder{color:var(--pit-campo-placeholder);opacity:1}

body:not(.wp-admin) input:focus,
body:not(.wp-admin) textarea:focus,
body:not(.wp-admin) select:focus{
  border-color:var(--pit-accent,#3b82f6);
  outline:2px solid rgba(59,130,246,.35);
  outline-offset:1px;
}

/* ---------------------------------------------------- comentários */
#comments .comment-body{border-color:rgba(255,255,255,.08)}
#comments #comment{background:var(--pit-campo-bg) !important;color:var(--pit-campo-texto) !important}
#comments .comment-form label,
#comments .comment-notes,
#comments .comment-form-cookies-consent label,
#comments .logged-in-as{color:#aab6c9}
#comments .comment-metadata a,
#comments .comment-meta a{color:#8592a8}
#comments .comment-reply-link{color:var(--pit-accent,#3b82f6)}
/* o tema flutua o rótulo para dentro do campo, e ele cai em cima do
   placeholder. Rótulo acima do campo resolve, e continua legível para
   leitor de tela. */
#comments .comment-form p label{
  transform:none !important;
  display:block;
  margin:0 0 8px;
  font-family:var(--pit-mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
#comments #submit,
#comments .submit{
  background:var(--pit-accent,#3b82f6);color:#08111f;font-weight:700;
  border:0;border-radius:10px;padding:12px 22px;cursor:pointer;
}
#comments #submit:hover,#comments .submit:hover{filter:brightness(1.08)}
#comments .avatar{border-radius:50%;background:#1b2233}

/* ------------------------------------------------------- SureForms */
.srfm-form .srfm-input-common,
.srfm-form input[type="text"],
.srfm-form input[type="email"],
.srfm-form textarea,
.srfm-form select{
  background:var(--pit-campo-bg) !important;
  color:var(--pit-campo-texto) !important;
  border:1px solid var(--pit-campo-borda) !important;
  border-radius:10px !important;
}
.srfm-form label,
.srfm-form .srfm-block-label,
.srfm-form .srfm-description,
.srfm-form .srfm-helper-txt{color:#c7d0e0 !important}
.srfm-form input::placeholder,
.srfm-form textarea::placeholder{color:var(--pit-campo-placeholder) !important}
.srfm-form .srfm-button,
.srfm-form button[type="submit"]{
  background:var(--pit-accent,#3b82f6) !important;color:#08111f !important;
  border:0 !important;border-radius:10px !important;font-weight:700 !important;
}
/* o container do formulário vinha branco, num site escuro */
.srfm-form-container,
.srfm-form-container form,
.srfm-single-form{background:transparent !important}
/* O formulário de contato tem dois botões de envio: o personalizado
   ("Enviar mensagem", classe srfm-custom-button) e o padrão do SureForms
   ("Submit"), que fica dentro de .srfm-submit-container. Os dois enviam;
   o segundo é ruído. Esconder é remendo — o certo é desligar o botão padrão
   nas configurações do formulário 2789 no SureForms. */
.srfm-form .srfm-submit-container{display:none}

/* ------------------------------------------------------- busca */
.search-form input[type="search"],
.kadence-search-modal input[type="search"]{
  background:var(--pit-campo-bg);color:var(--pit-campo-texto);
  border:1px solid var(--pit-campo-borda);
}