/*
Theme Name: bbeauty Blog
Theme URI: https://bbeautystore.com.br
Author: bbeauty
Description: Tema do blog da bbeauty. Conteúdo em primeiro lugar, artigos no formato que o Google e as IAs entendem: título em pergunta, resposta rápida, sumário, resumo em 3 pontos e perguntas frequentes.
Version: 1.0.2
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bbeauty-blog
*/

:root {
	--bb-bordo: #4E1226;
	--bb-bordo-claro: #6E2A3B;
	--bb-champanhe: #C2A15C;
	--bb-ouro-texto: #7A5F2C;
	--bb-creme: #F4EDE3;
	--bb-papel: #FBF7F1;
	--bb-areia: #EADDCB;
	--bb-caixa: #F2E9DC;
	--bb-linha: #E2D3BF;
	--bb-linha-forte: #D9C6AA;
	--bb-tinta: #2A171C;
	--bb-texto: #4A3439;
	--bb-cinza: #6B585C;
	--bb-titulo: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--bb-corpo: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
	--bb-gutter: max(20px, env(safe-area-inset-left, 0px));
}

/* Base ---------------------------------------------------------------- */
body { background: var(--bb-papel); color: var(--bb-tinta); -webkit-font-smoothing: antialiased; }
body .wp-site-blocks { padding: 0; }
body .wp-site-blocks > * { margin-block: 0; }
a { text-decoration: none; }
a:hover { color: var(--bb-tinta); }
:focus-visible { outline: 2px solid var(--bb-champanhe); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { text-wrap: balance; }

.bb-wrap { box-sizing: border-box; width: 100%; max-width: 1184px; margin-inline: auto; padding-left: var(--bb-gutter); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
body .bb-flush > * { margin-block: 0; }

.bb-tag, .bb-tag a, .wp-block-post-terms.bb-tag a { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bb-bordo); margin: 0; }
.bb-meta, .bb-meta a, .wp-block-post-date.bb-meta { font-size: 0.8125rem; color: var(--bb-cinza); margin: 0; }
.bb-rotulo { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bb-ouro-texto); margin: 0 0 0.5rem; }

/* Botões --------------------------------------------------------------- */
.bb-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--bb-bordo); color: var(--bb-creme); font-weight: 600; font-size: 0.875rem; white-space: nowrap; }
.bb-btn:hover { background: var(--bb-bordo-claro); color: var(--bb-creme); }
.bb-btn--claro { background: var(--bb-creme); color: var(--bb-tinta); font-weight: 700; }
.bb-btn--claro:hover { background: #fff; color: var(--bb-tinta); }

/* Cabeçalho ------------------------------------------------------------ */
.bb-cabecalho { background: var(--bb-papel); border-bottom: 1px solid var(--bb-linha); }
body .bb-cabecalho > * { margin-block: 0; }
.bb-cabecalho-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 16px 10px; }
body .bb-cabecalho-topo > * { margin: 0; }
.bb-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--bb-tinta); }
.bb-logo-img { height: 46px; width: auto; display: block; margin-left: -8px; }
.bb-logo-tag { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bb-cinza); border-left: 1px solid var(--bb-linha); padding-left: 12px; line-height: 1.8; }
.bb-menu ul { list-style: none; margin: 0; padding: 0 0 2px; display: flex; gap: 26px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.bb-menu a { display: inline-block; padding: 8px 0 10px; font-size: 0.875rem; font-weight: 600; color: var(--bb-cinza); border-bottom: 2px solid transparent; }
.bb-menu a:hover { color: var(--bb-bordo); }
.bb-menu a.ativo { color: var(--bb-bordo); border-bottom-color: var(--bb-bordo); }

/* Rodapé --------------------------------------------------------------- */
.bb-rodape { background: var(--bb-tinta); color: var(--bb-areia); margin-top: 0; }
body .bb-rodape > * { margin-block: 0; }
.bb-rodape-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px; padding-block: 48px 32px; }
body .bb-rodape-topo > * { margin: 0; }
.bb-logo--clara .bb-logo-img { height: 58px; margin-left: -10px; }
.bb-rodape-texto { margin: 8px 0 0; font-size: 0.875rem; color: #D6C4A8; max-width: 34ch; }
.bb-rodape-copy { border-top: 1px solid #4A3338; padding-block: 18px 28px; font-size: 0.8125rem; color: #BFA98A; margin: 0; }

/* Home: destaque -------------------------------------------------------- */
.bb-destaque { padding-block: 40px 56px; }
.bb-destaque .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.bb-hero { display: grid; gap: 28px; align-items: center; }
body .bb-hero > * { margin: 0; }
.bb-hero .wp-block-post-featured-image { margin: 0; border-radius: 4px; overflow: hidden; background: linear-gradient(160deg, var(--bb-areia), #D7BE97); aspect-ratio: 4 / 3; }
.bb-hero .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.bb-hero-texto { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
body .bb-hero-texto > * { margin: 0; }
.bb-hero-texto .wp-block-post-title { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.05; margin: 0; }
.bb-hero-texto .wp-block-post-title a { color: var(--bb-tinta); }
.bb-hero-texto .wp-block-post-title a:hover { color: var(--bb-bordo); }
.bb-hero-texto .wp-block-post-excerpt { font-size: 1.0625rem; color: var(--bb-texto); margin: 0; }
.bb-hero-texto .wp-block-post-excerpt__excerpt { margin: 0; }
.bb-hero-info { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.8125rem; color: var(--bb-cinza); }
body .bb-hero-info > * { margin: 0; }
.bb-hero-info .wp-block-post-author-name::before { content: "Por "; }
.bb-hero-info .wp-block-post-date::before { content: "· "; }
.bb-ler { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--bb-bordo); border-bottom: 1px solid var(--bb-bordo); }
a.wp-block-read-more.bb-ler::after { content: "→"; }

/* Home: faixa de temas -------------------------------------------------- */
.bb-faixa-temas { background: var(--bb-bordo); }
.bb-faixa-temas-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-block: 28px; }
body .bb-faixa-temas-in > * { margin: 0; }
.bb-faixa-temas-titulo { font-family: var(--bb-titulo); font-size: 1.75rem; font-weight: 600; color: var(--bb-creme); margin: 0; }
.bb-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bb-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--bb-champanhe); color: var(--bb-creme); font-size: 0.8125rem; font-weight: 600; }
.bb-chips a:hover { background: var(--bb-creme); color: var(--bb-bordo); }

/* Grade de artigos (home, categoria, busca, relacionados) --------------- */
.bb-secao { padding-block: 56px 16px; }
.bb-secao-titulo { font-size: clamp(1.75rem, 3.2vw, 2.25rem); margin: 0 0 24px; }
.bb-grade, .bb-lista .wp-block-post-template { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 40px 28px; }
body .bb-grade > *, body .bb-lista .wp-block-post-template > * { margin: 0; }
.bb-card, .bb-lista .wp-block-post { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
body .bb-card > *, body .bb-lista .wp-block-post > * { margin: 0; }
.bb-card-foto, .bb-lista .wp-block-post-featured-image { display: block; aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden; background: linear-gradient(160deg, var(--bb-areia), #D7BE97); margin: 0; }
.bb-card-foto img, .bb-lista .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.bb-card:hover .bb-card-foto img, .bb-lista .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.bb-card-titulo, .bb-lista .wp-block-post-title { font-family: var(--bb-titulo); font-size: 1.5rem; font-weight: 600; line-height: 1.15; margin: 0; }
.bb-card-titulo a, .bb-lista .wp-block-post-title a { color: var(--bb-tinta); }
.bb-card-titulo a:hover, .bb-lista .wp-block-post-title a:hover { color: var(--bb-bordo); }
.bb-lista .wp-block-post-excerpt { font-size: 0.9375rem; color: var(--bb-texto); margin: 0; }
.bb-lista .wp-block-post-excerpt__excerpt { margin: 0; }
.bb-paginacao { margin-top: 40px; gap: 16px; font-weight: 600; }
.bb-vazio { color: var(--bb-cinza); }

/* Home: perguntas mais buscadas ------------------------------------------ */
.bb-perguntas-caixa { margin-block: 40px 72px; background: var(--bb-caixa); border-radius: 4px; padding: clamp(26px, 5vw, 48px); display: grid; gap: 24px; }
body .bb-perguntas-caixa > * { margin: 0; }
.bb-perguntas-caixa h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 8px; }
.bb-perguntas-caixa .bb-meta { font-size: 0.9375rem; }
.bb-perguntas-lista { list-style: none; margin: 0; padding: 0; }
.bb-perguntas-lista li { border-top: 1px solid var(--bb-linha-forte); margin: 0; }
.bb-perguntas-lista li:last-child { border-bottom: 1px solid var(--bb-linha-forte); }
.bb-perguntas-lista a { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 60px; color: var(--bb-tinta); font-weight: 600; }
.bb-perguntas-lista a::after { content: "→"; color: var(--bb-bordo); }
.bb-perguntas-lista a:hover { color: var(--bb-bordo); }

/* Cabeçalho de categoria e páginas ---------------------------------------- */
.bb-topo-pagina { padding-block: 48px 8px; }
body .bb-topo-pagina > * { margin: 0; }
.bb-topo-pagina .wp-block-query-title, .bb-topo-pagina .wp-block-post-title { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.05; margin: 6px 0 0; }
.bb-topo-pagina .wp-block-term-description { color: var(--bb-texto); max-width: 60ch; margin-top: 12px; }

/* Artigo -------------------------------------------------------------- */
.bb-artigo { padding-block: 32px 0; }
.bb-artigo-cabeca { max-width: 780px; margin-inline: auto; display: flex; flex-direction: column; gap: 14px; }
body .bb-artigo-cabeca > * { margin: 0; }
.bb-trilha { font-size: 0.8125rem; color: var(--bb-cinza); display: flex; flex-wrap: wrap; gap: 6px; }
.bb-trilha a { color: var(--bb-cinza); }
.bb-trilha a:hover { color: var(--bb-bordo); }
.bb-artigo-cabeca .wp-block-post-terms { margin-top: 10px; }
.bb-artigo-cabeca .wp-block-post-title { font-size: clamp(2.375rem, 5.5vw, 3.75rem); line-height: 1.03; margin: 0; }
.bb-resposta { background: var(--bb-caixa); border-radius: 4px; padding: 22px 24px; margin-top: 10px; }
body .bb-resposta > * { margin: 0; }
.bb-resposta .wp-block-post-excerpt { font-size: 1.125rem; color: var(--bb-tinta); margin: 0; }
.bb-resposta .wp-block-post-excerpt__excerpt { margin: 0; }
.bb-info { margin-top: 4px; }
.bb-autor { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.bb-autor b { display: block; font-size: 0.875rem; }
.bb-autor .bb-meta { display: block; }
.bb-avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--bb-areia); color: var(--bb-bordo); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; }
.bb-capa { max-width: 1120px; margin: 36px auto 0; padding-inline: 0; }
.bb-capa.wp-block-post-featured-image { border-radius: 4px; overflow: hidden; aspect-ratio: 2 / 1; }
.bb-capa.wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }

.bb-artigo-corpo { display: grid; gap: 32px; padding-block: 40px 0; }
body .bb-artigo-corpo > * { margin: 0; }
.bb-artigo-lateral { min-width: 0; }
.bb-sumario { border-top: 2px solid var(--bb-bordo); padding-top: 14px; }
.bb-sumario .bb-rotulo { color: var(--bb-bordo); }
.bb-sumario ol { margin: 0; padding-left: 18px; font-size: 0.875rem; line-height: 1.5; display: flex; flex-direction: column; gap: 8px; }
.bb-sumario a { color: var(--bb-texto); }
.bb-sumario a:hover { color: var(--bb-bordo); }

.bb-texto { min-width: 0; max-width: 700px; }
body .bb-texto > * { margin-block: 0; }
.bb-texto .wp-block-post-content > * { margin-block: 0 1.5rem; }
.bb-texto .wp-block-post-content > h2 { font-size: clamp(1.75rem, 3vw, 2.125rem); line-height: 1.15; margin: 2.75rem 0 0.75rem; scroll-margin-top: 24px; }
.bb-texto .wp-block-post-content > h2:first-child { margin-top: 0; }
.bb-texto .wp-block-post-content > h3 { font-size: 1.5rem; margin: 2rem 0 0.5rem; }
.bb-texto .wp-block-post-content ul, .bb-texto .wp-block-post-content ol { padding-left: 22px; }
.bb-texto .wp-block-post-content li + li { margin-top: 6px; }
.bb-texto .wp-block-post-content a { text-decoration: underline; text-underline-offset: 3px; }

/* Tabela */
.wp-block-table.bb-tabela, .bb-texto .wp-block-table { overflow-x: auto; border: 1px solid var(--bb-linha); border-radius: 4px; }
.bb-texto .wp-block-table table, .wp-block-table.bb-tabela table { width: 100%; min-width: 500px; border-collapse: collapse; font-size: 0.9375rem; }
.bb-texto .wp-block-table th, .wp-block-table.bb-tabela th { background: var(--bb-bordo); color: var(--bb-creme); text-align: left; padding: 12px 14px; border: 0; }
.bb-texto .wp-block-table td, .wp-block-table.bb-tabela td { padding: 12px 14px; border: 0; border-top: 1px solid var(--bb-linha); }
.bb-texto .wp-block-table tbody tr:nth-child(even) td { background: #fff; }
.bb-texto .wp-block-table td:first-child { font-weight: 700; }
.bb-texto .wp-block-table thead { border: 0; }

/* Resumo em 3 pontos */
.bb-resumo { background: var(--bb-tinta); color: var(--bb-creme); border-radius: 4px; padding: 26px; }
body .bb-resumo > * { margin: 0; }
.bb-resumo .bb-rotulo { color: var(--bb-champanhe); margin-bottom: 10px; }
.bb-resumo ol { margin: 0; padding-left: 20px; }
.bb-resumo li + li { margin-top: 6px; }

/* Perguntas frequentes */
.bb-faq { border-top: 1px solid var(--bb-linha-forte); }
body .bb-faq > * { margin: 0; }
.bb-faq .wp-block-details { border-bottom: 1px solid var(--bb-linha-forte); padding: 16px 0; margin: 0; }
.bb-faq summary { cursor: pointer; font-weight: 700; min-height: 28px; }
.bb-faq summary:hover { color: var(--bb-bordo); }
.bb-faq .wp-block-details > p { margin: 10px 0 0; color: var(--bb-texto); }

/* Chamada para a loja */
.bb-cta { margin-top: 56px; background: var(--bb-bordo); border-radius: 4px; padding: clamp(26px, 5vw, 44px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
body .bb-cta > * { margin: 0; }
.bb-cta-titulo { font-family: var(--bb-titulo); font-size: 1.75rem; font-weight: 600; line-height: 1.15; color: var(--bb-creme); margin: 0 0 4px; }
.bb-cta-texto { margin: 0; font-size: 0.875rem; color: var(--bb-areia); }
.bb-cta-in { flex: 1 1 280px; min-width: 0; }
body .bb-cta-in > * { margin: 0; }

/* Sobre a autora */
.bb-bio { margin-top: 44px; border-top: 1px solid var(--bb-linha); padding-top: 28px; display: flex; gap: 16px; align-items: flex-start; }
body .bb-bio > * { margin: 0; }
.bb-avatar--g { width: 60px; height: 60px; font-size: 1.125rem; }
.bb-bio-in { min-width: 0; }
.bb-bio-in p { margin: 0; }
.bb-bio-nome { font-weight: 700; margin-top: 2px !important; }
.bb-bio-texto { font-size: 0.875rem; color: var(--bb-texto); margin-top: 4px !important; }

.bb-relacionados { padding-block: 72px 80px; }
.bb-relacionados h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 24px; }

/* Páginas simples ------------------------------------------------------ */
.bb-pagina-texto { max-width: 700px; margin-inline: auto; padding-block: 24px 80px; }
body .bb-pagina-texto .wp-block-post-content > * { margin-block: 0 1.25rem; }
.bb-404 { padding-block: 80px 96px; max-width: 640px; }
body .bb-404 > * { margin-block: 0 16px; }
.bb-busca .wp-block-search__input { border: 1px solid var(--bb-linha-forte); border-radius: 999px; padding: 10px 18px; background: #fff; }
.bb-busca .wp-block-search__button { border-radius: 999px; background: var(--bb-bordo); color: var(--bb-creme); border: 0; padding: 10px 20px; font-weight: 700; }

/* Telas maiores --------------------------------------------------------- */
@media (min-width: 782px) {
	.bb-wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
	.bb-destaque { padding-block: 56px 72px; }
	.bb-hero { grid-template-columns: 1.1fr 1fr; gap: 48px; }
	.bb-perguntas-caixa { grid-template-columns: 1fr 1.6fr; gap: 40px; }
	.bb-artigo-corpo { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; }
	.bb-artigo-lateral { position: sticky; top: 24px; align-self: start; }
	.bb-logo-img { height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }