/*
 * Blog SEO — camada "magazine" (estilo portal de notícias).
 * Carregada após front.css; tudo dirigido pelas CSS vars do tema (--bs-*),
 * então segue a identidade de qualquer empresa (white-label).
 */

/* ------------------------------------------------------------- Foco (UX)
 * Foco delicado e "colado" ao campo: anel suave nos inputs (sem o gap do
 * outline-offset) e anel fino interno na busca (que é colada ao botão).
 */
.blog-seo :focus-visible {
	outline-width: 2px;
	outline-offset: 1px;
}

.blog-seo input:focus,
.blog-seo input:focus-visible,
.blog-seo textarea:focus,
.blog-seo select:focus {
	outline: none;
	border-color: var(--bs-color-secondary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-color-secondary) 22%, transparent);
}

.blog-seo-search input:focus,
.blog-seo-search input:focus-visible {
	outline: 1.5px solid var(--bs-color-secondary);
	outline-offset: -1.5px;
	box-shadow: none;
	border-color: var(--bs-color-secondary);
}

/* ---------------------------------------------------------------- Header */
/* A faixa de acento fica sticky junto do header: ao rolar, os dois
   permanecem grudados no topo (estado idêntico ao topo da página). */
.blog-seo-topbar {
	position: sticky;
	top: 0;
	z-index: 51;
	height: 2px;
	background: linear-gradient(90deg, var(--bs-color-secondary), var(--bs-color-highlight));
}

.blog-seo-header {
	top: 2px;
	background: var(--bs-color-bg);
	backdrop-filter: none;
	box-shadow: 0 1px 0 var(--bs-color-border);
}

.blog-seo-header__inner {
	min-height: 76px;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.blog-seo-logo__text {
	font-size: 1.55rem;
	letter-spacing: -0.01em;
}

.blog-seo-logo img {
	max-height: 50px;
	width: auto;
}

.blog-seo-nav {
	margin-left: 0.5rem;
}

.blog-seo-nav__list {
	gap: 1.4rem;
	align-items: center;
}

.blog-seo-nav__list a {
	position: relative;
	display: inline-block;
	padding: 0.4rem 0;
	font-size: 0.98rem;
	color: var(--bs-color-primary);
}

.blog-seo-nav__list a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 3px;
	border-radius: 2px;
	background: var(--bs-color-highlight);
	transform: scaleX(0);
	transition: transform 0.16s ease;
}

.blog-seo-nav__list a:hover,
.blog-seo-nav__list .current-menu-item > a,
.blog-seo-nav__list a[aria-current="page"] {
	color: var(--bs-color-highlight);
}

.blog-seo-nav__list a:hover::after,
.blog-seo-nav__list .current-menu-item > a::after,
.blog-seo-nav__list a[aria-current="page"]::after {
	transform: scaleX(1);
}

.blog-seo-header__actions {
	gap: 0.5rem;
}

/* No desktop o "drawer" é transparente ao layout (nav + ações ficam como
   filhos diretos do header). No mobile ele vira um painel deslizante. */
.blog-seo-drawer {
	display: contents;
}

.blog-seo-navoverlay,
.blog-seo-drawer__close {
	display: none;
}

.blog-seo-search input,
.blog-seo-search button {
	height: 42px;
	box-sizing: border-box;
}

.blog-seo-search input {
	border-radius: 999px 0 0 999px;
	border-right: 0;
	min-width: 200px;
}

.blog-seo-search button {
	border-radius: 0 999px 999px 0;
	display: grid;
	place-items: center;
	padding: 0 0.95rem;
}

.blog-seo-search button svg {
	display: block;
}

.blog-seo-theme-toggle {
	width: 40px;
	height: 40px;
}

/* Menu mobile (checkbox hack — sem JS) */
.blog-seo-navcb,
.blog-seo-burger {
	display: none;
}

.blog-seo-burger {
	width: 42px;
	height: 42px;
	border: 1px solid var(--bs-color-border);
	border-radius: 10px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	margin-left: auto;
}

.blog-seo-burger span,
.blog-seo-burger span::before,
.blog-seo-burger span::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--bs-color-primary);
	border-radius: 2px;
}

.blog-seo-burger span {
	position: relative;
}

.blog-seo-burger span::before {
	content: '';
	position: absolute;
	top: -6px;
}

.blog-seo-burger span::after {
	content: '';
	position: absolute;
	top: 6px;
}

/* ------------------------------------------------------------------ Hero */
.blog-seo-hero {
	margin: 1.75rem 0 2.25rem;
	border-radius: calc(var(--bs-radius) * 2);
	overflow: hidden;
	box-shadow: var(--bs-shadow-card);
}

/* Sem hero (home com destaque desligado): o conteúdo/sidebar ganham o respiro
   que o hero daria, para não colar na navbar. O single já tem o seu respiro. */
body:not(.single) .blog-seo-container > .blog-seo-layout:first-child {
	margin-top: 1.75rem;
}

.blog-seo-hero__link {
	display: block;
	position: relative;
	min-height: 400px;
	background: var(--bs-color-primary);
	color: #fff;
	text-decoration: none;
	border-radius: 0;
}

.blog-seo-hero__media {
	position: absolute;
	inset: 0;
}

.blog-seo-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-seo-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 16, 30, 0.05) 0%, rgba(10, 16, 30, 0.55) 55%, rgba(10, 16, 30, 0.9) 100%);
}

.blog-seo-hero__body {
	position: relative;
	z-index: 1;
	min-height: 400px;
	max-width: 760px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.7rem;
	padding: clamp(1.5rem, 4vw, 3rem);
}

.blog-seo-hero__title {
	color: #fff;
	font-size: clamp(1.7rem, 3.6vw, 2.7rem);
	line-height: 1.15;
	margin: 0;
}

.blog-seo-hero__excerpt {
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.05rem;
	margin: 0;
	max-width: 60ch;
}

.blog-seo-hero__meta {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9rem;
}

.blog-seo-chip {
	align-self: flex-start;
	display: inline-block;
	background: var(--bs-color-highlight);
	color: #fff;
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.32rem 0.7rem;
	border-radius: 999px;
}

/* ---------------------------------------------------------------- Layout */
.blog-seo-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 2.5rem;
	align-items: start;
	margin-bottom: 3.5rem;
}

.blog-seo-layout__main {
	min-width: 0;
}

.blog-seo-layout .blog-seo-section {
	margin: 0 0 2rem;
}

.blog-seo-layout__aside {
	position: sticky;
	/* Folga abaixo do header fixo (faixa 4px + navbar ~80px) para a sidebar
	   não "colar" na navbar ao rolar. */
	top: 116px;
	display: grid;
	gap: 1.5rem;
	align-self: start;
}

.blog-seo-grid--cols-1 {
	grid-template-columns: 1fr;
}

.blog-seo-grid--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blog-seo-grid--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Posição da sidebar */
.blog-seo-layout--left {
	grid-template-columns: 330px minmax(0, 1fr);
}

.blog-seo-layout--left .blog-seo-layout__aside {
	order: -1;
}

.blog-seo-layout--none {
	grid-template-columns: 1fr;
}

/* Hero modular — cartão base com imagem + overlay */
.blog-seo-hcard {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: calc(var(--bs-radius) * 1.5);
	background: var(--bs-color-primary);
	color: #fff;
	text-decoration: none;
	min-height: 280px;
}

/* Hover INTERNO (não desloca o card): zoom suave da imagem nos cards com foto. */
.blog-seo-hcard .blog-seo-hcard__media img {
	transition: transform 0.5s ease;
	will-change: transform;
}

.blog-seo-hcard:hover .blog-seo-hcard__media img {
	transform: scale(1.07);
}

/* Card sem imagem: sem zoom — apenas escurece levemente o título (estilo G1). */
.blog-seo-hcard--noimg .blog-seo-hcard__title {
	transition: filter 0.15s ease;
}

.blog-seo-hcard--noimg:hover .blog-seo-hcard__title {
	filter: brightness(0.82);
}

.blog-seo-hcard__media,
.blog-seo-hcard__media img,
.blog-seo-hcard__overlay {
	position: absolute;
	inset: 0;
}

.blog-seo-hcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-seo-hcard__overlay {
	background: linear-gradient(180deg, rgba(10, 16, 30, 0.05) 0%, rgba(10, 16, 30, 0.5) 55%, rgba(10, 16, 30, 0.9) 100%);
}

/* Texto ancorado no RODAPÉ do card via posição absoluta: o bloco cresce para
   CIMA (sobre a imagem) e o respiro inferior (padding-bottom) é sempre garantido
   — imune ao corte de overflow do flexbox. */
.blog-seo-hcard__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.75rem, 3vw, 2.25rem);
}

.blog-seo-hcard__title {
	color: #fff;
	font-family: var(--bs-font-heading);
	font-weight: 800;
	line-height: 1.2;
	font-size: 1.15rem;
}

.blog-seo-hcard__excerpt {
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
	max-width: 60ch;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Título do destaque também limitado para não "empurrar" o conteúdo. */
.blog-seo-hcard__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* O título do destaque agora é um cabeçalho (h2/h3): reforça cor e zera margem
   para vencer o estilo padrão de headings do front.css. */
.blog-seo-hcard .blog-seo-hcard__title {
	margin: 0;
}
.blog-seo-hcard:not(.blog-seo-hcard--noimg) .blog-seo-hcard__title {
	color: #fff;
}

/* Respiro inferior do card principal, alinhado ao dos secundários. */
.blog-seo-hcard--main .blog-seo-hcard__body {
	padding-bottom: clamp(1.75rem, 3vw, 2.25rem);
}

.blog-seo-hcard__meta {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.85rem;
}

.blog-seo-hcard--main {
	min-height: 400px;
}

.blog-seo-hcard--main .blog-seo-hcard__title {
	font-size: clamp(1.45rem, 2.6vw, 2.05rem);
}

/* Destaque SEM imagem: fundo claro, título na cor da marca e texto centralizado
 * verticalmente (estilo G1 para manchetes sem foto). */
.blog-seo-hcard--noimg {
	background: var(--bs-hero-noimg-bg, var(--bs-color-bg));
	box-shadow: var(--bs-shadow-card);
	color: var(--bs-color-text);
}

.blog-seo-hcard--noimg .blog-seo-hcard__body {
	top: 0;
	justify-content: center;
}

.blog-seo-hcard--noimg .blog-seo-hcard__title {
	color: var(--bs-hero-noimg-title, var(--bs-color-highlight));
}

.blog-seo-hcard--noimg .blog-seo-hcard__excerpt,
.blog-seo-hcard--noimg .blog-seo-hcard__meta {
	color: var(--bs-hero-noimg-text, var(--bs-color-text-muted));
}

/* Estilo overlay: 1 grande + 2 menores (G1) */
.blog-seo-hero--overlay .blog-seo-hero__layout {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 1rem;
	min-height: 460px;
}

.blog-seo-hero--overlay .blog-seo-hero__secondary {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: 0;
}

.blog-seo-hero--overlay .blog-seo-hero__secondary .blog-seo-hcard {
	flex: 1;
}

.blog-seo-hero--overlay .blog-seo-hcard {
	height: 100%;
	min-height: 0;
}

.blog-seo-hero--overlay .blog-seo-hcard--sec .blog-seo-hcard__title {
	font-size: 1.05rem;
}

/* Estilo grid: N iguais */
.blog-seo-hero--grid .blog-seo-hero__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, 1fr);
}

.blog-seo-hero--grid.blog-seo-hero--count-2 .blog-seo-hero__grid {
	grid-template-columns: repeat(2, 1fr);
}

.blog-seo-hero--grid .blog-seo-hcard {
	min-height: 320px;
}

/* Cards de post — estilo portal (imagem + categoria sobreposta + rodapé) */
.blog-seo-card {
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.blog-seo-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(16, 24, 40, 0.12);
}

/* Link-capa: o card inteiro abre o post (foto, título, descrição, "leia mais").
   Categoria (vai pra categoria) e data (não navega) ficam ACIMA da capa. */
.blog-seo-card__cover {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.blog-seo-card__cat--inline {
	position: relative;
	z-index: 2;
}

.blog-seo-card__foot time {
	position: relative;
	z-index: 2;
}

.blog-seo-card__top {
	position: relative;
}

.blog-seo-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bs-color-bg-alt);
}

.blog-seo-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.blog-seo-card:hover .blog-seo-card__img {
	transform: scale(1.05);
}

/* Sem imagem: header com gradiente da marca (não fica vazio). */
.blog-seo-card__media--ph {
	background: linear-gradient(135deg, var(--bs-color-primary), var(--bs-color-secondary));
}

.blog-seo-card__cat {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	background: var(--bs-color-secondary);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	text-decoration: none;
}

/* Vence a regra global de link (.blog-seo a) sem mexer no posicionamento. */
.blog-seo-card a.blog-seo-card__cat,
.blog-seo-card a.blog-seo-card__cat:hover {
	color: #fff;
}

.blog-seo-card__cat:hover {
	filter: brightness(1.08);
	color: #fff;
}

.blog-seo-card__body {
	padding: 1rem 1.15rem 1.15rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.blog-seo-card__title {
	font-size: 1.12rem;
	line-height: 1.3;
	margin: 0;
	/* A cor fica no BOX (h3) para que as reticências (geradas pelo box) também
	   mudem no hover — não só o texto do link. */
	color: var(--bs-color-primary);
	transition: color 0.15s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-seo-card__title a {
	color: inherit;
	text-decoration: none;
}

.blog-seo-card:hover .blog-seo-card__title,
.blog-seo-card__title a:hover {
	color: var(--bs-color-highlight);
}

.blog-seo-card__excerpt {
	color: var(--bs-color-text-muted);
	font-size: 0.92rem;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-seo-card__foot {
	margin-top: auto;
	padding-top: 0.85rem;
	border-top: 1px solid var(--bs-color-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.blog-seo-card__meta {
	color: var(--bs-color-text-muted);
	font-size: 0.8rem;
	display: flex;
	gap: 0.35rem;
	align-items: center;
	flex-wrap: wrap;
}

.blog-seo-card__author {
	font-weight: 600;
	color: var(--bs-color-text);
}

.blog-seo-card__more {
	/* Acima do link-capa: recebe hover próprio (seta desliza) ao passar sobre ele. */
	position: relative;
	z-index: 2;
	color: var(--bs-color-highlight);
	font-weight: 700;
	font-size: 0.82rem;
	text-decoration: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.blog-seo-card__more span {
	transition: transform 0.18s ease;
}

.blog-seo-card__more:hover {
	text-decoration: none;
}

.blog-seo-card__more:hover span {
	transform: translateX(4px);
}

/* Card SEM imagem destacada: versão editorial (texto), faixa colorida no topo,
   categoria inline, título maior e excerpt mais longo (aproveita o espaço). */
.blog-seo-card--noimg {
	border-top: 4px solid var(--bs-color-secondary);
}

.blog-seo-card--noimg .blog-seo-card__body {
	padding-top: 1.3rem;
	gap: 0.6rem;
}

.blog-seo-card__cat--inline {
	position: static;
	align-self: flex-start;
}

.blog-seo-card--noimg .blog-seo-card__title {
	font-size: 1.3rem;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.blog-seo-card--noimg .blog-seo-card__excerpt {
	-webkit-line-clamp: 5;
	line-clamp: 5;
}

.blog-seo-section__title {
	font-size: 1.35rem;
}

/* Filtro de categorias (client-side) em "Últimas publicações" */
.blog-seo-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.4rem;
}

.blog-seo-filter__btn {
	background: transparent;
	color: var(--bs-color-text);
	border: 1.5px solid var(--bs-color-border);
	border-radius: 999px;
	padding: 0.4rem 1.05rem;
	font-size: 0.84rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.blog-seo-filter__btn:hover {
	border-color: var(--bs-color-secondary);
	color: var(--bs-color-secondary);
}

.blog-seo-filter__btn.is-active,
.blog-seo-filter__btn.is-active:hover {
	background: var(--bs-color-secondary);
	border-color: var(--bs-color-secondary);
	color: #fff;
}

/* --------------------------------------------------------------- Widgets */
.blog-seo-widget {
	background: var(--bs-color-bg);
	border: 1px solid var(--bs-color-border);
	border-radius: calc(var(--bs-radius) * 1.5);
	padding: 1.1rem 1.25rem 1.3rem;
	box-shadow: var(--bs-shadow-card);
}

.blog-seo-widget__title {
	font-size: 0.92rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 0.95rem;
	padding-left: 0.6rem;
	position: relative;
	color: var(--bs-color-primary);
}

.blog-seo-widget__title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.12em;
	bottom: 0.12em;
	width: 4px;
	border-radius: 2px;
	background: var(--bs-color-highlight);
}

.blog-seo-side__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-seo-side__item {
	position: relative;
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	padding: 0.7rem 0.6rem;
	margin: 0 -0.6rem;
	border-radius: 10px;
	transition: background 0.15s ease;
}

/* Link-capa: a linha inteira do "Mais lidos"/"Recentes" abre o post. */
.blog-seo-side__cover {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.blog-seo-side__item:not(:last-child) {
	border-bottom: 1px solid var(--bs-color-border);
}

.blog-seo-side__item:hover {
	background: color-mix(in srgb, var(--bs-color-highlight) 7%, transparent);
}

.blog-seo-side__rank {
	font-weight: 800;
	font-size: 1.7rem;
	line-height: 1;
	color: var(--bs-color-border);
	min-width: 1.3em;
	text-align: center;
	flex: 0 0 auto;
	transition: color 0.15s ease;
}

.blog-seo-side__item:first-child .blog-seo-side__rank {
	color: var(--bs-color-highlight);
}

/* O número no hover puxa a mesma cor do #01 (destaque) — segue o tema. */
.blog-seo-side__item:hover .blog-seo-side__rank {
	color: var(--bs-color-highlight);
}

.blog-seo-side__thumb {
	flex: 0 0 auto;
	display: block;
	overflow: hidden;
	border-radius: 8px;
}

.blog-seo-side__thumb img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	transition: transform 0.25s ease;
}

.blog-seo-side__item:hover .blog-seo-side__thumb img {
	transform: scale(1.06);
}

.blog-seo-side__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* `.blog-seo-side__item` na frente vence a regra global de link (.blog-seo a):
   título usa a cor de TEXTO principal (que inverte sozinha no modo escuro). */
.blog-seo-side__item .blog-seo-side__link {
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.3;
	color: var(--bs-color-text);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.15s ease;
}

/* Recentes: a imagem acompanha a altura do bloco de texto (título até 3 linhas). */
.blog-seo-side__list:not(.is-ranked) .blog-seo-side__item {
	align-items: stretch;
}
.blog-seo-side__list:not(.is-ranked) .blog-seo-side__thumb {
	align-self: stretch;
}
.blog-seo-side__list:not(.is-ranked) .blog-seo-side__thumb img {
	width: 64px;
	height: 100%;
	min-height: 56px;
}

.blog-seo-side__item:hover .blog-seo-side__link {
	color: var(--bs-color-highlight);
}

.blog-seo-side__date {
	font-size: 0.76rem;
	color: var(--bs-color-text-muted);
	margin-top: 3px;
}

.blog-seo-side__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	margin-top: 5px;
}

.blog-seo-side__meta .blog-seo-side__date {
	margin-top: 0;
}

.blog-seo-side__views {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	color: var(--bs-color-secondary);
	background: color-mix(in srgb, var(--bs-color-secondary) 12%, transparent);
	padding: 2px 7px;
	border-radius: 999px;
}

/* Modo claro: cor secundária. Modo escuro: cor de destaque (badge preenchido,
   bem visível sobre o fundo escuro). */
[data-bs-theme="dark"] .blog-seo-side__views {
	color: #fff;
	background: var(--bs-color-highlight);
}

.blog-seo-side__views svg {
	width: 12px;
	height: 12px;
}

.blog-seo-cats {
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-seo-cats li:not(:last-child) {
	border-bottom: 1px solid var(--bs-color-border);
}

.blog-seo-cats a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 0.6rem;
	margin: 0 -0.6rem;
	border-radius: 10px;
	text-decoration: none;
	color: var(--bs-color-text);
	font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease;
}

.blog-seo-cats a:hover {
	background: color-mix(in srgb, var(--bs-color-highlight) 7%, transparent);
	color: var(--bs-color-highlight);
}

.blog-seo-cats__count {
	background: var(--bs-color-bg-alt);
	color: var(--bs-color-text-muted);
	border-radius: 999px;
	padding: 0.1rem 0.6rem;
	min-width: 1.6rem;
	text-align: center;
	font-size: 0.78rem;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease;
}

.blog-seo-cats a:hover .blog-seo-cats__count {
	background: var(--bs-color-highlight);
	color: #fff;
}

/* ---------------------------------------------------------------- Footer */
.blog-seo-footer {
	margin-top: 3rem;
	/* Glow sutil no topo central + cor de marca (menos "chapado"). */
	background:
		radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--bs-color-secondary) 20%, transparent), transparent 58%),
		var(--bs-color-primary);
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.9rem;
}

/* Faixa de acento (azul → vermelho do tema) no topo do rodapé — igual à da
   navbar (mesmo gradiente e espessura). */
.blog-seo-footer::before {
	content: '';
	display: block;
	height: 2px;
	background: linear-gradient(90deg, var(--bs-color-secondary), var(--bs-color-highlight));
}

/* Layout portal: logo (esquerda) + links/social (direita). */
.blog-seo-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	padding-block: 2rem 1.6rem;
}

.blog-seo-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.blog-seo-footer__logo {
	text-decoration: none;
	display: inline-block;
}

.blog-seo-footer__logo .blog-seo-logo__text {
	color: #fff;
	font-size: 1.4rem;
}

.blog-seo-footer__logo .blog-seo-logo__img {
	max-height: 40px;
	width: auto;
}

.blog-seo-footer__tagline {
	margin: 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.85rem;
	max-width: 46ch;
}

.blog-seo-footer__end {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 1rem 1.75rem;
}

.blog-seo-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.blog-seo-footer__links a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.15s ease;
}

.blog-seo-footer__links a:hover {
	color: #fff;
}

.blog-seo-footer__social {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.blog-seo-footer__social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}

.blog-seo-footer__social a svg {
	width: 17px;
	height: 17px;
}

.blog-seo-footer__social a:hover {
	background: var(--bs-color-highlight);
	transform: translateY(-2px);
}

.blog-seo-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-seo-footer__copy {
	margin: 0;
	padding: 1rem 0;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
	border: 0;
}

/* --------------------------------------------------------------- Anúncios */
.blog-seo-ad {
	display: block;
	margin: 1.75rem 0;
	text-align: center;
}

.blog-seo-ad__label {
	display: block;
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bs-color-text-muted);
	margin-bottom: 0.35rem;
}

.blog-seo-ad__inner {
	display: flex;
	justify-content: center;
}

.blog-seo-ad__link {
	display: inline-block;
	line-height: 0;
	max-width: 100%;
}

.blog-seo-ad__img,
.blog-seo-ad__video {
	max-width: 100%;
	height: auto;
	border-radius: var(--bs-radius);
}

/* In-feed ocupa a linha inteira da grade. */
.blog-seo-grid > .blog-seo-ad {
	grid-column: 1 / -1;
}

.blog-seo-ad--top {
	margin-top: 2.5rem;
}

.blog-seo-ad--sidebar {
	margin: 0 0 1.5rem;
}

/* ------------------------------------------------------------ Responsivo */
@media (max-width: 980px) {
	.blog-seo-layout,
	.blog-seo-layout--left {
		grid-template-columns: 1fr;
	}

	.blog-seo-layout--left .blog-seo-layout__aside {
		order: 0;
	}

	.blog-seo-layout__aside {
		position: static;
	}

	.blog-seo-grid--cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.blog-seo-footer__inner {
		flex-direction: column;
		text-align: center;
		gap: 1.5rem;
	}
	.blog-seo-footer__brand {
		align-items: center;
	}
	.blog-seo-footer__end {
		flex-direction: column;
		justify-content: center;
	}
	.blog-seo-footer__links,
	.blog-seo-footer__social {
		justify-content: center;
	}
}

@media (max-width: 900px) {
	.blog-seo-burger {
		display: inline-flex;
	}

	/* Checkbox acessível (focável por teclado + leitor de tela), oculto;
	   o foco aparece no ícone (burger) ao lado. */
	.blog-seo-navcb {
		display: block;
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.blog-seo-navcb:focus-visible + .blog-seo-burger {
		outline: 2px solid var(--bs-color-secondary);
		outline-offset: 2px;
	}

	/* Drawer: painel deslizante a partir da direita, acima de todo o conteúdo. */
	.blog-seo-drawer {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		position: fixed;
		top: 0;
		right: 0;
		height: 100vh;
		height: 100dvh;
		width: min(86vw, 360px);
		padding: 4.25rem 1.25rem 1.5rem;
		background: var(--bs-color-bg);
		box-shadow: -10px 0 40px rgba(10, 16, 30, 0.22);
		z-index: 1001;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.blog-seo-navcb:checked ~ .blog-seo-drawer {
		transform: translateX(0);
	}

	/* Overlay escurecendo o fundo (clicar fecha o menu). */
	.blog-seo-navoverlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgba(10, 16, 30, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	.blog-seo-navcb:checked ~ .blog-seo-navoverlay {
		opacity: 1;
		visibility: visible;
	}

	/* Botão fechar (X) dentro do drawer. */
	.blog-seo-drawer__close {
		display: block;
		position: absolute;
		top: 0.5rem;
		right: 1.1rem;
		font-size: 2rem;
		line-height: 1;
		color: var(--bs-color-text);
		cursor: pointer;
	}

	/* Trava o scroll do fundo enquanto o drawer está aberto. */
	body:has(.blog-seo-navcb:checked) {
		overflow: hidden;
	}

	.blog-seo-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.blog-seo-nav__list a {
		display: block;
		padding: 0.85rem 0;
		border-bottom: 1px solid var(--bs-color-border);
		font-size: 1.05rem;
	}

	.blog-seo-nav__list a::after {
		display: none;
	}

	/* Ordem no drawer mobile: busca (1) → itens do menu (2) → claro/escuro (3).
	   "display: contents" promove busca e toggle a itens diretos do drawer,
	   permitindo intercalar o menu (.blog-seo-nav) entre eles via "order". */
	.blog-seo-header__actions {
		display: contents;
	}

	.blog-seo-search {
		order: 1;
		width: 100%;
	}

	.blog-seo-nav {
		order: 2;
	}

	.blog-seo-theme-toggle {
		order: 3;
		align-self: flex-start;
	}

	.blog-seo-search input {
		flex: 1;
		min-width: 0;
	}
}

@media (max-width: 760px) {
	.blog-seo-hero--overlay .blog-seo-hero__layout {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.blog-seo-hero--grid .blog-seo-hero__grid,
	.blog-seo-hero--grid.blog-seo-hero--count-2 .blog-seo-hero__grid {
		grid-template-columns: 1fr;
	}

	.blog-seo-hero--overlay .blog-seo-hcard,
	.blog-seo-hero--grid .blog-seo-hcard {
		min-height: 240px;
	}
}

@media (max-width: 640px) {
	.blog-seo-grid--cols-2,
	.blog-seo-grid--cols-3 {
		grid-template-columns: 1fr;
	}

	.blog-seo-hcard--main {
		min-height: 320px;
	}

	.blog-seo-footer__inner {
		flex-direction: column;
		gap: 1.5rem;
	}
}

/* ------------------------------------------------------------ Modo escuro
 * Títulos/links usam a cor PRIMÁRIA (de marca, ex.: navy). No escuro isso
 * ficaria ilegível sobre o fundo escuro — aqui forçamos esses textos a usar
 * a cor de texto clara do tema. Fundos de marca (rodapé, botão de busca)
 * permanecem como estão (já contrastam bem no escuro).
 */
[data-bs-theme="dark"] .blog-seo h1,
[data-bs-theme="dark"] .blog-seo h2,
[data-bs-theme="dark"] .blog-seo h3,
[data-bs-theme="dark"] .blog-seo-logo__text,
[data-bs-theme="dark"] .blog-seo-nav__list a,
[data-bs-theme="dark"] .blog-seo-card__title a,
[data-bs-theme="dark"] .blog-seo-section__title,
[data-bs-theme="dark"] .blog-seo-widget__title,
[data-bs-theme="dark"] .blog-seo-side__link,
[data-bs-theme="dark"] .blog-seo-cats a,
[data-bs-theme="dark"] .blog-seo-share__btn,
[data-bs-theme="dark"] .blog-seo-postnav a {
	color: var(--bs-color-text);
}

/* Cartões/widgets: leve contraste do fundo no escuro. */
[data-bs-theme="dark"] .blog-seo-card,
[data-bs-theme="dark"] .blog-seo-widget {
	background: var(--bs-color-bg-alt);
}

/* Card do autor (hero + box): mais encorpado e elevado no escuro.
   Mantém a borda azul à esquerda; só lapida as outras 3 + gradiente + sombra. */
[data-bs-theme="dark"] .blog-seo-author-hero,
[data-bs-theme="dark"] .blog-seo-authorbox {
	background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.06 ), rgba( 255, 255, 255, 0.015 ) );
	border-top-color: rgba( 255, 255, 255, 0.12 );
	border-right-color: rgba( 255, 255, 255, 0.12 );
	border-bottom-color: rgba( 255, 255, 255, 0.12 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.06 ), 0 12px 30px rgba( 0, 0, 0, 0.35 );
}

[data-bs-theme="dark"] .blog-seo-author-hero__avatar img,
[data-bs-theme="dark"] .blog-seo-authorbox img {
	box-shadow: 0 0 0 2px rgba( 255, 255, 255, 0.1 );
}

/* Logo por modo: mostra o logo certo conforme claro/escuro. Sem variante de
   modo escuro definida, o logo único (.blog-seo-logo__img sem modificador)
   aparece sempre. */
.blog-seo-logo__img--dark {
	display: none;
}

[data-bs-theme="dark"] .blog-seo-logo__img--light {
	display: none;
}

[data-bs-theme="dark"] .blog-seo-logo__img--dark {
	display: inline-block;
}

/* Campo de busca legível no escuro. */
[data-bs-theme="dark"] .blog-seo-search input {
	background: var(--bs-color-bg-alt);
	color: var(--bs-color-text);
}

/* No dark, o botão usa a secundária (mais viva) — a primária (navy) tem pouco
   contraste sobre o fundo escuro. */
[data-bs-theme="dark"] .blog-seo-search button {
	background: var(--bs-color-secondary);
}

/* ------------------------------------------------------ Newsletter (banner)
 * Card de destaque (cores do tema) abaixo das publicações e no fim dos posts.
 */
.blog-seo-news-banner {
	margin: 2.25rem 0 0;
}

.blog-seo-newsletter {
	background: linear-gradient(135deg, var(--bs-color-secondary), var(--bs-color-primary));
	border: 0;
	border-radius: 18px;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	color: #fff;
	text-align: center;
}

.blog-seo-newsletter__head {
	margin: 0 0 0.4rem;
}

.blog-seo-newsletter__head strong {
	display: block;
	color: #fff;
	font-family: var(--bs-font-heading);
	font-weight: 800;
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
	line-height: 1.2;
}

.blog-seo-newsletter__row {
	justify-content: center;
	align-items: stretch;
	max-width: 560px;
	margin: 1.1rem auto 0;
}

.blog-seo-newsletter__row input,
.blog-seo-newsletter__row button {
	height: 50px;
	box-sizing: border-box;
	font-size: 1rem;
}

.blog-seo-newsletter__row input {
	background: #fff;
	border: 0;
	border-radius: var(--bs-radius);
	padding: 0 1rem;
}

.blog-seo-newsletter__row button {
	background: var(--bs-color-highlight);
	color: #fff;
	font-weight: 700;
	padding: 0 1.8rem;
	border-radius: var(--bs-radius);
	white-space: nowrap;
	flex: 0 0 auto;
}

.blog-seo-newsletter__row button:hover {
	filter: brightness( 1.08 );
}

/* No mobile, campos e botão ocupam 100% (botão alinhado com os campos). */
@media (max-width: 600px) {
	.blog-seo-newsletter__row input,
	.blog-seo-newsletter__row button {
		flex: 1 1 100%;
	}
}

/* "Leia também": carrossel horizontal no mobile (scroll nativo + snap).
   Acessível: os links dos cards seguem focáveis por teclado e na ordem de
   leitura para leitores de tela; o "espião" do próximo card sinaliza o swipe. */
@media (max-width: 760px) {
	.blog-seo-related .blog-seo-grid {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.6rem;
		scrollbar-width: thin;
	}

	.blog-seo-related .blog-seo-grid > .blog-seo-card {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}
}

.blog-seo-newsletter__note {
	margin: 0.8rem 0 0;
	color: rgba(255, 255, 255, 0.82);
}

.blog-seo-newsletter .blog-seo-newsletter__msg {
	max-width: 560px;
	margin-inline: auto;
}

/* ------------------------------------------------------ Post (single) */
.blog-seo-single__crumbs {
	margin: 0 0 1.25rem;
}

.blog-seo-breadcrumb {
	font-size: 0.82rem;
}

.blog-seo-breadcrumb ol {
	gap: 0.5rem;
	align-items: center;
}

.blog-seo-breadcrumb a {
	color: var(--bs-color-text-muted);
	text-decoration: none;
	font-weight: 600;
}

.blog-seo-breadcrumb a:hover {
	color: var(--bs-color-highlight);
}

.blog-seo-breadcrumb li {
	display: inline-flex;
	align-items: center;
}

.blog-seo-breadcrumb li:not(:last-child)::after {
	content: '›';
	margin-left: 0.5rem;
	color: var(--bs-color-text-muted);
	opacity: 0.6;
}

.blog-seo-breadcrumb li[aria-current="page"] {
	color: var(--bs-color-text);
	font-weight: 600;
}

.blog-seo-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 2rem 0 0;
}

.blog-seo-share__label {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--bs-color-text-muted);
}

.blog-seo-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bs-color-primary);
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}

.blog-seo-share__btn svg {
	width: 19px;
	height: 19px;
}

.blog-seo-share__btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
}

/* Cores de marca */
.blog-seo-share__btn--whatsapp { background: #25d366; }
.blog-seo-share__btn--x        { background: #000; }
.blog-seo-share__btn--linkedin { background: #0a66c2; }
.blog-seo-share__btn--facebook { background: #1877f2; }
.blog-seo-share__btn--copy     { background: var(--bs-color-secondary); border-radius: 10px; }

.blog-seo-share__btn--copy.is-copied {
	background: #16a34a;
}

/* Mantém o ícone branco vencendo a regra global de link (.blog-seo a). */
.blog-seo-share .blog-seo-share__btn,
.blog-seo-share .blog-seo-share__btn:hover {
	color: #fff;
}

.blog-seo-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 2.5rem 0 1rem;
	align-items: stretch;
}

.blog-seo-postnav__prev,
.blog-seo-postnav__next {
	display: flex;
}

.blog-seo-postnav a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding: 1rem 1.2rem;
	border: 1px solid var(--bs-color-border);
	border-radius: calc(var(--bs-radius) * 1.5);
	background: var(--bs-color-bg);
	color: var(--bs-color-primary);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.blog-seo-postnav a:hover {
	border-color: var(--bs-color-highlight);
	box-shadow: var(--bs-shadow-card);
}

.blog-seo-postnav__next {
	text-align: right;
}

.blog-seo-postnav__label {
	display: flex;
	align-items: center;
	gap: 0.3em;
	font-size: 0.74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bs-color-highlight);
	margin-bottom: 0.25rem;
}

.blog-seo-postnav__next .blog-seo-postnav__label {
	justify-content: flex-end;
}

/* Seta em SVG: centraliza verticalmente com o texto (align-items do label). */
.blog-seo-postnav__chev {
	display: inline-flex;
	align-items: center;
}

.blog-seo-postnav__chev svg {
	width: 1.05em;
	height: 1.05em;
	display: block;
}

/* Título do post anterior/próximo: no máximo 2 linhas (depois corta). */
.blog-seo-postnav__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 640px) {
	.blog-seo-postnav {
		grid-template-columns: 1fr;
	}

	.blog-seo-postnav__next {
		text-align: left;
	}
}

/* Respiro no topo da página de post (conteúdo e sidebar não colam no header).
   Exclui o container do header para a navbar ficar igual à da home. */
body.single .blog-seo-container:not(.blog-seo-header__inner),
body.single .blog-seo-container--narrow,
body.archive .blog-seo-container:not(.blog-seo-header__inner),
body.search .blog-seo-container:not(.blog-seo-header__inner) {
	padding-top: 2rem;
}

/* Dentro do layout com sidebar, o artigo não tem padding-top (alinha o título
   com o topo da barra lateral). */
.blog-seo-layout__main .blog-seo-single {
	padding-top: 0;
}

body.single .blog-seo-single__header {
	margin-top: 0;
}

.blog-seo-single__title {
	margin-top: 0;
}

/* Busca dentro do widget da sidebar */
.blog-seo-widget .blog-seo-search--block input {
	border-radius: 999px 0 0 999px;
}

.blog-seo-widget .blog-seo-search--block button {
	border-radius: 0 999px 999px 0;
}

/* Rodapé: marca um pouco maior */
.blog-seo-footer__brand .blog-seo-logo__text {
	font-size: 1.4rem;
}