/*
Theme Name: Josiane Ferreira Child
Theme URI: https://fepreve.digital/
Description: Tema filho personalizado para o site de Josiane Ferreira, baseado no Hello Elementor.
Author: Fernanda Prevedello | Fe Prevê Digital
Author URI: https://fepreve.digital/
Template: hello-elementor
Version: 1.0.0
Text Domain: josiane-ferreira-child
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/*
 * Identidade visual — Josiane Ferreira
 * Desenvolvimento: Fe Prevê Digital
 *
 * As variáveis abaixo podem ser usadas no CSS personalizado do Elementor:
 * var(--jf-color-dark), var(--jf-color-accent), etc.
 */

:root {
  /* Paleta principal */
  --jf-color-dark: #2A1E14;
  --jf-color-dark-soft: #4A3625;
  --jf-color-text-muted: #7A6651;
  --jf-color-background: #F1EBDF;
  --jf-color-surface: #F6F1E7;
  --jf-color-surface-muted: #E7DFCD;
  --jf-color-accent: #C9B294;
  --jf-color-accent-light: #D9C7AB;
  --jf-color-accent-muted: #B89E80;
  --jf-color-white: #FFFFFF;

  /* Tipografia */
  --jf-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --jf-font-body: Arimo, Arial, Helvetica, sans-serif;

  /* Layout */
  --jf-radius-sm: 8px;
  --jf-radius-md: 16px;
  --jf-radius-lg: 28px;
  --jf-shadow-soft: 0 18px 50px rgba(42, 30, 20, 0.10);
  --jf-transition: 220ms ease;
}

/* Base segura para páginas que não usam o canvas do Elementor */
body:not(.elementor-page) {
  background: var(--jf-color-background);
  color: var(--jf-color-dark);
  font-family: var(--jf-font-body);
  line-height: 1.65;
}

body:not(.elementor-page) h1,
body:not(.elementor-page) h2,
body:not(.elementor-page) h3,
body:not(.elementor-page) h4,
body:not(.elementor-page) h5,
body:not(.elementor-page) h6 {
  color: var(--jf-color-dark);
  font-family: var(--jf-font-display);
  font-weight: 400;
  line-height: 1.08;
}

/* Classes utilitárias opcionais para uso no Elementor */
.jf-section-dark {
  background: var(--jf-color-dark);
  color: var(--jf-color-background);
}

.jf-section-light {
  background: var(--jf-color-background);
  color: var(--jf-color-dark);
}

.jf-surface {
  background: var(--jf-color-surface);
  border: 1px solid var(--jf-color-accent-light);
  border-radius: var(--jf-radius-md);
  box-shadow: var(--jf-shadow-soft);
}

.jf-eyebrow {
  color: var(--jf-color-text-muted);
  font-family: var(--jf-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.jf-display {
  font-family: var(--jf-font-display);
  font-weight: 400;
  line-height: 1.05;
}

.jf-button-primary,
.elementor a.jf-button-primary {
  align-items: center;
  background: var(--jf-color-dark);
  border: 1px solid var(--jf-color-dark);
  border-radius: 999px;
  color: var(--jf-color-background);
  display: inline-flex;
  font-family: var(--jf-font-body);
  font-weight: 700;
  justify-content: center;
  min-height: 46px;
  padding: 0.78rem 1.35rem;
  text-decoration: none;
  transition:
    background-color var(--jf-transition),
    border-color var(--jf-transition),
    color var(--jf-transition),
    transform var(--jf-transition);
}

.jf-button-primary:hover,
.jf-button-primary:focus-visible,
.elementor a.jf-button-primary:hover,
.elementor a.jf-button-primary:focus-visible {
  background: var(--jf-color-dark-soft);
  border-color: var(--jf-color-dark-soft);
  color: var(--jf-color-white);
  transform: translateY(-1px);
}

.jf-button-secondary,
.elementor a.jf-button-secondary {
  align-items: center;
  background: transparent;
  border: 1px solid var(--jf-color-accent-muted);
  border-radius: 999px;
  color: var(--jf-color-dark);
  display: inline-flex;
  font-family: var(--jf-font-body);
  font-weight: 700;
  justify-content: center;
  min-height: 46px;
  padding: 0.78rem 1.35rem;
  text-decoration: none;
  transition:
    background-color var(--jf-transition),
    border-color var(--jf-transition),
    color var(--jf-transition);
}

.jf-button-secondary:hover,
.jf-button-secondary:focus-visible,
.elementor a.jf-button-secondary:hover,
.elementor a.jf-button-secondary:focus-visible {
  background: var(--jf-color-accent-light);
  border-color: var(--jf-color-accent);
  color: var(--jf-color-dark);
}

/* Foco visível para acessibilidade */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--jf-color-accent);
  outline-offset: 3px;
}

/* Respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}