/*
Theme Name: CeamSeg Blog
Theme URI: https://ceamseg.com.br
Author: Larissa Borges
Description: Tema do blog da CeamSeg. Replica a identidade visual do site institucional — paleta escura, Hanken Grotesk + Inter, header e rodapé idênticos.
Version: 2.2.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ceamseg-blog
*/

/* ==================================================================
   PALETA — extraída do site oficial
   ================================================================== */
:root{
	--cs-header:    rgba(10,22,36,.88);
	--cs-escuro:    #0E1C2D;
	--cs-footer:    #08131f;
	--cs-claro:     #F5F8FB;   /* fundo da "lightzone" do blog */
	--cs-azul:      #1E6FB8;   /* links, chip ativo, "Ler artigo" */
	--cs-azul-hover:#1751a0;
	--cs-ciano:     #7FC3F0;   /* accent, ícones, selo destaque */
	--cs-titulo:    #132437;
	--cs-corpo:     #4a5f76;
	--cs-meta:      #6b7d92;
	--cs-borda:     #e0e7ee;
	--cs-menu:      #cdddef;
	--cs-rodape:    #8ea5bd;
	--cs-wa:        #25D366;
	--cs-max:       1180px;
	--f-titulo:     'Hanken Grotesk', system-ui, sans-serif;
	--f-corpo:      'Inter', system-ui, sans-serif;
}

*{ box-sizing:border-box }

body{
	margin:0; background:var(--cs-escuro); color:var(--cs-corpo);
	font-family:var(--f-corpo); line-height:1.6;
	-webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--cs-azul); text-decoration:none }
a:hover{ color:var(--cs-azul-hover) }

.cs-lightzone{ background:var(--cs-claro) }

.cs-wrap{ max-width:var(--cs-max); margin:0 auto; padding:0 24px }
.cs-wrap--estreito{ max-width:820px }

.cs-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.cs-skip{ position:absolute; left:-9999px; top:0; z-index:999; background:#fff; padding:12px 18px }
.cs-skip:focus{ left:8px; top:8px }

/* ==================================================================
   HEADER
   ================================================================== */
.cs-header{
	position:sticky; top:0; z-index:60;
	background:var(--cs-header);
	-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
	border-bottom:1px solid rgba(255,255,255,.08);
}
.cs-header__inner{
	max-width:var(--cs-max); margin:0 auto; padding:12px 24px;
	display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.cs-logo{ flex:none; display:block }
.cs-logo img{ height:56px; width:auto }

.cs-nav{ flex:1 }
.cs-menu{
	display:flex; gap:26px; align-items:center; justify-content:center;
	list-style:none; margin:0; padding:0; font-size:14.5px;
}
.cs-menu > li{ position:relative }
.cs-menu a,
.cs-sub-toggle{
	color:var(--cs-menu); font-size:14.5px; font-family:var(--f-corpo);
	display:inline-flex; align-items:center; gap:6px;
	background:none; border:0; cursor:pointer; padding:0;
	transition:color .16s;
}
.cs-menu a:hover, .cs-sub-toggle:hover{ color:#fff }
.cs-menu .is-active > a,
.cs-menu .current-menu-item > a{ color:#fff; font-weight:600 }

/* dropdown Planos */
.cs-tem-sub .sub-menu{
	display:none; position:absolute; top:100%; left:50%;
	transform:translateX(-50%); margin-top:12px; min-width:230px; z-index:70;
	background:#122239; border:1px solid rgba(127,195,240,.2);
	border-radius:14px; padding:8px; list-style:none;
	box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
/* Ponte invisível sobre o vão de 12px entre o botão e o submenu.
   Sem ela, o mouse atravessa um espaço vazio ao descer, perde o :hover
   e o menu fecha antes de dar tempo de clicar. */
.cs-tem-sub .sub-menu::before{
	content:''; position:absolute; top:-14px; left:0; right:0; height:14px;
}
.cs-tem-sub:hover .sub-menu,
.cs-tem-sub.is-open .sub-menu{ display:block }
.cs-tem-sub .sub-menu li{ margin:0 }
.cs-tem-sub .sub-menu a{
	display:flex; align-items:center; gap:11px;
	padding:11px 13px; border-radius:9px; color:var(--cs-menu);
}
.cs-tem-sub .sub-menu a:hover{ background:rgba(127,195,240,.1); color:#fff }
.cs-tem-sub .sub-menu svg{ flex:none }

.cs-wa{
	display:inline-flex; align-items:center; gap:9px; flex:none;
	background:var(--cs-wa); color:#fff;
	font-family:var(--f-titulo); font-weight:700; font-size:14.5px;
	padding:11px 20px; border-radius:9px; white-space:nowrap;
	transition:filter .16s;
}
.cs-wa:hover{ color:#fff; filter:brightness(.94) }

.cs-burger{
	display:none; width:44px; height:44px; flex:none;
	align-items:center; justify-content:center;
	background:rgba(127,195,240,.1); border:1px solid rgba(127,195,240,.18);
	border-radius:10px; cursor:pointer;
}

/* ==================================================================
   HERO DO BLOG
   ================================================================== */
.cs-hero{ max-width:var(--cs-max); margin:0 auto; padding:60px 24px 40px }
.cs-hero__eyebrow{
	font-family:var(--f-titulo); font-weight:700; font-size:12.5px;
	letter-spacing:2.4px; text-transform:uppercase; color:var(--cs-azul); margin:0;
}
.cs-hero__titulo{
	font-family:var(--f-titulo); font-weight:800;
	font-size:clamp(30px,6vw,48px); letter-spacing:-.03em; line-height:1.06;
	color:var(--cs-titulo); margin:14px 0 0; text-wrap:balance;
}
.cs-hero__sub{
	font-size:clamp(15.5px,2.2vw,18px); line-height:1.6;
	color:#3a4e64; margin:16px 0 0; max-width:600px;
}

/* CHIPS de categoria */
.cs-chips{
	max-width:var(--cs-max); margin:0 auto; padding:0 24px 34px;
	display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
.cs-chip{
	background:#fff; border:1px solid var(--cs-borda); color:#4a5f76;
	font-size:13px; padding:8px 16px; border-radius:50px;
	transition:all .16s;
}
.cs-chip:hover{ border-color:var(--cs-azul); color:var(--cs-azul) }
.cs-chip.is-active{
	background:var(--cs-azul); border-color:var(--cs-azul); color:#fff;
	font-family:var(--f-titulo); font-weight:700;
}
.cs-chip.is-active:hover{ color:#fff }

/* ==================================================================
   CARDS
   ================================================================== */
.cs-conteudo{ max-width:var(--cs-max); margin:0 auto; padding:0 24px 60px }

.cs-grid{
	display:grid; grid-template-columns:1fr; gap:22px; margin-top:34px;
}
@media (min-width:760px){ .cs-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .cs-grid{ grid-template-columns:repeat(3,1fr) } }

/* card comum */
.cs-card{
	display:flex; flex-direction:column;
	background:#fff; border:1px solid var(--cs-borda);
	border-radius:18px; overflow:hidden; color:inherit;
	transition:transform .18s, box-shadow .18s;
}
.cs-card:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(19,36,55,.35) }

.cs-card__midia{ position:relative; min-height:190px; display:block;
	background:linear-gradient(135deg,#1c3452,#122239) }
.cs-card__midia img{
	position:absolute; inset:0; width:100%; height:100%;
	object-fit:cover; object-position:center 25%; opacity:.92;
}
.cs-card__cat{
	position:absolute; top:14px; left:14px; z-index:2;
	background:rgba(10,22,36,.7); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
	color:var(--cs-ciano); font-family:var(--f-titulo); font-weight:700;
	font-size:11.5px; padding:5px 11px; border-radius:50px;
}
.cs-card__cat:hover{ color:#fff }

.cs-card__corpo{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1 }
.cs-card__meta{ font-size:12px; color:var(--cs-meta); margin:0 0 9px }
.cs-card__titulo{
	font-family:var(--f-titulo); font-weight:700; font-size:18.5px;
	line-height:1.25; color:var(--cs-titulo); margin:0 0 10px;
}
.cs-card__titulo a{ color:inherit }
.cs-card__titulo a:hover{ color:var(--cs-azul) }
.cs-card__resumo{ font-size:14px; line-height:1.6; color:var(--cs-corpo); margin:0 0 16px; flex:1 }
.cs-card__link{
	font-family:var(--f-titulo); font-weight:700; font-size:14px;
	color:var(--cs-azul); align-self:flex-start;
}

/* card em destaque */
.cs-destaque{
	display:grid; grid-template-columns:1fr; gap:0;
	background:#fff; border:1px solid var(--cs-borda);
	border-radius:22px; overflow:hidden; margin-bottom:0;
}
@media (min-width:1040px){ .cs-destaque{ grid-template-columns:1.15fr .85fr } }

.cs-destaque .cs-card__midia{ min-height:280px }
.cs-destaque .cs-card__corpo{ padding:clamp(26px,3.5vw,40px); justify-content:center }
.cs-destaque .cs-card__meta{ font-size:12.5px; margin-bottom:12px;
	display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.cs-destaque .cs-card__meta .cs-cat-txt{ color:var(--cs-azul); font-weight:600 }
.cs-destaque .cs-card__titulo{
	font-size:clamp(22px,3vw,30px); font-weight:800;
	letter-spacing:-.02em; line-height:1.15; margin-bottom:12px; text-wrap:balance;
}
.cs-destaque .cs-card__resumo{ font-size:15px; line-height:1.65; margin-bottom:20px }
.cs-destaque .cs-card__link{ font-size:15px }

.cs-selo{
	position:absolute; top:18px; left:18px; z-index:2;
	background:var(--cs-ciano); color:#0A1620;
	font-family:var(--f-titulo); font-weight:700; font-size:12px;
	padding:6px 13px; border-radius:50px;
}

.cs-secao-titulo{
	font-family:var(--f-titulo); font-weight:800; font-size:24px;
	letter-spacing:-.02em; color:var(--cs-titulo); margin:56px 0 0;
}

.cs-vazio{
	background:#fff; border:1px solid var(--cs-borda); border-radius:18px;
	padding:56px 32px; text-align:center; margin-top:34px;
}
.cs-vazio h2{ font-family:var(--f-titulo); color:var(--cs-titulo); margin:0 0 8px }

/* ==================================================================
   PAGINAÇÃO
   ================================================================== */
.cs-conteudo .pagination, .cs-conteudo .navigation{ margin-top:40px }
.nav-links{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap }
.page-numbers{
	display:inline-block; padding:9px 16px; border-radius:50px;
	background:#fff; border:1px solid var(--cs-borda); color:#4a5f76;
	font-size:13.5px;
}
.page-numbers.current{
	background:var(--cs-azul); border-color:var(--cs-azul); color:#fff;
	font-family:var(--f-titulo); font-weight:700;
}
.screen-reader-text{ position:absolute; left:-9999px }

/* ==================================================================
   ARTIGO
   ================================================================== */
.cs-artigo{ max-width:820px; margin:0 auto; padding:52px 24px 20px }
.cs-migalhas{ font-size:12.5px; color:var(--cs-meta); margin:0 0 18px }
.cs-migalhas a{ color:var(--cs-meta) }
.cs-migalhas a:hover{ color:var(--cs-azul) }

.cs-artigo__titulo{
	font-family:var(--f-titulo); font-weight:800;
	font-size:clamp(27px,5vw,42px); letter-spacing:-.03em; line-height:1.1;
	color:var(--cs-titulo); margin:0 0 14px; text-wrap:balance;
}
.cs-artigo__meta{ font-size:13px; color:var(--cs-meta); margin:0 }
.cs-artigo__meta .cs-cat-txt{ color:var(--cs-azul); font-weight:600 }
.cs-artigo__capa{ border-radius:18px; overflow:hidden; margin:26px 0 8px }

.cs-artigo__corpo{ font-size:16.5px; line-height:1.75; color:#33475d; padding:28px 0 8px }
.cs-artigo__corpo > *:first-child{ margin-top:0 }
.cs-artigo__corpo h2{
	font-family:var(--f-titulo); font-weight:800; font-size:25px;
	letter-spacing:-.02em; color:var(--cs-titulo); margin:40px 0 12px;
}
.cs-artigo__corpo h3{
	font-family:var(--f-titulo); font-weight:700; font-size:20px;
	color:var(--cs-titulo); margin:30px 0 10px;
}
.cs-artigo__corpo p{ margin:0 0 18px }
.cs-artigo__corpo ul, .cs-artigo__corpo ol{ margin:0 0 20px; padding-left:22px }
.cs-artigo__corpo li{ margin-bottom:8px }
.cs-artigo__corpo img{ border-radius:14px; margin:24px 0 }
.cs-artigo__corpo blockquote{
	border-left:3px solid var(--cs-ciano); margin:26px 0;
	padding:4px 0 4px 20px; color:var(--cs-corpo); font-style:italic;
}
.cs-artigo__corpo table{ width:100%; border-collapse:collapse; margin:24px 0; font-size:15px }
.cs-artigo__corpo th, .cs-artigo__corpo td{
	border:1px solid var(--cs-borda); padding:11px 13px; text-align:left;
}
.cs-artigo__corpo th{ background:#EAF1F8; font-family:var(--f-titulo); font-weight:700; color:var(--cs-titulo) }

.cs-cta{
	background:linear-gradient(135deg,#1c3452,#122239);
	border-radius:22px; padding:clamp(30px,4vw,46px); margin:44px 0 0;
	text-align:center; color:#cdddef;
}
.cs-cta h2{
	font-family:var(--f-titulo); font-weight:800; font-size:clamp(21px,3vw,27px);
	letter-spacing:-.02em; color:#fff; margin:0 0 10px;
}
.cs-cta p{ margin:0 0 24px; font-size:15px; color:#A9BFD6 }

/* ==================================================================
   RODAPÉ
   ================================================================== */
.cs-footer{ background:var(--cs-footer); border-top:1px solid rgba(255,255,255,.08) }
.cs-footer__grid{
	max-width:var(--cs-max); margin:0 auto;
	padding:64px 24px 32px;
	display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:40px;
}
.cs-footer__logo{ height:64px; width:auto; margin-bottom:18px }
.cs-footer__sobre{ font-size:14.5px; line-height:1.6; color:var(--cs-rodape); margin:0 0 20px; max-width:300px }

.cs-social{ display:flex; gap:12px }
.cs-social a{
	width:40px; height:40px; border-radius:10px;
	background:rgba(127,195,240,.1);
	display:flex; align-items:center; justify-content:center;
}
.cs-social a.is-wa{ background:rgba(37,211,102,.14) }

.cs-footer__titulo{
	font-family:var(--f-titulo); font-weight:700; font-size:15px;
	color:#fff; margin-bottom:16px;
}
.cs-footer__links{ display:grid; gap:11px; font-size:14.5px }
.cs-footer__links a, .cs-footer__links span{ color:var(--cs-rodape) }
.cs-footer__links a:hover{ color:#fff }
.cs-footer__contato{ gap:12px }
.cs-footer__contato a, .cs-footer__contato span{ display:flex; align-items:center; gap:10px }
.cs-footer__contato svg{ flex:none }

.cs-footer__bar{
	border-top:1px solid rgba(255,255,255,.07);
	max-width:var(--cs-max); margin:0 auto;
	padding:22px 24px; display:flex; justify-content:space-between;
	gap:16px; flex-wrap:wrap; font-size:13px; color:#5f778f;
}

.cs-wa-float{
	position:fixed; right:22px; bottom:22px; z-index:80;
	width:58px; height:58px; border-radius:50%;
	background:var(--cs-wa);
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 10px 30px -8px rgba(37,211,102,.55);
}

/* ==================================================================
   MOBILE
   ================================================================== */
@media (max-width:1040px){
	.cs-burger{ display:flex }
	.cs-wa{ display:none }
	.cs-nav{
		display:none; order:4; flex-basis:100%;
		border-top:1px solid rgba(255,255,255,.08);
		background:rgba(10,22,36,.99);
		margin:12px -24px -12px; padding:12px 24px 20px;
	}
	body.cs-menu-aberto .cs-nav{ display:block }
	.cs-header__inner{ flex-wrap:wrap }
	.cs-menu{ flex-direction:column; align-items:stretch; gap:0 }
	.cs-menu > li{ border-bottom:1px solid rgba(255,255,255,.05) }
	.cs-menu a, .cs-sub-toggle{
		display:flex; justify-content:space-between; width:100%;
		font-size:16px; font-weight:500; padding:13px 4px;
	}
	.cs-tem-sub .sub-menu{
		position:static; transform:none; margin:4px 0 4px 4px;
		min-width:0; background:none; border:0; border-left:2px solid rgba(127,195,240,.3);
		border-radius:0; padding:4px 0 4px 14px; box-shadow:none;
	}
	.cs-tem-sub .sub-menu a{ color:#A9BFD6; font-size:15px; padding:10px 4px }
}

@media (max-width:760px){
	.cs-hero{ padding:40px 24px 28px }
	.cs-chips{ justify-content:flex-start }
	.cs-footer__bar{ justify-content:flex-start }
}