/*
Theme Name: Elementor to PHP
Theme URI: https://elisabeteissa.com.br/
Description: Tema WordPress principal (standalone, sem tema pai). Migração Elementor → PHP + Tailwind + ACF. Text domain elementor-to-php-child mantém-se por compatibilidade (traduções / filtros).
Author: Projeto Elementor to PHP
Version: 0.2.4
Text Domain: elementor-to-php-child
Requires at least: 6.4
Requires PHP: 8.0
*/

/**
 * Tokens espelhados de `.elementor-kit-7` (export em referencias-do-site-atual/baixado-por-extensao).
 */
main.etp-lp,
.etp-lp {
	--etp-color-primary: #006271;
	--etp-color-secondary: #bba370;
	--etp-color-text: #003d4c;
	--etp-color-accent: #d6d2c4;
	--etp-color-white: #ffffff;
	--etp-color-mint: #dfeef0;
	--etp-content-max: 1112px;
}

/**
 * Tipografia e cromia base da Home para reduzir deriva entre seções.
 * Mantém Lato no corpo e Lora em títulos (tokens do kit da referência).
 */
.etp-home,
.etp-home.etp-lp {
	color: #003d4c;
	font-family: 'Lato', sans-serif;
}

.etp-home h1,
.etp-home h2,
.etp-home h3,
.etp-home h4,
.etp-home h5,
.etp-home h6 {
	color: #006271;
	font-family: 'Lora', serif;
	font-weight: 600;
}

/* Exceções de contraste: seções escuras da home. */
.etp-home .etp-especializacoes-title,
.etp-home .etp-servicos-card__title {
	color: #ffffff;
}

.etp-home p,
.etp-home li,
.etp-home a,
.etp-home button,
.etp-home label,
.etp-home span {
	font-family: 'Lato', sans-serif;
}

/**
 * Parallax — espelha Elementor `@media (min-width:1025px) { background-attachment: fixed }`.
 */
@media (min-width: 1025px) {
	@media (prefers-reduced-motion: no-preference) {
		.etp-parallax-bg {
			background-attachment: fixed;
		}
	}
}

/* CTA final: cartão teal sobre faixa clara (título branco vs reset #333) */
.etp-home-cta-final-card .etp-home-cta-final-card__title {
	color: #ffffff;
}

/**
 * Hello Elementor `reset.css` define `a { color: #c36 }` (rosa). Isso ganha sobre utilitários
 * Tailwind se o build não incluir a mesma especificidade — o CTA do hero ficava rosa (print 1).
 * Estilos com classe + !important garantem paridade com a referência (print 2 / home.html).
 */
.etp-home-hero a.etp-hero-cta--desktop,
.etp-home-hero a.etp-hero-cta--mobile {
	box-sizing: border-box;
	text-decoration: none !important;
}

.etp-home-hero a.etp-hero-cta--desktop {
	display: none;
	flex-direction: row-reverse;
	align-items: center;
	gap: 0.5rem;
	border-radius: 0.5rem;
	padding: 25px 40px;
	font-size: 18px;
	font-weight: 700;
	line-height: 18px;
	background-color: #003d4c !important;
	color: #ffffff !important;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}

.etp-home-hero a.etp-hero-cta--desktop .etp-hero-cta__icon {
	display: block;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.etp-home-hero a.etp-hero-cta--desktop:hover,
.etp-home-hero a.etp-hero-cta--desktop:focus {
	background-color: #bba370 !important;
	color: #ffffff !important;
}

.etp-home-hero a.etp-hero-cta--mobile {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: 0.5rem;
	padding: 18px 32px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	background-color: #bba370 !important;
	color: #ffffff !important;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}

.etp-home-hero a.etp-hero-cta--mobile .etp-hero-cta__icon {
	display: block;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

@media (min-width: 1024px) {
	.etp-home-hero a.etp-hero-cta--desktop {
		display: inline-flex;
	}

	.etp-home-hero a.etp-hero-cta--mobile {
		display: none;
	}
}

/* Tipos do reset (#333) não devem “manchar” o hero teal */
.etp-home-hero .etp-hero-heading,
.etp-home-hero .etp-hero-sub {
	color: #ffffff;
}

.etp-home-hero .etp-hero-heading {
	font-family: 'Lora', sans-serif !important;
}

.etp-home-hero a.etp-hero-cta--desktop,
.etp-home-hero a.etp-hero-cta--mobile {
	justify-content: center;
	text-align: center;
}

/* Scroll suave para âncoras internas na home (par com home.js; respeita reduced motion no JS e aqui) */
@media (prefers-reduced-motion: no-preference) {
	html:has(main.etp-lp) {
		scroll-behavior: smooth;
	}
}

/* Header (paridade visual com export Elementor da referência) */
.etp-site-header a.etp-nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	padding: 0 18px;
	color: #ffffff;
	text-decoration: none !important;
	-webkit-text-decoration: none !important;
	text-decoration-line: none !important;
}

.etp-site-header a.etp-nav-link:hover,
.etp-site-header a.etp-nav-link:focus,
.etp-site-header a.etp-nav-link:active {
	text-decoration: none !important;
	-webkit-text-decoration: none !important;
	text-decoration-line: none !important;
}

.etp-site-header a.etp-nav-link[data-active='true'] {
	background-color: #ffffff;
	color: #006271;
}

.etp-site-header .etp-header-logo img,
.etp-site-header .custom-logo-link img {
	max-height: 55px;
	width: auto;
}

.etp-header-dropdown {
	/* deixa o dropdown com borda suave e cantos grandes */
	overflow: hidden;
}

.etp-dropdown-link {
	line-height: 1.2;
	text-decoration: none !important;
	-webkit-text-decoration: none !important;
	text-decoration-line: none !important;
}

.etp-site-header a.etp-dropdown-link:hover,
.etp-site-header a.etp-dropdown-link:focus,
.etp-site-header a.etp-dropdown-link:active {
	text-decoration: none !important;
	-webkit-text-decoration: none !important;
	text-decoration-line: none !important;
}

/* Footer: paridade com Elementor (ícones, gap 5px, fill #006271). */
.etp-site-footer .etp-footer-social a svg path {
	fill: #006271;
}

.etp-site-footer .custom-logo-link img {
	max-height: none;
	width: auto;
}

/**
 * Paginação de arquivos (blog, serviços, depoimentos).
 * O WordPress coloca os números em `.nav-links > ul.page-numbers`; utilitários Tailwind só no `<nav>`
 * não espaçavam os itens (ficavam “cru” / cor de reset). Isto alinha à paleta .etp-lp.
 *
 * Importante: `the_posts_pagination( [ 'class' => ... ] )` passa o valor por `sanitize_html_class()`,
 * que remove espaços — NÃO uses várias classes num único string (ex.: "pagination etp-pagination"
 * vira "paginationetp-pagination" e o CSS deixa de bater). Usa só `etp-pagination`.
 *
 * O markup correcto é um `<div class="etp-pagination-shell">` à volta do `<nav>` do WordPress — não
 * uses `<nav>` exterior (evita `<nav>` dentro de `<nav>`) e permite scroll horizontal estável.
 */
.etp-pagination-shell {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-gutter: stable;
}

@supports (justify-content: safe center) {
	.etp-pagination-shell {
		justify-content: safe center;
	}
}

.etp-pagination-shell > nav.etp-pagination {
	flex: 0 0 auto;
	width: max-content;
	max-width: none;
}

nav.etp-pagination {
	font-family: 'Lato', sans-serif;
}

nav.etp-pagination .nav-links {
	display: flex;
	justify-content: center;
	width: 100%;
}

nav.etp-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

nav.etp-pagination ul.page-numbers li {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav.etp-pagination a.page-numbers,
nav.etp-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.375rem;
	min-height: 2.375rem;
	padding: 0.35rem 0.6rem;
	box-sizing: border-box;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	color: #006271 !important;
	background-color: #ffffff;
	border: 1px solid rgb(214 211 196 / 0.65);
	border-radius: 0.375rem;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

nav.etp-pagination a.page-numbers:hover,
nav.etp-pagination a.page-numbers:focus-visible {
	background-color: #dfeef0;
	border-color: rgb(0 98 113 / 0.35);
	color: #003d4c !important;
	outline: none;
}

nav.etp-pagination a.page-numbers:focus-visible {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #006271;
}

nav.etp-pagination span.page-numbers.current {
	background-color: #006271 !important;
	border-color: #006271 !important;
	color: #ffffff !important;
	cursor: default;
}

nav.etp-pagination span.page-numbers.dots {
	min-width: auto;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
	border-color: transparent;
	background: transparent;
	color: #003d4c !important;
	opacity: 0.5;
	font-weight: 500;
}

nav.etp-pagination a.prev.page-numbers,
nav.etp-pagination a.next.page-numbers {
	min-width: auto;
	padding-left: 0.9rem;
	padding-right: 0.9rem;
	border-radius: 9999px;
}

/* Paginação*/
nav.etp-pagination .nav-links {
	gap: 0.5rem;
}

/* Em viewports estreitas: uma única linha + scroll no shell (evita “blocos” que rebentam a largura). */
@media (max-width: 639px) {
	nav.etp-pagination ul.page-numbers {
		flex-wrap: nowrap;
		gap: 0.25rem 0.35rem;
	}

	nav.etp-pagination a.page-numbers,
	nav.etp-pagination span.page-numbers {
		min-width: 2.125rem;
		min-height: 2.125rem;
		padding: 0.3rem 0.45rem;
		font-size: 0.8125rem;
	}

	nav.etp-pagination a.prev.page-numbers,
	nav.etp-pagination a.next.page-numbers {
		padding-left: 0.65rem;
		padding-right: 0.65rem;
	}
}

/* Paginação dentro do conteúdo (wp_link_pages) — singles com <!--nextpage--> */
nav.post-nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	margin-top: 1.5rem;
	font-family: 'Lato', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	color: #003d4c;
}

nav.post-nav-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.125rem;
	min-height: 2.125rem;
	padding: 0.3rem 0.55rem;
	text-decoration: none !important;
	color: #006271 !important;
	background-color: #ffffff;
	border: 1px solid rgb(214 211 196 / 0.65);
	border-radius: 0.375rem;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

nav.post-nav-links a:hover,
nav.post-nav-links a:focus-visible {
	background-color: #dfeef0;
	border-color: rgb(0 98 113 / 0.35);
	color: #003d4c !important;
	outline: none;
}

nav.post-nav-links a:focus-visible {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #006271;
}

/**
 * Contact Form 7 — página Contato (paridade com formulário Elementor da referência).
 * O Preflight do Tailwind zera bordas/fundo de inputs; o `prose` alterava margens dos <p> do CF7.
 */
.contato-form-area .wpcf7 {
	font-family: 'Lato', sans-serif;
	color: #003d4c;
}

.contato-form-area .etp-cf7-contato__title {
	margin: 0 0 0.35rem;
	font-family: 'Lora', serif;
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	font-weight: 600;
	line-height: 1.25;
	color: #006271;
}

.contato-form-area .etp-cf7-contato__subtitle {
	margin: 0 0 1.5rem;
	font-family: 'Lato', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #006271;
}

.contato-form-area .wpcf7-form .etp-cf7-field {
	margin: 0 0 1rem;
}

.contato-form-area .wpcf7-form .etp-cf7-field:last-of-type {
	margin-bottom: 0;
}

.contato-form-area .wpcf7-form .etp-cf7-label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #006271;
}

.contato-form-area .wpcf7-form input.etp-cf7-control[type='text'],
.contato-form-area .wpcf7-form input.etp-cf7-control[type='email'],
.contato-form-area .wpcf7-form input.etp-cf7-control[type='tel'],
.contato-form-area .wpcf7-form textarea.etp-cf7-control {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 0.55rem 0.65rem;
	font-family: 'Lato', sans-serif;
	font-size: 0.875rem;
	line-height: 1.4;
	color: #003d4c;
	background-color: #ffffff;
	border: 1px solid rgb(214 211 196 / 0.85);
	border-radius: 0.375rem;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.contato-form-area .wpcf7-form textarea.etp-cf7-control {
	min-height: 6.5rem;
	resize: vertical;
}

.contato-form-area .wpcf7-form input.etp-cf7-control::placeholder,
.contato-form-area .wpcf7-form textarea.etp-cf7-control::placeholder {
	color: rgb(0 61 76 / 0.45);
	opacity: 1;
}

.contato-form-area .wpcf7-form input.etp-cf7-control:focus-visible,
.contato-form-area .wpcf7-form textarea.etp-cf7-control:focus-visible {
	outline: none;
	border-color: rgb(0 98 113 / 0.55);
	box-shadow: 0 0 0 2px rgb(223 238 240 / 0.9);
}

.contato-form-area .wpcf7-form .etp-cf7-submit-row {
	margin: 1.25rem 0 0;
	padding: 0;
}

.contato-form-area .wpcf7-form input.wpcf7-submit.etp-cf7-submit {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.85rem 2.75rem 0.85rem 1.25rem;
	font-family: 'Lato', sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25;
	color: #ffffff !important;
	text-align: center;
	cursor: pointer;
	background-color: #006271;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.15rem center;
	background-size: 0.85em;
	border: none;
	border-radius: 0.375rem;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
	transition: background-color 0.15s ease;
}

.contato-form-area .wpcf7-form input.wpcf7-submit.etp-cf7-submit:hover,
.contato-form-area .wpcf7-form input.wpcf7-submit.etp-cf7-submit:focus-visible {
	background-color: #005059;
	outline: none;
}

.contato-form-area .wpcf7-form input.wpcf7-submit.etp-cf7-submit:focus-visible {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #006271;
}

.contato-form-area .wpcf7-not-valid-tip {
	margin-top: 0.35rem;
	font-size: 0.8125rem;
}

.contato-form-area .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	border-radius: 0.375rem;
}

/**
 * Single do blog — espaçamento e hierarquia para blocos Gutenberg.
 * O `prose` do Tailwind não aplica bem quando há wrappers (.wp-block-group, .is-layout-flow)
 * ou quando o theme.json / global-styles zeram margens dos blocos.
 */
.etp-single-post .etp-blog-entry {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: #003d4c;
}

.etp-single-post .etp-blog-entry > *:first-child {
	margin-top: 0;
}

.etp-single-post .etp-blog-entry p {
	margin-top: 0;
	margin-bottom: 1.35em;
	line-height: 1.65;
}

.etp-single-post .etp-blog-entry h2,
.etp-single-post .etp-blog-entry h3,
.etp-single-post .etp-blog-entry h4,
.etp-single-post .etp-blog-entry h5,
.etp-single-post .etp-blog-entry h6 {
	font-family: 'Lora', serif;
	font-weight: 600;
	color: #006271;
	line-height: 1.28;
	margin-top: 2.25em;
	margin-bottom: 0.65em;
}

.etp-single-post .etp-blog-entry h2 {
	font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}

.etp-single-post .etp-blog-entry h3 {
	font-size: clamp(1.15rem, 2vw, 1.35rem);
}

.etp-single-post .etp-blog-entry h4 {
	font-size: 1.125rem;
}

.etp-single-post .etp-blog-entry h2:first-child,
.etp-single-post .etp-blog-entry h3:first-child,
.etp-single-post .etp-blog-entry h4:first-child {
	margin-top: 0;
}

.etp-single-post .etp-blog-entry ul,
.etp-single-post .etp-blog-entry ol {
	margin: 0 0 1.35em;
	padding-left: 1.35em;
}

.etp-single-post .etp-blog-entry li {
	margin-bottom: 0.4em;
}

.etp-single-post .etp-blog-entry li > p {
	margin-bottom: 0.5em;
}

.etp-single-post .etp-blog-entry li > p:last-child {
	margin-bottom: 0;
}

.etp-single-post .etp-blog-entry blockquote {
	margin: 1.5em 0;
	padding-left: 1em;
	border-left: 4px solid rgb(0 98 113 / 0.35);
	font-style: italic;
}

.etp-single-post .etp-blog-entry figure,
.etp-single-post .etp-blog-entry .wp-block-image {
	margin-top: 0;
	margin-bottom: 1.5em;
}

.etp-single-post .etp-blog-entry hr,
.etp-single-post .etp-blog-entry .wp-block-separator {
	margin: 2em 0;
	border: 0;
	border-top: 1px solid rgb(214 211 196 / 0.85);
}

.etp-single-post .etp-blog-entry pre {
	margin: 1.35em 0;
	padding: 1rem;
	overflow-x: auto;
	font-size: 0.9em;
	line-height: 1.55;
	border-radius: 0.375rem;
	background-color: rgb(223 238 240 / 0.45);
}