/*
Theme Name: AchieveMore
Description: Tema proprio da AchieveMore. Substitui a combinacao Elementor + WPCode, trazendo o conteudo da home e a navegacao global para arquivos do tema.
Author: AchieveMore
Version: 0.2.0
Requires at least: 6.0
Tested up to: 7.0
*/

/*
 * A identidade visual da home vem do build estatico do Tailwind em
 * parts/head-assets.html. Esse build so tem as classes que os snippets usavam,
 * entao os templates do blog NAO podem inventar utilities -- o CSS delas
 * simplesmente nao existiria. Daqui pra baixo e CSS proprio, classes am-*.
 */

:root {
	--am-primary: #42f087;
	--am-text: #ffffff;
	--am-text-body: #e8e8e8;
	--am-muted: #a0a0a0;
	--am-surface: #080808;
	--am-linha: rgba(255, 255, 255, .12);
	--am-gutter: 1.5rem;
	--am-header: 4rem; /* h-16 do cabecalho fixo */
}

.am-main {
	background: #000;
	color: var(--am-text);
	font-family: Nunito, ui-sans-serif, system-ui, sans-serif;
	padding-top: calc(var(--am-header) + 3rem);
	padding-bottom: 4rem;
	min-height: 60vh;
}

.am-wrap {
	max-width: 44rem;
	margin: 0 auto;
	padding: 0 var(--am-gutter);
}

.am-wrap--largo { max-width: 68rem; }

.am-eyebrow {
	display: inline-block;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--am-primary);
	text-decoration: none;
	margin-bottom: 1rem;
}
.am-eyebrow:hover { opacity: .8; }

.am-title {
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 1.75rem;
	color: var(--am-text);
}

.am-meta {
	font-size: .875rem;
	color: var(--am-muted);
	margin: -1rem 0 2rem;
}

/* ---------- corpo do artigo ---------- */

.am-body {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--am-text-body);
}
.am-body p { margin: 0 0 1.25rem; }
.am-body h2 {
	font-size: 1.625rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--am-text);
	margin: 2.75rem 0 1rem;
}
.am-body h3 {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--am-text);
	margin: 2rem 0 .75rem;
}
.am-body h4 { font-size: 1.0625rem; font-weight: 800; color: var(--am-text); margin: 1.5rem 0 .5rem; }
.am-body a { color: var(--am-primary); text-decoration: underline; text-underline-offset: 2px; }
.am-body strong, .am-body b { color: var(--am-text); font-weight: 700; }
.am-body ul, .am-body ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.am-body ul { list-style: disc; }
.am-body ol { list-style: decimal; }
.am-body li { margin: .4rem 0; }
.am-body li::marker { color: var(--am-primary); }
.am-body img { max-width: 100%; height: auto; border-radius: .75rem; margin: 1.75rem 0; }
.am-body figure { margin: 1.75rem 0; }
.am-body figcaption { font-size: .8125rem; color: var(--am-muted); margin-top: .5rem; }
.am-body blockquote {
	margin: 1.75rem 0;
	padding: .25rem 0 .25rem 1.25rem;
	border-left: 3px solid var(--am-primary);
	color: #cfcfcf;
	font-style: italic;
}
.am-body hr { border: 0; border-top: 1px solid var(--am-linha); margin: 2.5rem 0; }
.am-body table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: .95rem; display: block; overflow-x: auto; }
.am-body th, .am-body td { border: 1px solid var(--am-linha); padding: .6rem .75rem; text-align: left; }
.am-body th { background: rgba(255, 255, 255, .04); color: var(--am-text); font-weight: 700; }
.am-body code {
	background: rgba(255, 255, 255, .08);
	padding: .15em .4em;
	border-radius: .3rem;
	font-size: .9em;
}
.am-body pre {
	background: var(--am-surface);
	border: 1px solid var(--am-linha);
	border-radius: .75rem;
	padding: 1rem;
	overflow-x: auto;
	margin: 1.75rem 0;
}
.am-body pre code { background: none; padding: 0; }
.am-body iframe, .am-body video { max-width: 100%; border-radius: .75rem; margin: 1.75rem 0; }

/* ---------- relacionados ---------- */

.am-sec-titulo {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--am-text);
	margin: 0 0 1.25rem;
}

.am-related { margin-top: 4rem; }
.am-related__lista { display: flex; flex-direction: column; }
.am-related__item {
	display: flex;
	gap: 1rem;
	padding: 1.25rem 0;
	border-top: 1px solid var(--am-linha);
	text-decoration: none;
	color: var(--am-text);
	align-items: center;
}
.am-related__item:last-child { border-bottom: 1px solid var(--am-linha); }
.am-related__item:hover .am-related__titulo { color: var(--am-primary); }
.am-related__thumb {
	flex: 0 0 auto;
	width: 7rem;
	height: 5rem;
	border-radius: .5rem;
	overflow: hidden;
	background: rgba(255, 255, 255, .05);
}
.am-related__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.am-related__titulo { font-weight: 700; line-height: 1.35; margin: 0; font-size: 1rem; }

/* ---------- navegacao entre artigos ---------- */

.am-nav {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--am-linha);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	font-size: .9375rem;
}
@media (min-width: 640px) {
	.am-nav { flex-direction: row; justify-content: space-between; }
	.am-nav a + a { text-align: right; }
}
.am-nav a { color: var(--am-text); text-decoration: none; }
.am-nav a:hover { color: var(--am-primary); }

/* ---------- listagens (archive, busca) ---------- */

.am-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .am-grid { grid-template-columns: 1fr 1fr; } }

.am-card {
	display: block;
	background: rgba(255, 255, 255, .05);
	border-radius: 1rem;
	padding: 1.25rem;
	text-decoration: none;
	color: var(--am-text);
	transition: background .15s ease;
}
.am-card:hover { background: rgba(255, 255, 255, .1); }
.am-card__thumb { width: 100%; height: 11rem; object-fit: cover; border-radius: .75rem; margin-bottom: 1rem; display: block; }
.am-card__titulo { font-size: 1.125rem; font-weight: 800; line-height: 1.35; margin: 0 0 .5rem; }
.am-card__meta { font-size: .8125rem; color: var(--am-muted); margin: 0 0 .5rem; }
.am-card__resumo { font-size: .9375rem; color: var(--am-muted); margin: 0; }

/* ---------- paginacao ---------- */

.am-pag { margin-top: 3rem; display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; font-size: .9375rem; }
.am-pag .page-numbers {
	display: inline-block;
	padding: .5rem .85rem;
	border-radius: 999px;
	border: 1px solid var(--am-linha);
	color: var(--am-text);
	text-decoration: none;
}
.am-pag .page-numbers.current { background: var(--am-primary); color: #000; border-color: var(--am-primary); font-weight: 800; }
.am-pag a.page-numbers:hover { border-color: var(--am-primary); color: var(--am-primary); }

/* ---------- busca e 404 ---------- */

.am-busca { display: flex; gap: .5rem; margin: 0 0 2.5rem; }
.am-busca input {
	flex: 1;
	border: 0;
	border-radius: .5rem;
	background: rgba(255, 255, 255, .1);
	color: var(--am-text);
	padding: .85rem 1rem;
	font-family: inherit;
	font-size: 1rem;
}
.am-busca input:focus { outline: 2px solid var(--am-primary); outline-offset: 0; }
.am-busca button {
	border: 0;
	border-radius: 999px;
	background: var(--am-primary);
	color: #000;
	font-weight: 800;
	padding: .85rem 1.5rem;
	cursor: pointer;
	font-family: inherit;
}

.am-404 { text-align: center; }
.am-404__codigo { font-size: 4rem; font-weight: 900; color: var(--am-primary); margin: 0 0 .5rem; line-height: 1; }
.am-btn {
	display: inline-block;
	background: var(--am-primary);
	color: #000;
	font-weight: 900;
	border-radius: 999px;
	padding: 1rem 2rem;
	text-decoration: none;
}

.am-vazio { color: var(--am-muted); }
/* ---------- hero do artigo ----------
 * Espelha a secao do template 124: imagem destacada de fundo, overlay verde
 * #00D36E a 80%, titulo por cima. min-height responsivo 400/300/200px.
 */

.am-hero {
	position: relative;
	overflow: hidden;
	background-color: #041a0e;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-end;
	padding-top: calc(var(--am-header) + 40px);
	padding-bottom: 2.5rem;
	min-height: 400px;
}
@media (max-width: 1024px) { .am-hero { min-height: 300px; } }
@media (max-width: 640px)  { .am-hero { min-height: 200px; padding-bottom: 1.5rem; } }

.am-hero__overlay {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(157deg, #00D36E 0%, #00D36E 100%);
	opacity: .8;
	pointer-events: none;
}

.am-hero__conteudo {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--am-gutter);
}

/* No hero o rotulo e o titulo ficam sobre o verde: precisam de contraste alto. */
.am-hero .am-eyebrow { color: #041a0e; }
.am-hero .am-title {
	margin: 0;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

/* Com hero, o corpo do artigo nao precisa do padding-top do cabecalho fixo. */
.am-main--com-hero { padding-top: 0; }
.am-artigo { padding-top: 3rem; }
/* ---------- fundo global ----------
 * Sem isto o <body> fica branco e aparece nas faixas de overscroll do mobile,
 * alem de tingir a barra do navegador. Visto em print de celular.
 */
html, body {
	background-color: #000;
	color: #fff;
}

/* ---------- meta do artigo (data e categorias) ----------
 * Espelha o widget post-info da producao, que traz os tipos "date" e "terms".
 * Fica dentro do hero, sobre o verde -- por isso texto escuro.
 */
.am-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem .6rem;
	margin: 1rem 0 0;
	font-size: .875rem;
	font-weight: 600;
	color: #041a0e;
}
.am-hero__meta a { color: #041a0e; text-decoration: none; }
.am-hero__meta a:hover { text-decoration: underline; }
.am-hero__meta .am-sep { opacity: .55; }
/* ---------- fundo escuro no mobile ----------
 * color-scheme informa ao navegador que a pagina e escura. E o que faz o Safari
 * do iOS pintar a status bar e a toolbar de escuro -- theme-color e fundo preto
 * no body, sozinhos, nao davam conta.
 * html com min-height:100% evita que sobre area pintada pelo canvas em pagina curta.
 */
:root {
	color-scheme: dark;
}

html {
	min-height: 100%;
	background-color: #000;
}

body {
	min-height: 100vh;
	background-color: #000;
	/* respeita as areas seguras do iPhone sem deixar faixa clara */
	padding-left: env(safe-area-inset-left, 0);
	padding-right: env(safe-area-inset-right, 0);
}
/* ---------- utilities que faltam no build estatico do Tailwind ----------
 * A marcacao do site (snippets do WPCode) usa estas classes, mas o build so tem
 * as que ja existiam quando foi gerado. Sem elas:
 *   top-16   -> o painel do menu mobile nao encosta no cabecalho fixo
 *   z-40     -> o painel fica com z-index automatico e o conteudo pinta por cima
 *   z-[100]  -> os modais ficam sem camada
 *   md:hidden-> o painel nao se esconde no desktop
 */

#mobileMenuPanel {
	top: var(--am-header);
	z-index: 45; /* abaixo da nav (z-50), acima do conteudo */
}
@media (min-width: 768px) {
	#mobileMenuPanel { display: none !important; }
}

#diagnosticModal,
#acessoRapidoZoomModal {
	z-index: 100;
}

/* O hero cria contexto de empilhamento no nivel 0: fica sob o painel do menu. */
.am-hero { z-index: 0; }

/* Reforco do fundo escuro: nada deve deixar faixa clara nas bordas. */
html, body { background-color: #000 !important; }
/* ---------- cabecalho das paginas com layout proprio ----------
 * A /blog/ nao traz titulo no conteudo (em producao ele vinha do header do
 * Elementor). Este bloco da o titulo sem mexer no layout que o conteudo define.
 */
.am-pagina {
	background: #000;
	padding-top: calc(var(--am-header) + 2.5rem);
	padding-bottom: 1.5rem;
}
.am-pagina__interno {
	max-width: 68rem;
	margin: 0 auto;
	padding: 0 var(--am-gutter);
}
.am-pagina .am-title { margin: 0; }

/* Conteudo de pagina do Elementor: precisa do espaco do cabecalho fixo apenas
   quando nao houve cabecalho de pagina antes dele. */
.am-pagina + .am-conteudo-proprio { padding-top: 0; }
.am-conteudo-proprio { background: #000; color: #fff; padding-top: var(--am-header); }
.am-pagina + .am-conteudo-proprio { padding-top: 0; }
/* ---------- extras da pagina do blog (categorias e newsletter) ---------- */
.am-blog-extras {
	margin-top: 4rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--am-linha);
	display: grid;
	gap: 2.5rem;
}
@media (min-width: 768px) {
	.am-blog-extras { grid-template-columns: 1fr 1.4fr; gap: 3rem; }
}
.am-categorias { list-style: none; margin: 0; padding: 0; }
.am-categorias li { margin: 0 0 .6rem; }
.am-categorias a { color: var(--am-text); text-decoration: none; }
.am-categorias a:hover { color: var(--am-primary); }
.am-categorias li { color: var(--am-muted); font-size: .9375rem; }

/* O formulario do CF7 dentro do tema: campos legiveis no fundo escuro. */
.am-body .wpcf7 input[type="text"],
.am-body .wpcf7 input[type="email"],
.am-body .wpcf7 input[type="tel"],
.am-body .wpcf7 textarea,
.am-body .wpcf7 select {
	width: 100%;
	border: 0;
	border-radius: .5rem;
	background: rgba(255, 255, 255, .1);
	color: var(--am-text);
	padding: .8rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	margin-bottom: .75rem;
}
.am-body .wpcf7 input[type="submit"] {
	border: 0;
	border-radius: 999px;
	background: var(--am-primary);
	color: #000;
	font-weight: 800;
	padding: .85rem 1.75rem;
	cursor: pointer;
	font-family: inherit;
}
.am-body .wpcf7-not-valid-tip { color: #ff8a8a; font-size: .85rem; }
.am-body .wpcf7-response-output { border-radius: .5rem; padding: .75rem 1rem; font-size: .9375rem; }
/* ---------- pagina do blog: posts a esquerda, lateral a direita ----------
 * Proporcao herdada do original: colunas de 66% e 33%.
 * A lateral traz Newsletter e o menu curado 'categorias'.
 */
.am-blog { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
	.am-blog { grid-template-columns: 2fr 1fr; gap: 3rem; align-items: start; }
	.am-blog__lado { position: sticky; top: calc(var(--am-header) + 1.5rem); }
}
.am-lado__bloco { margin-bottom: 2.5rem; }
.am-lado__bloco:last-child { margin-bottom: 0; }

/* Com a coluna estreitada, os cartoes ficam em 1 ou 2 por linha. */
.am-blog__posts .am-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) {
	.am-blog__posts .am-grid { grid-template-columns: 1fr 1fr; }
}

.am-categorias { list-style: none; margin: 0; padding: 0; }
.am-categorias li { margin: 0 0 .65rem; font-size: .9375rem; }
.am-categorias a { color: var(--am-text); text-decoration: none; }
.am-categorias a:hover { color: var(--am-primary); }

/* Formulario do CF7 dentro do tema: campos legiveis no fundo escuro. */
.am-body .wpcf7 input[type="text"],
.am-body .wpcf7 input[type="email"],
.am-body .wpcf7 input[type="tel"],
.am-body .wpcf7 textarea,
.am-body .wpcf7 select {
	width: 100%;
	border: 0;
	border-radius: .5rem;
	background: rgba(255, 255, 255, .1);
	color: var(--am-text);
	padding: .8rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	margin-bottom: .75rem;
}
.am-body .wpcf7 input[type="submit"] {
	border: 0;
	border-radius: 999px;
	background: var(--am-primary);
	color: #000;
	font-weight: 800;
	padding: .8rem 1.6rem;
	cursor: pointer;
	font-family: inherit;
}
.am-body .wpcf7-not-valid-tip { color: #ff8a8a; font-size: .85rem; }
.am-body .wpcf7-response-output { border-radius: .5rem; padding: .7rem 1rem; font-size: .9375rem; }
/* ---------- aviso da newsletter do rodape ---------- */
.am-nl-status { margin: .6rem 0 0; font-size: .8125rem; line-height: 1.4; min-height: 1em; }
.am-nl-status--ok { color: var(--am-primary); }