/*
Theme Name: Housein Blog
Theme URI: https://agenciahousein.com/blog/
Author: Agência Housein
Description: Tema do blog da Agência Housein. Usa o mesmo cabeçalho, menu, rodapé, cores e fonte do site em HTML. O CSS global do site fica em assets/css/global.css; este arquivo tem só o que é do blog (prefixo blg-).
Version: 1.0.3
Requires at least: 6.4
Requires PHP: 7.4
License: Uso exclusivo da Agência Housein
Text Domain: housein-blog
*/

/* =========================================================
   Ajustes gerais do blog
   ========================================================= */
/* Barra do WordPress (só aparece logado): o header fixo fica abaixo dela */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .header { top: 0; } }

/* =========================================================
   Cabeçalho escuro (listagem e post)
   ========================================================= */
.blg-topo { position: relative; overflow: hidden; background: var(--azul); color: var(--branco); }
.blg-topo__inner { position: relative; z-index: 1; min-height: clamp(240px, 22vw, 320px); display: flex; flex-direction: column; justify-content: center; padding: 3.5rem 0; }
.blg-topo h1 { color: var(--branco); margin: 0 0 .8rem; font-size: calc(clamp(2.4rem, 4.2vw, 3.5rem) + 2px); letter-spacing: -0.03em; max-width: 900px; }
.blg-topo__inner > p { margin: 0; max-width: 680px; color: var(--branco); font-weight: 500; font-size: calc(1.05rem + 2px); line-height: 1.5; border-left: 2px solid var(--amarelo); padding-left: 1rem; }
.blg-topo .pre { margin-bottom: .6rem; }

@media (max-width: 760px) { .blg-topo__inner { padding: 3rem 0; min-height: 0; } }

/* Foto no fundo do cabeçalho (fixa na página Blog; imagem de destaque nos posts) */
.blg-topo__img { position: absolute; inset: 0; z-index: 0; }
.blg-topo__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.blg-topo__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,34,48,.92) 0%, rgba(28,34,48,.72) 45%, rgba(28,34,48,.3) 100%); }
/* Post: foto esticada, levemente desfocada e mais escura para o título ficar legível */
.blg-topo--desfoque .blg-topo__img { overflow: hidden; }
.blg-topo--desfoque .blg-topo__img img { filter: blur(6px); transform: scale(1.08); }
.blg-topo--desfoque .blg-topo__img::after { background: linear-gradient(90deg, rgba(28,34,48,.93) 0%, rgba(28,34,48,.8) 50%, rgba(28,34,48,.55) 100%); }
@media (max-width: 760px) { .blg-topo__img::after, .blg-topo--desfoque .blg-topo__img::after { background: rgba(28,34,48,.82); } }

/* Post: título menor (os títulos dos posts são longos) */
.blg-topo--post .blg-topo__inner { min-height: clamp(260px, 24vw, 360px); padding: 3rem 0 3.2rem; }
.blg-topo--post h1 { font-size: clamp(28px, calc(1.3vw + 18px), 42px); line-height: 1.2; letter-spacing: -0.02em; max-width: 860px; margin-bottom: 1.2rem; }
.blg-trilha { display: flex; flex-wrap: wrap; gap: .5rem; font-size: calc(.82rem + 2px); color: #A9B0BE; margin-bottom: 1.1rem; }
.blg-trilha a { text-decoration: none; }
.blg-trilha a:hover { color: var(--amarelo); }
.blg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; font-size: calc(.88rem + 2px); color: #C9CED8; }
.blg-meta > span { display: inline-flex; align-items: center; gap: .5rem; }
.blg-meta svg { width: 17px; height: 17px; fill: none; stroke: var(--amarelo); stroke-width: 1.6; }

/* Etiqueta de categoria */
.blg-cat { display: inline-block; align-self: flex-start; background: var(--amarelo); color: var(--azul); font-size: calc(.7rem + 2px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; padding: .3rem .65rem; line-height: 1.3; transition: background .2s, color .2s; }
.blg-cat:hover { background: var(--azul); color: var(--amarelo); }
.blg-cat--claro:hover { background: var(--branco); color: var(--azul); }

/* =========================================================
   Listagem
   ========================================================= */
.blg-lista { background: var(--fundo); padding-top: 3.5rem; }
.blg-filtro { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.6rem; }
.blg-filtro a { text-decoration: none; color: var(--azul); background: var(--branco); border: 1px solid var(--linha); font-weight: 500; font-size: calc(.82rem + 2px); padding: .5rem 1rem; transition: border-color .2s, background .2s, color .2s; }
.blg-filtro a:hover { border-color: var(--amarelo); }
.blg-filtro a[aria-current="page"] { background: var(--azul); border-color: var(--azul); color: var(--amarelo); }
.blg-busca-topo { max-width: 520px; margin-bottom: 2.6rem; }

.blg-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 1000px) { .blg-grade { grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
@media (max-width: 640px) { .blg-grade { grid-template-columns: 1fr; } }

.blg-card { background: var(--branco); display: flex; flex-direction: column; border-bottom: 2px solid transparent; transition: border-color .25s, box-shadow .25s, transform .25s; }
.blg-card:hover { border-bottom-color: var(--amarelo); box-shadow: 0 18px 36px -22px rgba(28,34,48,.35); transform: translateY(-3px); }
.blg-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #E9E9E5; }
.blg-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.blg-card:hover .blg-card__img img { transform: scale(1.04); }
.blg-card__vazio { display: grid; place-items: center; width: 100%; height: 100%; background: var(--azul); }
.blg-card__vazio svg { width: 30%; fill: none; stroke: var(--amarelo); stroke-width: 1.2; opacity: .6; }
.blg-card__corpo { flex: 1; display: flex; flex-direction: column; padding: 1.5rem 1.6rem 1.4rem; }
.blg-card__corpo .blg-cat { margin-bottom: .9rem; }
.blg-card__titulo { font-size: calc(1.08rem + 2px); line-height: 1.35; margin: 0 0 .7rem; }
.blg-card__titulo a { text-decoration: none; transition: color .2s; }
.blg-card__titulo a:hover { color: #C99000; }
.blg-card__resumo { font-size: calc(.86rem + 2px); line-height: 1.65; margin: 0 0 1.3rem; }
.blg-card__base { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--linha); font-size: calc(.8rem + 2px); }
.blg-mais { color: var(--azul); font-weight: 600; text-decoration: none; }
.blg-mais span { color: var(--amarelo); }
.blg-mais:hover { color: #C99000; }
.blg-card__base time { color: #9A9A9A; }

/* Paginação */
.blg-paginas { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: 3.2rem; }
.blg-paginas .page-numbers { min-width: 44px; height: 44px; padding: 0 .9rem; display: inline-grid; place-items: center; background: var(--branco); border: 1px solid var(--linha); color: var(--azul); font-weight: 600; font-size: calc(.85rem + 2px); text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.blg-paginas a.page-numbers:hover { border-color: var(--amarelo); }
.blg-paginas .current { background: var(--azul); border-color: var(--azul); color: var(--amarelo); }
.blg-paginas .dots { background: none; border: 0; }

.blg-vazio { background: var(--branco); padding: 3rem 2rem; text-align: center; }
.blg-vazio h2 { font-size: calc(1.5rem + 2px); }

/* =========================================================
   Post
   ========================================================= */
.blg-post { padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(3.5rem, 7vw, 5rem); }
.blg-post__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 1100px) { .blg-post__grid { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 960px) { .blg-post__grid { grid-template-columns: 1fr; } }

.artigo { min-width: 0; max-width: 780px; }
.artigo--pagina { margin-inline: auto; }
.artigo__destaque { margin: 0 0 2.4rem; background: #E9E9E5; }
.artigo__destaque img { width: 100%; height: auto; max-height: 520px; object-fit: cover; }

/* Texto do post.
   Os posts importados do Elementor trazem cores, fontes e tamanhos grudados no texto:
   aqui tudo volta para o padrão do site. */
.artigo__conteudo { color: var(--texto); font-size: calc(15px + 2px); line-height: 1.8; overflow-wrap: break-word; }
.artigo__conteudo * { font-family: var(--fonte) !important; max-width: 100%; }
.artigo__conteudo [style*="color"]:not(.has-text-color) { color: inherit !important; }
.artigo__conteudo [style*="background"]:not(.has-background) { background: none !important; }
.artigo__conteudo [style*="font-size"]:not(h1):not(h2):not(h3):not(h4) { font-size: inherit !important; }
.artigo__conteudo [style*="line-height"] { line-height: inherit !important; }
.artigo__conteudo [style*="width"]:not(img):not(iframe):not(figure) { width: auto !important; }
.artigo__conteudo span[style] { font-weight: inherit; }
/* Alturas fixas e espaçadores do Elementor não criam buracos no texto */
.artigo__conteudo [style*="height"]:not(img):not(iframe):not(video) { height: auto !important; min-height: 0 !important; }
.artigo__conteudo svg { width: 1.2em !important; height: 1.2em !important; vertical-align: middle; }
.artigo__conteudo > *:first-child { margin-top: 0; }
.artigo__conteudo p { margin: 0 0 1.4em; }
.artigo__conteudo h1, .artigo__conteudo h2, .artigo__conteudo h3, .artigo__conteudo h4, .artigo__conteudo h5, .artigo__conteudo h6 { color: var(--azul) !important; font-weight: 600; line-height: 1.25; margin: 2em 0 .7em; }
.artigo__conteudo h1, .artigo__conteudo h2 { font-size: calc(clamp(1.35rem, 2.2vw, 1.7rem) + 2px) !important; }
.artigo__conteudo h3 { font-size: calc(1.15rem + 2px) !important; }
.artigo__conteudo h4, .artigo__conteudo h5, .artigo__conteudo h6 { font-size: calc(1rem + 2px) !important; }
.artigo__conteudo h2::before { content: ""; display: block; width: 30px; height: 2px; background: var(--amarelo); margin-bottom: .8rem; }
.artigo__conteudo strong, .artigo__conteudo b { color: var(--azul); font-weight: 600; }
.artigo__conteudo a { color: var(--azul) !important; text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .2s; }
.artigo__conteudo a:hover { color: #C99000 !important; }
.artigo__conteudo ul, .artigo__conteudo ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.artigo__conteudo li { margin-bottom: .5em; }
.artigo__conteudo ul li::marker { color: var(--amarelo); }
.artigo__conteudo ol li::marker { color: var(--azul); font-weight: 600; }
.artigo__conteudo blockquote { margin: 2em 0; padding: .4em 0 .4em 1.4em; border-left: 2px solid var(--amarelo); color: var(--azul); font-weight: 500; font-size: calc(1.05rem + 2px); line-height: 1.6; }
.artigo__conteudo blockquote p:last-child { margin-bottom: 0; }
.artigo__conteudo img { height: auto !important; margin: 2em 0; }
.artigo__conteudo figure { margin: 2em 0; width: auto !important; }
.artigo__conteudo figure img { margin: 0; }
.artigo__conteudo figcaption, .artigo__conteudo .wp-caption-text { font-size: calc(.8rem + 2px); color: #9A9A9A; margin-top: .6rem; line-height: 1.5; }
.artigo__conteudo .alignleft { float: left; margin: .4em 1.6em 1em 0; max-width: 50%; }
.artigo__conteudo .alignright { float: right; margin: .4em 0 1em 1.6em; max-width: 50%; }
.artigo__conteudo .aligncenter { margin-inline: auto; }
@media (max-width: 560px) { .artigo__conteudo .alignleft, .artigo__conteudo .alignright { float: none; margin: 2em 0; max-width: 100%; } }
.artigo__conteudo::after { content: ""; display: table; clear: both; }
.artigo__conteudo hr { border: 0; border-top: 1px solid var(--linha); margin: 2.5em 0; }
.artigo__conteudo table { width: 100% !important; border-collapse: collapse; margin: 2em 0; font-size: calc(.88rem + 2px); display: block; overflow-x: auto; }
.artigo__conteudo th, .artigo__conteudo td { border: 1px solid var(--linha); padding: .7em .9em; text-align: left; }
.artigo__conteudo th { background: var(--fundo); color: var(--azul); font-weight: 600; }
/* Vídeos (YouTube) sempre na largura do texto, em 16:9 */
.artigo__video, .artigo__conteudo .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; margin: 2em 0; background: #000; }
.artigo__conteudo .wp-block-embed { margin: 2em 0; }
.artigo__conteudo .wp-block-embed .wp-block-embed__wrapper { margin: 0; }
.artigo__video iframe, .artigo__conteudo .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
.artigo__conteudo iframe { border: 0; }
/* Botões do editor do WordPress no padrão do site */
.artigo__conteudo .wp-block-button__link { display: inline-flex; padding: .95rem 1.9rem; border-radius: 0 !important; background: var(--amarelo); color: var(--azul) !important; font-weight: 600; text-decoration: none; }
.artigo__conteudo .wp-block-button__link:hover { background: var(--azul); color: var(--amarelo) !important; }

/* Compartilhar */
.blg-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 3rem; padding: 1.4rem 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.blg-share h3 { margin: 0; font-size: calc(1rem + 2px); }
.blg-share__botoes { display: flex; gap: 8px; }
.blg-share__botoes a, .blg-share__botoes button { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; color: var(--branco); transition: opacity .2s; }
.blg-share__botoes svg { width: 18px; height: 18px; }
.blg-share__botoes .wa { background: var(--whats); }
.blg-share__botoes .fb { background: #1877F2; }
.blg-share__botoes .in { background: #0A66C2; }
.blg-share__copiar { background: var(--azul); }
.blg-share__copiar svg { fill: none; stroke: var(--amarelo); stroke-width: 1.8; stroke-linecap: round; }
.blg-share__botoes a:hover, .blg-share__botoes button:hover { opacity: .85; }
.blg-share__copiar span { position: absolute; bottom: calc(100% + 8px); right: 0; white-space: nowrap; background: var(--azul); color: var(--branco); font-size: calc(.75rem + 2px); font-weight: 500; padding: .3rem .6rem; opacity: 0; visibility: hidden; transition: opacity .2s; }
.blg-share__copiar.copiado span { opacity: 1; visibility: visible; }

/* Post anterior / próximo */
.blg-navpost { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.blg-navpost a { display: flex; flex-direction: column; gap: .35rem; padding: 1.2rem 1.3rem; background: var(--fundo); text-decoration: none; border-left: 2px solid transparent; transition: border-color .2s, background .2s; }
.blg-navpost a:hover { border-left-color: var(--amarelo); background: #F0F0EC; }
.blg-navpost small { color: #C99000; font-weight: 600; font-size: calc(.78rem + 2px); }
.blg-navpost span { color: var(--azul); font-weight: 600; font-size: calc(.92rem + 2px); line-height: 1.4; }
.blg-navpost__prox { text-align: right; grid-column: 2; }
@media (max-width: 560px) { .blg-navpost { grid-template-columns: 1fr; } .blg-navpost__prox { grid-column: auto; } }

/* =========================================================
   Barra lateral
   ========================================================= */
.blg-lateral { display: grid; gap: 1.6rem; position: sticky; top: 100px; }
.admin-bar .blg-lateral { top: 132px; }
@media (max-width: 960px) { .blg-lateral { position: static; grid-template-columns: 1fr 1fr; } .blg-box--busca { grid-column: 1 / -1; } }
@media (max-width: 640px) { .blg-lateral { grid-template-columns: 1fr; } }
.blg-box { background: var(--fundo); padding: 1.6rem 1.5rem; position: relative; overflow: hidden; }
.blg-box--busca { padding: 0; background: none; }
.blg-box__titulo { font-size: calc(1.02rem + 2px); margin: 0 0 1.2rem; padding-bottom: .8rem; border-bottom: 2px solid var(--amarelo); }
.blg-box__titulo .amarelo-txt { display: block; }
.blg-box p { font-size: calc(.86rem + 2px); line-height: 1.65; margin-bottom: 1.2rem; }

.blg-form-busca { display: flex; }
.blg-form-busca input { flex: 1; min-width: 0; height: 50px; padding: 0 1rem; border: 1px solid var(--linha); border-right: 0; background: var(--branco); font-family: inherit; font-size: calc(.88rem + 2px); color: var(--azul); }
.blg-form-busca input:focus { outline: 0; border-color: var(--amarelo); }
.blg-form-busca button { width: 52px; height: 50px; border: 0; background: var(--amarelo); color: var(--azul); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
.blg-form-busca button:hover { background: var(--azul); color: var(--amarelo); }
.blg-form-busca svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.blg-recentes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.blg-recentes a { display: grid; grid-template-columns: 80px 1fr; gap: .9rem; align-items: center; text-decoration: none; }
.blg-recentes__img { display: block; aspect-ratio: 16 / 11; background: #E2E2DE; overflow: hidden; }
.blg-recentes__img img { width: 100%; height: 100%; object-fit: cover; }
.blg-recentes strong { display: block; color: var(--azul); font-weight: 600; font-size: calc(.8rem + 2px); line-height: 1.4; transition: color .2s; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blg-recentes small { display: block; color: #9A9A9A; font-size: calc(.72rem + 2px); margin-top: .25rem; }
.blg-recentes a:hover strong { color: #C99000; }

.blg-box--escuro { background: var(--azul); color: #C9CED8; }
.blg-box--escuro .blg-box__titulo { color: var(--branco); }
.blg-box--escuro strong { color: var(--branco); font-weight: 600; }
.blg-box--escuro p, .blg-box--escuro a { position: relative; z-index: 1; }
.blg-box__h { position: absolute; right: -30px; bottom: -30px; width: 150px; fill: none; stroke: var(--amarelo); stroke-width: .8; opacity: .18; }
.blg-box__link { color: var(--amarelo); font-weight: 600; text-decoration: none; font-size: calc(.86rem + 2px); }
.blg-box__link:hover { color: var(--branco); }
.blg-box--whats { background: var(--branco); border: 1px solid var(--linha); border-top: 2px solid var(--whats); }
.blg-box--whats .blg-box__titulo { border-bottom: 0; padding-bottom: 0; margin-bottom: .8rem; }
.blg-box--whats .btn { width: 100%; }

/* =========================================================
   Continue lendo + faixa CTA
   ========================================================= */
.blg-rel { background: var(--fundo); padding-bottom: clamp(4rem, 8vw, 6rem); }
.blg-rel h2 { margin-bottom: 2.2rem; }
.blg-ponte { background: var(--fundo); }
.blog .blg-ponte, .archive .blg-ponte, .search .blg-ponte { background: var(--fundo); }
.single .blg-post + .blg-ponte { background: var(--branco); }