/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ==========================================================================
   Botões — 4 variantes com hover (componente do Figma)

     btn-solid          fundo claro,  cheio    verde  -> ink
     btn-outline        fundo claro,  vazado   verde  -> preenche de verde
     btn-solid--dark    fundo escuro, cheio    cream  -> taupe
     btn-outline--dark  fundo escuro, vazado   cream  -> preenche de cream

   Aqui só se define cor. Geometria (borda, raio, espaçamento, tipografia)
   continua vindo do widget no Elementor.

   Especificidade: o kit emite `.elementor-widget-button .elementor-button
   { background-color: <accent> }` em cada post-<id>.css, que carrega depois
   deste arquivo. Por isso os seletores levam `.elementor-element` na frente
   (0,3,0) — ganha do global sem precisar de !important.
   ========================================================================== */

:root {
	--li-green: #0B3D3C;
	--li-cream: #F9F4EB;
	--li-ink:   #1A1A1A;
	--li-taupe: #CBC4B7;
}

.elementor-element.btn-solid .elementor-button,
.elementor-element.btn-outline .elementor-button,
.elementor-element.btn-solid--dark .elementor-button,
.elementor-element.btn-outline--dark .elementor-button {
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* o ícone segue a cor do texto em todos os estados */
.elementor-element.btn-solid .elementor-button svg,
.elementor-element.btn-outline .elementor-button svg,
.elementor-element.btn-solid--dark .elementor-button svg,
.elementor-element.btn-outline--dark .elementor-button svg {
	fill: currentColor;
}

/* ---------- fundo claro ---------- */

.elementor-element.btn-solid .elementor-button {
	background-color: var(--li-green);
	border-color: var(--li-green);
	color: var(--li-cream);
}

.elementor-element.btn-solid .elementor-button:hover,
.elementor-element.btn-solid .elementor-button:focus-visible {
	background-color: var(--li-ink);
	border-color: var(--li-ink);
	color: var(--li-cream);
}

.elementor-element.btn-outline .elementor-button {
	background-color: transparent;
	border-color: var(--li-green);
	color: var(--li-green);
}

.elementor-element.btn-outline .elementor-button:hover,
.elementor-element.btn-outline .elementor-button:focus-visible {
	background-color: var(--li-green);
	border-color: var(--li-green);
	color: var(--li-cream);
}

/* ---------- fundo escuro ---------- */

.elementor-element.btn-solid--dark .elementor-button {
	background-color: var(--li-cream);
	border-color: var(--li-cream);
	color: var(--li-green);
}

.elementor-element.btn-solid--dark .elementor-button:hover,
.elementor-element.btn-solid--dark .elementor-button:focus-visible {
	background-color: var(--li-taupe);
	border-color: var(--li-taupe);
	color: var(--li-green);
}

.elementor-element.btn-outline--dark .elementor-button {
	background-color: transparent;
	border-color: var(--li-cream);
	color: var(--li-cream);
}

.elementor-element.btn-outline--dark .elementor-button:hover,
.elementor-element.btn-outline--dark .elementor-button:focus-visible {
	background-color: var(--li-cream);
	border-color: var(--li-cream);
	color: var(--li-green);
}