/*
Theme Name: VovóTecno
Theme URI: https://www.vovotecno.com
Author: VovóTecno
Description: Tema leve e acessível para um site de tecnologia feito para a 3ª idade. Letras grandes, botões fáceis de tocar, alto contraste e caixas de produto para links de afiliado (Amazon e Mercado Livre).
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: vovotecno
*/

/* ===== Cores e medidas (mude aqui para trocar o visual) ===== */
:root {
	--fundo: #fbf8f2;
	--papel: #ffffff;
	--texto: #1f2328;
	--texto-suave: #4b5260;
	--azul: #1c3f73;
	--azul-escuro: #12294d;
	--laranja: #b4410f;
	--verde: #1f6b47;
	--borda: #ddd6c8;
	--destaque-fundo: #fff4e0;
	--raio: 14px;
	--largura: 760px;
	--largura-larga: 1120px;
	--tamanho-base: 20px;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--tamanho-base); scroll-behavior: smooth; }
html.fonte-grande { font-size: 23px; }
html.fonte-enorme { font-size: 26px; }

body {
	margin: 0;
	background: var(--fundo);
	color: var(--texto);
	font-family: "Atkinson Hyperlegible", Verdana, "Segoe UI", sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--azul); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--laranja); }

:focus-visible { outline: 4px solid var(--laranja); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
	font-family: "Merriweather", Georgia, serif;
	color: var(--azul-escuro);
	line-height: 1.3;
	margin: 1.6em 0 .6em;
}
h1 { font-size: 2rem; margin-top: .4em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

p, ul, ol { margin: 0 0 1.1em; }
li { margin-bottom: .45em; }

.tela-leitor {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.pular-conteudo:focus {
	position: fixed; top: 10px; left: 10px; z-index: 100; width: auto; height: auto; clip: auto;
	background: var(--azul); color: #fff; padding: 12px 18px; border-radius: var(--raio);
}

.recipiente { max-width: var(--largura-larga); margin: 0 auto; padding: 0 16px; }
.recipiente-texto { max-width: var(--largura); margin: 0 auto; padding: 0 16px; }

/* ===== Botões ===== */
.botao {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 56px; padding: 12px 24px;
	border: 2px solid transparent; border-radius: var(--raio);
	background: var(--azul); color: #fff;
	font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.botao:hover { background: var(--azul-escuro); color: #fff; }
.botao-claro { background: var(--papel); color: var(--azul); border-color: var(--azul); }
.botao-claro:hover { background: var(--azul); color: #fff; }

/* ===== Cabeçalho ===== */
.topo { background: var(--papel); border-bottom: 3px solid var(--azul); }
.topo-linha {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px;
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--azul-escuro); }
.marca:hover { color: var(--azul-escuro); }
.marca img { max-height: 64px; width: auto; }
.marca-nome { font-family: "Merriweather", Georgia, serif; font-size: 1.6rem; font-weight: 900; line-height: 1.1; }
.marca-nome span { color: var(--laranja); }
.marca-frase { display: block; font-size: .8rem; color: var(--texto-suave); font-family: inherit; font-weight: 400; }

.ajuste-letra { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--texto-suave); }
.ajuste-letra button {
	min-width: 52px; min-height: 52px; border-radius: 12px;
	border: 2px solid var(--azul); background: var(--papel); color: var(--azul);
	font: inherit; font-weight: 700; cursor: pointer;
}
.ajuste-letra button:hover, .ajuste-letra button[aria-pressed="true"] { background: var(--azul); color: #fff; }

.menu-botao { display: none; }

.navegacao { background: var(--azul); }
.navegacao ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.navegacao li { margin: 0; }
.navegacao a {
	display: block; padding: 16px 18px; color: #fff; text-decoration: none; font-weight: 700;
}
.navegacao a:hover, .navegacao .current-menu-item > a, .navegacao .current-cat > a { background: var(--azul-escuro); color: #fff; text-decoration: underline; }
.navegacao .sub-menu { display: none; }

@media (max-width: 760px) {
	.menu-botao { display: inline-flex; width: 100%; }
	.navegacao { display: none; }
	.navegacao.aberta { display: block; }
	.navegacao ul { flex-direction: column; }
	.navegacao a { border-top: 1px solid rgba(255,255,255,.2); padding: 18px 16px; }
	.ajuste-letra .rotulo { display: none; }
}

/* ===== Página inicial ===== */
.boas-vindas { background: var(--destaque-fundo); border-bottom: 1px solid var(--borda); padding: 40px 0; }
.boas-vindas h1 { margin: 0 0 .4em; font-size: 2.1rem; }
.boas-vindas p { font-size: 1.15rem; max-width: 640px; }
.boas-vindas-grade { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.boas-vindas-texto { flex: 1 1 420px; min-width: 0; }
.boas-vindas-foto { flex: 1 1 380px; min-width: 0; margin: 0; }
.boas-vindas-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.boas-vindas-foto figcaption, .artigo-imagem figcaption { font-size: .75rem; color: var(--texto-suave); margin-top: 6px; }
.cartao-credito { font-size: .7rem; color: var(--texto-suave); }

.busca { display: flex; gap: 10px; flex-wrap: wrap; max-width: 640px; margin-top: 20px; }
.busca input[type="search"] {
	flex: 1 1 260px; min-height: 56px; padding: 10px 16px;
	border: 2px solid var(--texto-suave); border-radius: var(--raio);
	font: inherit; background: var(--papel); color: var(--texto);
}

.secao { padding: 40px 0 8px; }
.secao > .recipiente > h2 { margin-top: 0; }

.temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; list-style: none; padding: 0; }
.temas li { margin: 0; }
.temas a {
	display: flex; flex-direction: column; gap: 4px; height: 100%;
	padding: 20px; background: var(--papel); border: 2px solid var(--borda); border-radius: var(--raio);
	text-decoration: none; color: var(--texto);
}
.temas a:hover { border-color: var(--azul); color: var(--texto); }
.temas strong { color: var(--azul-escuro); font-size: 1.1rem; }
.temas span { color: var(--texto-suave); font-size: .9rem; }

/* ===== Cartões de artigo ===== */
.lista-artigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding: 0; list-style: none; }
.cartao {
	margin: 0; display: flex; flex-direction: column;
	background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden;
}
.cartao-imagem img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cartao-corpo { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cartao h3 { margin: 0; font-size: 1.2rem; }
.cartao h3 a { text-decoration: none; color: var(--azul-escuro); }
.cartao h3 a:hover { text-decoration: underline; }
.cartao p { margin: 0; color: var(--texto-suave); }
.cartao .ler-mais { margin-top: auto; font-weight: 700; }

.selo-categoria {
	align-self: flex-start; display: inline-block; padding: 2px 12px; border-radius: 999px;
	background: var(--destaque-fundo); color: var(--laranja); font-size: .8rem; font-weight: 700; text-decoration: none;
}

/* ===== Artigo ===== */
.artigo { padding: 32px 0 16px; }
.artigo-meta { color: var(--texto-suave); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.artigo-imagem { margin: 24px 0; }
.artigo-imagem img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--raio); }
.artigo-conteudo { font-size: 1.05rem; }
.artigo-conteudo h2 { border-bottom: 3px solid var(--destaque-fundo); padding-bottom: .2em; }
.artigo-conteudo blockquote {
	margin: 1.5em 0; padding: 16px 20px; border-left: 6px solid var(--laranja);
	background: var(--destaque-fundo); border-radius: 0 var(--raio) var(--raio) 0;
}
.artigo-conteudo table { width: 100%; border-collapse: collapse; margin-bottom: 1.2em; }
.artigo-conteudo th, .artigo-conteudo td { border: 1px solid var(--borda); padding: 10px; text-align: left; }

.dica {
	margin: 1.5em 0; padding: 18px 20px; border-radius: var(--raio);
	background: #e9f4ee; border: 2px solid var(--verde);
}
.dica strong:first-child { color: var(--verde); }
.atencao { background: #fdecea; border-color: #a12a1c; }
.atencao strong:first-child { color: #a12a1c; }

.resumo-rapido { background: var(--papel); border: 2px solid var(--azul); border-radius: var(--raio); padding: 18px 22px; margin: 1.5em 0; }
.resumo-rapido h2, .resumo-rapido h3 { margin-top: 0; border: 0; }

.aviso-afiliado {
	font-size: .85rem; color: var(--texto-suave); background: var(--papel);
	border: 1px dashed var(--borda); border-radius: var(--raio); padding: 12px 16px; margin: 0 0 1.5em;
}

/* ===== Caixa de produto (afiliados) ===== */
.produto {
	display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: start;
	margin: 1.8em 0; padding: 20px; background: var(--papel);
	border: 2px solid var(--borda); border-radius: var(--raio);
}
.produto.em-destaque { border-color: var(--laranja); box-shadow: 0 0 0 4px var(--destaque-fundo); }
.produto-selo {
	display: inline-block; margin-bottom: 6px; padding: 2px 12px; border-radius: 999px;
	background: var(--laranja); color: #fff; font-size: .8rem; font-weight: 700;
}
.produto-imagem img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 10px; }
.produto-sem-imagem {
	aspect-ratio: 1; border-radius: 10px; background: var(--destaque-fundo);
	display: flex; align-items: center; justify-content: center; text-align: center;
	color: var(--texto-suave); font-size: .8rem; padding: 8px;
}
.produto h3 { margin: 0 0 .3em; font-size: 1.2rem; }
.produto p { margin-bottom: .8em; }
.produto ul { margin: 0 0 1em; padding-left: 1.2em; }
.produto-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.produto-botoes .botao { flex: 1 1 200px; }
.botao-amazon { background: #232f3e; }
.botao-amazon:hover { background: #111821; }
.botao-ml { background: #2d3277; }
.botao-ml:hover { background: #1c1f4f; }
.produto-nota { font-size: .8rem; color: var(--texto-suave); margin: 10px 0 0; }

@media (max-width: 600px) {
	.produto { grid-template-columns: 1fr; }
	.produto-imagem, .produto-sem-imagem { max-width: 200px; }
}

/* ===== Botões de compartilhar ===== */
.compartilhar {
	margin: 1.5em 0; padding: 18px 20px; background: var(--papel);
	border: 2px solid var(--borda); border-radius: var(--raio);
}
.compartilhar-titulo { margin: 0 0 12px; font-weight: 700; color: var(--azul-escuro); }
.compartilhar-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.compartilhar-botoes .botao { flex: 1 1 180px; }
.botao-whatsapp { background: #0b6e4f; }
.botao-whatsapp:hover { background: #084f39; }
.botao-facebook { background: #1a56c4; }
.botao-facebook:hover { background: #12409a; }
.botao-x { background: #111111; }
.botao-x:hover { background: #333333; }
.compartilhar-aviso { margin: 10px 0 0; font-weight: 700; color: var(--verde); min-height: 1em; }
.compartilhar-aviso:empty { display: none; }

/* ===== Caixa de dúvida e relacionados ===== */
.caixa-duvida {
	margin: 2em 0; padding: 22px; border-radius: var(--raio);
	background: var(--azul); color: #fff;
}
.caixa-duvida h2 { color: #fff; margin-top: 0; font-size: 1.3rem; border: 0; }
.caixa-duvida a { color: #fff; }

.navegacao-artigos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 2em 0; }
.navegacao-artigos a {
	display: block; padding: 16px; border: 2px solid var(--borda); border-radius: var(--raio);
	background: var(--papel); text-decoration: none;
}
.navegacao-artigos span { display: block; font-size: .8rem; color: var(--texto-suave); }
@media (max-width: 600px) { .navegacao-artigos { grid-template-columns: 1fr; } }

.paginacao { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; justify-content: center; }
.paginacao .page-numbers {
	min-width: 52px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center;
	padding: 0 14px; border: 2px solid var(--azul); border-radius: 12px; text-decoration: none; background: var(--papel);
}
.paginacao .current { background: var(--azul); color: #fff; }

/* ===== Rodapé ===== */
.rodape { margin-top: 48px; background: var(--azul-escuro); color: #e8edf5; padding: 36px 0 24px; font-size: .9rem; }
.rodape a { color: #fff; }
.rodape ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rodape-aviso { border-top: 1px solid rgba(255,255,255,.2); margin-top: 20px; padding-top: 16px; color: #c3cde0; }

/* ===== Alinhamentos do editor do WordPress ===== */
.alignleft { float: left; margin: 0 1em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text, figcaption { font-size: .85rem; color: var(--texto-suave); }
.wp-block-button__link { min-height: 56px; border-radius: var(--raio) !important; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }