/*
Theme Name: Astra Child
Theme URI: https://allanreinaldoviana.com/
Description: Child theme do Astra para allanreinaldoviana.com. Permite customizações visuais e técnicas sem perder as mudanças quando o tema Astra pai for atualizado.
Author: Allan Reinaldo Viana
Author URI: https://allanreinaldoviana.com/
Template: astra
Version: 1.4.1
Text Domain: astra-child
*/

/* ==========================================================================
   Identidade visual "Calma Executiva"
   Paleta + tipografia. Cobre o que o Customizer do Astra não alcança
   diretamente (variáveis, contraste em fundo escuro, refinamentos).
   ========================================================================== */

:root {
	--color-petroleo: #1B3A3F;
	--color-areia: #D9C4A3;
	--color-neutro-claro: #F6F2EA;
	--color-cta: #7A2E2E;
	--color-cta-hover: #611F1F;

	--font-heading: 'Lora', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   Fontes self-hosted (evita requisições ao Google Fonts CDN)
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/inter-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/inter-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/lora-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/lora-600.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Base — fundo claro, texto petróleo
   -------------------------------------------------------------------------- */

body {
	background-color: var(--color-neutro-claro);
	color: var(--color-petroleo);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.6;
}

body,
p,
li,
.main-header-menu,
.ast-woocommerce-container,
button,
input,
select,
textarea {
	font-family: var(--font-body);
}

/* --------------------------------------------------------------------------
   Tipografia — títulos
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.page-title,
.ast-oembed-title {
	font-family: var(--font-heading);
	color: var(--color-petroleo);
	letter-spacing: -0.01em;
}

h1,
h2 {
	font-weight: 600;
}

h3,
h4,
h5,
h6 {
	font-weight: 500;
}

h1 {
	font-size: 42px;
	line-height: 1.2;
}

h2 {
	font-size: 32px;
	line-height: 1.25;
}

h3 {
	font-size: 24px;
	line-height: 1.3;
}

h4 {
	font-size: 20px;
	line-height: 1.35;
}

@media (max-width: 544px) {
	h1 {
		font-size: 30px;
	}

	h2 {
		font-size: 24px;
	}

	h3 {
		font-size: 20px;
	}

	body {
		font-size: 16px;
	}
}

/* --------------------------------------------------------------------------
   Links — petróleo sublinhado em fundo claro
   -------------------------------------------------------------------------- */

a {
	color: var(--color-petroleo);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover,
a:focus {
	color: var(--color-cta);
}

.main-header-menu .menu-link {
	color: var(--color-petroleo);
	font-weight: 500;
	text-decoration: none;
}

.main-header-menu .menu-item:hover > .menu-link {
	color: var(--color-cta);
}

/* --------------------------------------------------------------------------
   Botões / CTA — fundo --color-cta, texto branco
   -------------------------------------------------------------------------- */

.ast-button,
button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link,
.ast-outline-button,
.uagb-buttons-repeater,
.uagb-infobox-cta-link {
	background-color: var(--color-cta) !important;
	color: #FFFFFF !important;
	border-color: var(--color-cta) !important;
	border-radius: 6px;
	font-family: var(--font-body) !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em !important;
	text-decoration: none;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.ast-button:hover,
button:hover,
.button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.ast-outline-button:hover,
.uagb-buttons-repeater:hover,
.uagb-infobox-cta-link:hover {
	background-color: var(--color-cta-hover) !important;
	color: #FFFFFF !important;
	border-color: var(--color-cta-hover) !important;
	opacity: 1;
}

/* Ícone (seta) dos botões CTA — o Spectra gera, por bloco, uma cor de
   preenchimento diferente para o SVG em repouso e no hover (um botão
   nasce branco e fica escuro no hover, o outro nasce escuro e fica
   branco), fazendo a seta "sumir" em momentos opostos em cada botão.
   Força branco sempre, replicando a especificidade das regras geradas
   pelo Spectra para garantir a vitória na cascata. */
.uagb-block-4824fcea .wp-block-button.uagb-ifb-button-wrapper .uagb-infobox-cta-link svg,
.uagb-block-4824fcea .wp-block-button.uagb-ifb-button-wrapper .uagb-infobox-cta-link:hover > svg,
.wp-block-uagb-buttons .uagb-block-87823176 .uagb-buttons-repeater .uagb-button__icon svg,
.wp-block-uagb-buttons .uagb-block-87823176 .uagb-buttons-repeater:hover .uagb-button__icon svg,
.uagb-infobox-cta-link svg,
.uagb-buttons-repeater .uagb-button__icon svg {
	fill: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   Fundo escuro (hero / seções de destaque)
   Aplicado automaticamente a blocos que usem as cores da paleta global
   registrada no editor (Petróleo como fundo) — ver add_theme_support()
   em functions.php. Títulos em areia; nunca a cor do CTA em fundo escuro.
   -------------------------------------------------------------------------- */

.has-petroleo-background-color,
.has-petroleo-background-color.wp-block-cover {
	color: var(--color-neutro-claro);
}

.has-petroleo-background-color h1,
.has-petroleo-background-color h2,
.has-petroleo-background-color h3,
.has-petroleo-background-color h4,
.has-petroleo-background-color h5,
.has-petroleo-background-color h6 {
	color: var(--color-areia);
}

.has-petroleo-background-color p,
.has-petroleo-background-color li {
	color: var(--color-neutro-claro);
}

.has-petroleo-background-color a {
	color: var(--color-areia);
	text-decoration: underline;
}

.has-petroleo-background-color a:hover,
.has-petroleo-background-color a:focus {
	color: #FFFFFF;
}

/* Nunca usar areia como texto em fundo claro — reforço defensivo. */
.has-areia-background-color {
	color: var(--color-petroleo);
}

.has-areia-background-color h1,
.has-areia-background-color h2,
.has-areia-background-color h3,
.has-areia-background-color h4 {
	color: var(--color-petroleo);
}

/* --------------------------------------------------------------------------
   Correções de "cor inteligente" do Astra (Extra Color 1 / 3 da paleta
   global são usadas como fundo padrão de vários componentes — cards de
   post, widgets, ícone do menu mobile — o que puxaria areia/CTA para
   lugares errados). Fixamos esses componentes explicitamente.
   -------------------------------------------------------------------------- */

.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single:not(.ast-related-post),
.ast-separate-container .error-404,
.ast-separate-container .no-results,
.ast-separate-container.ast-two-container #secondary .widget {
	background-color: #FFFFFF !important;
}

.wp-block-search__inside-wrapper .wp-block-search__input {
	background-color: #FFFFFF !important;
	color: var(--color-petroleo) !important;
}

[data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg,
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-wrap .mobile-menu {
	color: var(--color-areia) !important;
	fill: var(--color-areia) !important;
}

/* --------------------------------------------------------------------------
   Cards e blocos de conteúdo
   -------------------------------------------------------------------------- */

.ast-service-card,
.ast-price-card,
.ast-team-card,
.ast-content-card,
.wp-block-group.is-style-card,
.wp-block-column > .wp-block-group,
.astra-shop-summary-wrap,
.single-content .wp-block-columns > .wp-block-column {
	background-color: #FFFFFF;
	border: none;
	border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Header / Footer
   -------------------------------------------------------------------------- */

/* Cabeçalho — fundo petróleo em todas as páginas. Menu em areia
   (nunca a cor do CTA em fundo escuro), hover em branco. */
.site-header,
.ast-above-header,
.ast-below-header,
.ast-primary-header-bar,
.ast-main-header-bar,
.main-header-bar {
	background-color: var(--color-petroleo) !important;
}

.main-header-menu .menu-link {
	color: #FFFFFF !important;
}

.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .menu-item.current-menu-item > .menu-link {
	color: var(--color-areia) !important;
}

.ast-header-break-point .menu-toggle-close,
.ast-header-break-point .menu-toggle-open {
	color: #FFFFFF !important;
}

/* Menu mobile (drawer sobre fundo claro) — texto em vinho, legível,
   sem nenhuma mudança de cor em hover/foco/clique/ativo. */
.ast-header-break-point .main-header-menu .menu-link,
.ast-header-break-point .main-header-menu .menu-item:hover > .menu-link,
.ast-header-break-point .main-header-menu .menu-item:focus > .menu-link,
.ast-header-break-point .main-header-menu .menu-item:active > .menu-link,
.ast-header-break-point .main-header-menu .menu-item.current-menu-item > .menu-link,
.ast-header-break-point .main-header-menu .menu-item.current-menu-ancestor > .menu-link,
.ast-header-break-point .main-header-menu .menu-link:hover,
.ast-header-break-point .main-header-menu .menu-link:focus,
.ast-header-break-point .main-header-menu .menu-link:active {
	color: #7A2E2E !important;
	transition: none !important;
}

/* Rodapé — fundo petróleo em todas as páginas. Títulos em areia,
   texto/ícones em neutro-claro, links em areia (nunca a cor do CTA
   em fundo escuro), conforme regra de contraste da identidade visual. */
.site-footer,
.ast-footer-overlay,
.site-primary-footer-wrap,
.site-below-footer-wrap,
.footer-widget-area {
	background-color: var(--color-petroleo) !important;
}

.site-footer,
.site-footer p,
.site-footer li,
.site-footer span {
	color: var(--color-neutro-claro) !important;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget-title {
	color: var(--color-areia) !important;
}

.site-footer a,
.site-footer a:visited {
	color: #FFFFFF !important;
	text-decoration: none !important;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--color-areia) !important;
}

/* --------------------------------------------------------------------------
   Espaçamento — sensação de repouso
   -------------------------------------------------------------------------- */

.ast-container {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.entry-content > * {
	margin-bottom: 1.5em;
}

section,
.wp-block-group {
	margin-top: 0;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Home — "Demandas Atendidas"
   Grade de 8 cards simétricos (4 col desktop / 2 col tablet / 1 col
   mobile). Insônia e Burnout recebem tratamento de destaque (borda
   superior vinho + rótulo "Especialidade") mantendo o mesmo tamanho
   dos demais cards.
   -------------------------------------------------------------------------- */

.demandas-section {
	max-width: 1180px;
	margin: 0 auto;
	padding-block: 140px 120px;
}

/* O card flutuante de "Contato" (uagb-block-1b989b47) usa margem negativa
   grande para se sobrepor visualmente à seção anterior — de propósito no
   desktop. Em tablet/mobile essa margem negativa é enorme (-400px /
   -600px) e "puxa" a seção seguinte para cima; sem um padding-top que
   compense esse valor, o card de Contato fica por cima do início de
   "Demandas Atendidas". Os valores abaixo garantem a folga necessária. */
@media (max-width: 1024px) {
	.demandas-section {
		padding-block: 420px 80px;
	}
}

@media (max-width: 600px) {
	.demandas-section {
		padding-block: 620px 56px;
	}
}

/* --------------------------------------------------------------------------
   Home — "Perfil Profissional"
   Aumenta o espaço acima da seção (uagb-block-b874bf47), que por padrão
   vem com pouco respiro em relação ao bloco anterior. !important porque
   o Spectra gera a regra original com a mesma especificidade e ela
   precisa ser vencida de forma confiável independente da ordem de carga.
   Em tablet/mobile o valor inclui uma folga extra para compensar a
   margem negativa (-120px) da foto do Allan na seção anterior, que pode
   se sobrepor à imagem desta seção em telas menores.
   -------------------------------------------------------------------------- */

.wp-block-uagb-container.uagb-block-b874bf47 {
	padding-top: 140px !important;
}

@media (max-width: 1024px) {
	.wp-block-uagb-container.uagb-block-b874bf47 {
		padding-top: 140px !important;
	}
}

@media (max-width: 600px) {
	.wp-block-uagb-container.uagb-block-b874bf47 {
		padding-top: 110px !important;
	}
}

.demandas-eyebrow-section {
	display: block;
	text-align: center;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-cta);
	margin: 0 0 12px;
}

.demandas-heading {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(26px, 3.4vw, 36px);
	text-align: center;
	text-wrap: balance;
	margin: 0 0 12px;
	color: var(--color-petroleo);
}

.demandas-sub {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 48px;
	font-size: 16px;
	line-height: 1.6;
	color: #3f5457;
}

.demandas-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.demandas-card {
	background: #FFFFFF;
	border: 1px solid #E4DECF;
	border-radius: 10px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 220px;
	box-shadow: 0 1px 2px rgba(27, 58, 63, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.demandas-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(27, 58, 63, 0.12);
	border-color: #D5CDB8;
}

.demandas-card--destaque {
	border-top: 4px solid var(--color-cta);
}

.demandas-card-eyebrow {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-cta);
	margin: 0;
}

.demandas-card-eyebrow--spacer {
	height: 11px;
}

.demandas-card-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.3;
	margin: 0;
	color: var(--color-petroleo);
}

.demandas-card-text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
	color: #42585B;
}

@media (max-width: 1024px) {
	.demandas-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.demandas-grid {
		grid-template-columns: 1fr;
	}

	.demandas-card {
		min-height: auto;
	}
}

/* FAQ page: remove residual spacing so the accordion block sits flush against the banner above and the footer below */
.page-id-5520 .uagb-block-c01062fc,
.page-id-5520 .uagb-block-4374068c {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.page-id-5520 .uagb-faq-item:last-child {
	margin-bottom: 0 !important;
}

.page-id-5520 .ast-container {
	padding-bottom: 0 !important;
}