/* =========================================================================
   IDENTIDADE VISUAL — WP Segurança BR (versão sóbria)
   Aplica a paleta da newsletter ao blog: global, posts (single) e arquivos.
   Só CSS — não altera templates do Blocksy. Fácil de reverter (basta
   remover/desativar o tema-filho ou este arquivo).

   Como ajustar: mude as variáveis em :root abaixo. Todo o resto herda.
   ========================================================================= */

:root {
	/* Paleta da marca */
	--wpbr-blue:        #2271b1; /* azul WordPress */
	--wpbr-blue-dark:   #135e96; /* azul escuro (links/hover) */
	--wpbr-green:       #16a34a; /* verde (destaque/ações) */
	--wpbr-green-dark:  #128040;
	--wpbr-yellow:      #facc15; /* amarelo (toque de Brasil, uso pontual) */

	/* Neutros */
	--wpbr-ink:         #111827; /* títulos */
	--wpbr-text:        #374151; /* corpo */
	--wpbr-muted:       #6b7280; /* metadados */
	--wpbr-line:        #e5e7eb; /* bordas/divisores */
	--wpbr-card:        #ffffff; /* fundo de cards */
	--wpbr-soft:        #f6f8fa; /* fundo suave */

	/* Formas */
	--wpbr-radius:      12px;
	--wpbr-radius-sm:   8px;

	/* Tipografia */
	--wpbr-serif: Georgia, 'Times New Roman', serif;              /* títulos */
	--wpbr-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI',
	              Roboto, Helvetica, Arial, sans-serif;            /* corpo/site */
}

/* -------------------------------------------------------------------------
   0) TIPOGRAFIA PADRÃO DO SITE (sobrescreve a fonte padrão do Blocksy)
   ------------------------------------------------------------------------- */

/* Corpo do site inteiro usa a mesma fonte padrão. */
body,
button,
input,
select,
textarea {
	font-family: var(--wpbr-sans);
}

/* Todos os TÍTULOS do site (home e single) usam a serifada da marca. */
h1, h2, h3,
.entry-title,
.entry-title a,
.ct-post-title,
.wp-block-post-title,
.page-title,
.ct-page-title {
	font-family: var(--wpbr-serif);
}

/* -------------------------------------------------------------------------
   1) GLOBAL — links, seleção, botões, foco
   ------------------------------------------------------------------------- */

/* Links do conteúdo (não mexe em menus/estruturais do tema). */
.entry-content a,
.ct-post-summary a,
article .entry-content a {
	color: var(--wpbr-blue-dark);
	text-decoration-color: color-mix(in srgb, var(--wpbr-blue-dark) 35%, transparent);
	text-underline-offset: 2px;
	transition: color .15s ease;
}
.entry-content a:hover,
article .entry-content a:hover {
	color: var(--wpbr-green-dark);
}

::selection { background: color-mix(in srgb, var(--wpbr-yellow) 55%, #fff); color: var(--wpbr-ink); }

/* Botões do tema (Blocksy usa .ct-button; blocos usam .wp-block-button__link) */
.wp-block-button__link,
.ct-button,
button.ct-button,
input[type="submit"] {
	background-color: var(--wpbr-green);
	border-color: var(--wpbr-green);
	color: #ffffff;
	border-radius: var(--wpbr-radius-sm);
	transition: background-color .15s ease, transform .05s ease;
}
.wp-block-button__link:hover,
.ct-button:hover,
button.ct-button:hover,
input[type="submit"]:hover {
	background-color: var(--wpbr-green-dark);
	border-color: var(--wpbr-green-dark);
	color: #ffffff;
}

/* Botão "outline" (variação secundária, azul) */
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wpbr-blue-dark);
	border: 2px solid var(--wpbr-blue-dark);
}
.is-style-outline .wp-block-button__link:hover {
	background: var(--wpbr-blue-dark);
	color: #fff;
}

/* Acessibilidade: foco visível na paleta */
a:focus-visible,
.wp-block-button__link:focus-visible,
.ct-button:focus-visible {
	outline: 2px solid var(--wpbr-blue);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   2) POSTS (SINGLE) — título, acento sutil, tipografia, citações, código
   ------------------------------------------------------------------------- */

/* Título do post: serifado, igual aos títulos da home. */
.single-post .entry-title,
.single-post .ct-post-title,
.single-post h1.wp-block-post-title {
	font-family: var(--wpbr-serif);
	color: var(--wpbr-ink);
	letter-spacing: -0.01em;
}

/* Acento tricolor discreto abaixo do título do post. */
.single-post .entry-title::after,
.single-post h1.wp-block-post-title::after {
	content: "";
	display: block;
	width: 68px;
	height: 3px;
	margin-top: 14px;
	border-radius: 3px;
	background: linear-gradient(
		to right,
		var(--wpbr-green) 0 34%,
		var(--wpbr-yellow) 34% 67%,
		var(--wpbr-blue) 67% 100%
	);
}

/* Corpo do artigo. */
.single-post .entry-content {
	color: var(--wpbr-text);
}
/* Subtítulos do artigo serifados, na mesma linha dos títulos. */
.single-post .entry-content h2,
.single-post .entry-content h3 {
	color: var(--wpbr-ink);
	font-family: var(--wpbr-serif);
	margin-top: 1.8em;
}

/* Citações com barra verde (combina com o "comentário do editor"). */
.entry-content blockquote {
	border-left: 4px solid var(--wpbr-green);
	background: var(--wpbr-soft);
	border-radius: 0 var(--wpbr-radius-sm) var(--wpbr-radius-sm) 0;
	padding: 14px 18px;
	color: var(--wpbr-text);
}

/* Código inline / blocos discretos. */
.entry-content :not(pre) > code {
	background: var(--wpbr-soft);
	border: 1px solid var(--wpbr-line);
	border-radius: 6px;
	padding: 1px 6px;
	font-size: .92em;
}

/* Links do tipo "ler mais" ganham cara de ação verde. */
.single-post .entry-content .more-link,
.ct-post-summary .more-link {
	display: inline-block;
	color: var(--wpbr-green-dark);
	font-weight: 700;
	text-decoration: none;
}

/* Badge de categoria (quando o tema imprime .entry-meta a[rel~="category"]) */
.entry-meta a[rel~="category tag"],
.entry-meta .ct-meta-categories a {
	color: var(--wpbr-blue-dark);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   3) ARQUIVOS / BLOG — cabeçalho da listagem e cards dos posts
   ------------------------------------------------------------------------- */

/* Título do arquivo (categoria/tag/autor) com serifada + acento. */
.archive .page-title,
.blog .page-title,
.archive .ct-page-title,
.search .page-title {
	font-family: var(--wpbr-serif);
	color: var(--wpbr-ink);
}
.archive .page-title::after,
.blog .page-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 12px;
	border-radius: 3px;
	background: linear-gradient(
		to right,
		var(--wpbr-green) 0 34%,
		var(--wpbr-yellow) 34% 67%,
		var(--wpbr-blue) 67% 100%
	);
}

/* Cards de post no grid do Blocksy (.entry-card) e fallback genérico. */
.archive .entry-card,
.blog .entry-card,
.archive article.post,
.blog article.post {
	background: var(--wpbr-card);
	border: 1px solid var(--wpbr-line);
	border-radius: var(--wpbr-radius);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.archive .entry-card:hover,
.blog .entry-card:hover,
.archive article.post:hover,
.blog article.post:hover {
	box-shadow: 0 6px 20px rgba(17,24,39,.08);
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--wpbr-blue) 30%, var(--wpbr-line));
}

/* Fina régua superior nos cards, na cor da marca. */
.archive .entry-card::before,
.blog .entry-card::before {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(
		to right,
		var(--wpbr-green) 0 34%,
		var(--wpbr-yellow) 34% 67%,
		var(--wpbr-blue) 67% 100%
	);
}

/* Título do card. */
.archive .entry-card .entry-title a,
.blog .entry-card .entry-title a,
.archive article.post .entry-title a,
.blog article.post .entry-title a {
	color: var(--wpbr-ink);
	font-family: var(--wpbr-serif);
	transition: color .15s ease;
}
.archive .entry-card .entry-title a:hover,
.blog .entry-card .entry-title a:hover {
	color: var(--wpbr-blue-dark);
}

/* Metadados e "ler mais" dos cards. */
.archive .entry-meta,
.blog .entry-meta { color: var(--wpbr-muted); }

/* Paginação com a paleta. */
.nav-links .page-numbers.current,
.ct-pagination .page-numbers.current {
	background: var(--wpbr-blue);
	border-color: var(--wpbr-blue);
	color: #fff;
}
.nav-links a.page-numbers:hover,
.ct-pagination a.page-numbers:hover {
	background: var(--wpbr-soft);
	border-color: var(--wpbr-blue);
	color: var(--wpbr-blue-dark);
}

/* -------------------------------------------------------------------------
   4) DESTAQUE POR CATEGORIA (opcional)
   O corpo recebe a classe .category-newsletter nas páginas dessa categoria.
   Aqui você pode reforçar algo só nela, sem afetar o resto do blog.
   ------------------------------------------------------------------------- */
.category-newsletter .page-title::after {
	width: 84px; /* acento um pouco mais presente na área da newsletter */
}

/* =========================================================================
   SELO DE RELEVÂNCIA (semáforo) — Baixa / Média / Alta
   ========================================================================= */

/* Wrapper: etiqueta sempre em LINHA PRÓPRIA (é movida via JS para logo
   abaixo da meta — autor + data + categoria). */
.bcn-relev-wrap {
	display: block;
	width: 100%;
	margin: 8px 0 0 0;
	clear: both;
}

/* Selo base. */
.bcn-relev {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border-radius: 999px;
	border: 1px solid transparent;
	white-space: nowrap;
	transition: filter .15s ease;
}
.bcn-relev:hover { filter: brightness(0.97); text-decoration: none; }

.bcn-relev__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: none;
}

/* Tamanhos. */
.bcn-relev--md { font-size: 13px; padding: 6px 14px; }
.bcn-relev--sm { font-size: 11.5px; padding: 4px 10px; gap: 6px; }
.bcn-relev--sm .bcn-relev__dot { width: 8px; height: 8px; }

/* Cores por nível (semáforo). */
.bcn-relev--baixa {
	color: #166534; background: #dcfce7; border-color: #bbf7d0;
}
.bcn-relev--baixa .bcn-relev__dot { background: #16a34a; }

.bcn-relev--media {
	color: #92400e; background: #fef3c7; border-color: #fde68a;
}
.bcn-relev--media .bcn-relev__dot { background: #f59e0b; }

.bcn-relev--alta {
	color: #991b1b; background: #fee2e2; border-color: #fecaca;
}
.bcn-relev--alta .bcn-relev__dot { background: #dc2626; }

/* Respiro da etiqueta quando posicionada após a meta. */
.entry-meta + .bcn-relev-wrap,
.ct-meta-elements + .bcn-relev-wrap { margin-top: 10px; }
.single-post .entry-meta + .bcn-relev-wrap { margin-top: 12px; }

/* Antes do JS mover (ou sem JS), a etiqueta não deve herdar o sublinhado
   do link do título nos cards. */
.entry-title a .bcn-relev { color: inherit; text-decoration: none; }

/* =========================================================================
   MINIBIO DO AUTOR (single, ao fim do conteúdo)
   ========================================================================= */
.bcn-bio {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	margin: 40px 0 8px;
	padding: 22px;
	background: var(--wpbr-soft);
	border: 1px solid var(--wpbr-line);
	border-radius: var(--wpbr-radius);
	position: relative;
}
/* Régua tricolor sutil no topo da caixa. */
.bcn-bio::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 3px;
	border-radius: var(--wpbr-radius) var(--wpbr-radius) 0 0;
	background: linear-gradient(
		to right,
		var(--wpbr-green) 0 34%,
		var(--wpbr-yellow) 34% 67%,
		var(--wpbr-blue) 67% 100%
	);
}

.bcn-bio__avatar { flex: none; }
.bcn-bio__img,
.bcn-bio__avatar img {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(17,24,39,.12);
}

.bcn-bio__body { flex: 1 1 auto; min-width: 0; }

.bcn-bio__eyebrow {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--wpbr-muted);
}
.bcn-bio__name {
	margin: 2px 0 0;
	font-family: var(--wpbr-serif);
	font-size: 1.25rem;
	line-height: 1.2;
}
.bcn-bio__name a { color: var(--wpbr-ink); text-decoration: none; }
.bcn-bio__name a:hover { color: var(--wpbr-blue-dark); }

/* Selo/cargo do autor. */
.bcn-bio__role {
	display: inline-block;
	margin-top: 6px;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--wpbr-blue-dark);
	background: color-mix(in srgb, var(--wpbr-blue) 12%, #fff);
	border: 1px solid color-mix(in srgb, var(--wpbr-blue) 30%, #fff);
	border-radius: 999px;
}

.bcn-bio__text {
	margin: 10px 0 0;
	font-size: .96rem;
	line-height: 1.6;
	color: var(--wpbr-text);
}

.bcn-bio__links {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bcn-bio__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	padding: 6px 12px;
	border-radius: var(--wpbr-radius-sm);
	color: var(--wpbr-ink);
	background: #fff;
	border: 1px solid var(--wpbr-line);
	transition: border-color .15s ease, color .15s ease;
}
.bcn-bio__link:hover { border-color: var(--wpbr-blue); color: var(--wpbr-blue-dark); }
.bcn-bio__link--in {
	color: #fff;
	background: #0a66c2; /* azul do LinkedIn */
	border-color: #0a66c2;
}
.bcn-bio__link--in:hover { color: #fff; filter: brightness(.95); }

/* Responsivo: empilha em telas estreitas. */
@media (max-width: 520px) {
	.bcn-bio { flex-direction: column; align-items: center; text-align: center; }
	.bcn-bio__links { justify-content: center; }
}