/*Diseño temporal con fuentes cursivas*/

/* =========================================================
   NASTY ESSAYS — Tipografía + colores por tema
   Pegar en el style.css de tu tema hijo (debajo del encabezado del tema).
   Usa tu mismo selector del toggle: :root[data-theme="light|sepia|dark"]
   Si ya pegaste el sc-styles.css anterior, BORRA de ahí los bloques
   "Tema OSCURO" y "Tema SEPIA" y deja solo este archivo para los temas.
   ========================================================= */
   
/*Pruebas de color de camb ios del tema*/

:root {
	/* 1. Astra sobreescritos */
	--e-nasty-global-color-astglobalcolor4: #e9ffe2;
}

:root[data-theme="light"] {
  --e-nasty-global-color-astglobalcolor4: #e9ffe2 !important;
}

:root[data-theme="sepia"] {
  --e-nasty-global-color-astglobalcolor4: #ffffe2 !important;
}

:root[data-theme="dark"] {
  --e-nasty-global-color-astglobalcolor4: #1f1f1f !important;
}

.elementor-23 .elementor-element.elementor-element-bf1bd47:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-bf1bd47 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: var(--sc-bg) !important;
}

/* ---------- 1. FUENTES ---------- */
:root {
  --sc-font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sc-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- 2. COLORES POR TEMA ---------- */

/* LIGHT (también es el valor por defecto si no hay data-theme) */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --sc-bg: #FAF8F5;
  --sc-bg-alt: #F3EFEA;
  --sc-surface: #FCFBF9;
  --sc-text: #1A1A1A;
  --sc-heading: #1A1A1A;
  --sc-muted: #5C5C5C;
  --sc-border: #E7E0D6;
  --sc-accent: #8C6D46;
  --sc-link: #8C6D46;
  --sc-btn-bg: #1A1A1A;
  --sc-btn-text: #FFFFFF;
  --sc-btn-hover-bg: #8C6D46;
  --sc-btn-hover-text: #FFFFFF;
  --sc-input-bg: #FFFFFF;
  --sc-header-bg: rgba(250, 248, 245, 0.92);
  --sc-footer-bg: #F3EFEA;
  --sc-ok: #10B981;
  --surface: var(--sc-surface);          /* lo usa tu símbolo yin-yang */
}

/* SEPIA */
:root[data-theme="sepia"] {
  color-scheme: light;
  --sc-bg: #F4ECD8;
  --sc-bg-alt: #EBDFC3;
  --sc-surface: #FBF5E6;
  --sc-text: #3B2F20;
  --sc-heading: #2E2416;
  --sc-muted: #6B5A43;
  --sc-border: #DCCDAA;
  --sc-accent: #8C6D46;
  --sc-link: #7A5C36;
  --sc-btn-bg: #3B2F20;
  --sc-btn-text: #FBF5E6;
  --sc-btn-hover-bg: #8C6D46;
  --sc-btn-hover-text: #FFFFFF;
  --sc-input-bg: #FFFBF0;
  --sc-header-bg: rgba(244, 236, 216, 0.92);
  --sc-footer-bg: #EBDFC3;
  --surface: var(--sc-surface);
}

/* DARK */
:root[data-theme="dark"] {
  color-scheme: dark;
  --sc-bg: #121212;
  --sc-bg-alt: #1A1A1A;
  --sc-surface: #1A1A1A;
  --sc-text: #E8E4DD;
  --sc-heading: #FAF8F5;
  --sc-muted: #B8B4AD;
  --sc-border: #2E2E2E;
  --sc-accent: #B8935F;
  --sc-link: #C9A56E;
  --sc-btn-bg: #FAF8F5;
  --sc-btn-text: #1A1A1A;
  --sc-btn-hover-bg: #B8935F;
  --sc-btn-hover-text: #FFFFFF;
  --sc-input-bg: #242424;
  --sc-header-bg: rgba(18, 18, 18, 0.92);
  --sc-footer-bg: #1A1A1A;
  --surface: var(--sc-surface);
}

/* Si quieres seguir usando tu variable de prueba de Astra, apúntala aquí: */
:root { --e-nasty-global-color-astglobalcolor4: var(--sc-bg-alt); }

/* ---------- 3. BASE: FONDO Y TEXTO ---------- */
body,
body.ast-separate-container,
body .site-content,
body .ast-container {
  color: var(--sc-text);
  font-family: var(--sc-font-sans);
  -webkit-font-smoothing: antialiased;
}
/* Transición suave SOLO al hacer clic en el toggle (no al cargar la página) */
html.nm-theme-animate body,
html.nm-theme-animate .site-header,
html.nm-theme-animate .main-header-bar,
html.nm-theme-animate .site-footer,
html.nm-theme-animate .sc-card,
html.nm-theme-animate .sc-hero {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
::selection { background: #8C6D46; color: #fff; }

a { color: var(--sc-link); }
a:hover { color: var(--sc-accent); }

/* ---------- 4. TÍTULOS Y SUBTÍTULOS (serif) ---------- */
body h1, body h2, body h3, body h4, body h5, body h6,
body .entry-title, body .entry-title a,
body .ast-archive-title, body .widget-title,
body .elementor-heading-title {
  font-family: var(--sc-font-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--sc-heading);
}

/* Subtítulo / bajada: añade la clase "sc-lead" al bloque o widget */
.sc-lead {
  font-family: var(--sc-font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--sc-muted);
}

/* ---------- 5. HEADER ---------- */
body .site-header,
body .main-header-bar,
body .ast-primary-header-bar,
body .ast-mobile-header-wrap .ast-mobile-header-content {
  background-color: var(--sc-header-bg);
  border-bottom: 1px solid var(--sc-border);
}

/*
@supports (backdrop-filter: blur(8px)) {
  body .site-header { backdrop-filter: blur(10px); }
}
*/

/* Nombre del sitio y tagline */
body .site-title,
body .site-title a {
  font-family: var(--sc-font-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sc-heading);
}
body .site-title a:hover { color: var(--sc-accent); }
body .site-description {
  font-family: var(--sc-font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-muted);
}

/* ---------- 6. MENÚ ---------- */
body .main-header-menu .menu-link,
body .ast-builder-menu .menu-item > .menu-link,
body .elementor-nav-menu a {
  font-family: var(--sc-font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sc-text);
}
body .main-header-menu .menu-item:hover > .menu-link,
body .main-header-menu .current-menu-item > .menu-link,
body .elementor-nav-menu a:hover {
  color: var(--sc-accent);
}
body .main-header-menu .sub-menu {
  background-color: var(--sc-surface);
  border: 1px solid var(--sc-border);
}
body .main-header-menu .sub-menu .menu-link { font-size: 0.85rem; }

/* ---------- 7. BOTONES ---------- */
body .ast-button,
body .button,
body button[type="submit"],
body input[type="submit"],
body .wp-block-button__link,
body .elementor-button {
  font-family: var(--sc-font-sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sc-btn-text);
  background-color: var(--sc-btn-bg);
  border: 1px solid transparent;
  border-radius: 0.75rem;
}
body .ast-button:hover,
body .button:hover,
body button[type="submit"]:hover,
body input[type="submit"]:hover,
body .wp-block-button__link:hover,
body .elementor-button:hover {
  background-color: var(--sc-btn-hover-bg);
  color: var(--sc-btn-hover-text);
}

/* ---------- 8. FORMULARIOS ---------- */
body input[type="text"],
body input[type="email"],
body input[type="search"],
body textarea,
body select {
  font-family: var(--sc-font-sans);
  color: var(--sc-text);
  background-color: var(--sc-input-bg);
  border: 1px solid var(--sc-border);
  border-radius: 0.75rem;
}
body input:focus,
body textarea:focus,
body select:focus {
  border-color: var(--sc-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(140, 109, 70, 0.25);
}

/* ---------- 9. LECTURA DE ENSAYOS ---------- */
body.single-post .entry-content p,
body.single-post .entry-content li {
  font-family: var(--sc-font-serif);
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--sc-text);
}
body blockquote,
body .wp-block-quote {
  font-family: var(--sc-font-serif);
  font-style: italic;
  color: var(--sc-text);
  border-left: 3px solid var(--sc-accent);
}
body .entry-meta,
body .entry-meta a,
body .ast-breadcrumbs {
  font-family: var(--sc-font-sans);
  font-size: 0.8rem;
  color: var(--sc-muted);
}

/* ---------- 10. FOOTER ---------- */
body .site-footer,
body .site-below-footer-wrap,
body .site-primary-footer-wrap {
  background-color: var(--sc-footer-bg);
  color: var(--sc-muted);
  font-family: var(--sc-font-sans);
  border-top: 1px solid var(--sc-border);
}
body .site-footer a { color: var(--sc-text); }
body .site-footer a:hover { color: var(--sc-accent); }