/*
Theme Name: Astralis Nova
Theme URI: https://example.com/astralis-nova
Author: ChatGPT
Author URI: https://openai.com
Description: Tema WordPress inspirado en astrología/esoterismo con fondo animado de cielo nocturno, bordes redondeados, sombras suaves y área de personalización completa.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astralis-nova
Tags: blog, custom-colors, custom-logo, custom-menu, one-column, two-columns, rtl-language-support
*/

/* Reset mínimo y variables */
:root {
  --color-bg-start: #0a0631;     /* azul violeta oscuro */
  --color-bg-end:   #1a0f4d;     /* púrpura profundo */
  --color-primary:  #b56cff;     /* lila brillante */
  --color-accent:   #ff3dbd;     /* fucsia néon */
  --color-accent-2: #22d3ee;     /* azul eléctrico */
  --color-card:     rgba(255,255,255,0.06);
  --color-border:   rgba(255,255,255,0.12);
  --color-text:     #ffffff;     /* texto principal */
  --color-text-2:   #fff18a;     /* amarillo huevo */
  --radius-xl: 22px;
  --radius-lg: 16px;
  --shadow-elev: 0 12px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  --shadow-soft: 0 8px 20px rgba(0,0,0,.25);
  --container: 1200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--color-text);
  background: radial-gradient(1200px 800px at 70% -10%, rgba(255,255,255,0.07), transparent 40%),
              linear-gradient(180deg, var(--color-bg-start), var(--color-bg-end));
  min-height: 100vh;
  overflow-x: hidden;
}

/* Canvas del cielo */
#astralis-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
}

/* Layouts */
.container {
  width: min(100%, var(--container));
  margin: 0 auto;
  padding: 24px;
}

.header {
  position: sticky;
  top: 0;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(10,6,49,.9), rgba(26,15,77,.7));
  border-bottom: 1px solid var(--color-border);
  z-index: 20;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}

.brand a, .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .6px;
}

.menu { display: flex; gap: 14px; flex-wrap: wrap; }
.menu a {
  color: var(--color-text);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.menu a:hover, .menu .current-menu-item > a {
  border-color: var(--color-border);
  background: rgba(255,255,255,.06);
}

/* Botón primario */
.btn {
  display: inline-block;
  padding: 14px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #0a0631;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--shadow-elev);
  border: none;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }

/* Hero */
.hero {
  padding: 44px 0 8px;
  display: grid;
  gap: 26px;
  align-items: center;
}
.hero .title {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: .6px;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.hero p.lead {
  font-size: clamp(16px, 2.4vw, 20px);
  color: var(--color-text-2);
  opacity: .95;
}
.hero .actions { display:flex; gap:14px; flex-wrap: wrap; }

/* Tarjetas */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 22px 0 6px;
}
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}
.card h3 { margin-top: 4px; margin-bottom: 10px; }
.card p { opacity: .9; }
.card .btn { margin-top: 10px; }

/* Bloque de posts recientes */
.posts {
  margin-top: 20px;
}
.post-item {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 18px;
  display: grid;
  gap: 8px;
}
.post-item + .post-item { margin-top: 12px; }
.post-item a { color: var(--color-text-2); text-decoration: none; }
.post-item a:hover { text-decoration: underline; }

/* Footer */
.footer {
  margin-top: 36px;
  background: rgba(0,0,0,.25);
  border-top: 1px solid var(--color-border);
  padding: 28px 0;
}

/* Gutenberg: bordes redondeados y sombras a bloques principales */
.wp-block-group, .wp-block-cover, .wp-block-columns, .wp-block-image, .wp-block-quote {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

/* Formularios / inputs */
input, select, textarea {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 12px;
  padding: 12px;
}


/* === Texto con degradado (controlado por variables) === */
:root{
  --text-grad-enabled: 0; /* 1 o 0 */
  --text-grad-angle: 90deg;
  --text-grad-from: #fff18a; /* amarillo huevo */
  --text-grad-to:   #22d3ee; /* azul eléctrico */
  --title-grad-enabled: 0;
}
.text-gradient, .has-text-gradient {
  background-image: linear-gradient(var(--text-grad-angle), var(--text-grad-from), var(--text-grad-to));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* Aplicación condicional para títulos */
.site-title, h1, h2, h3 {
  background-image: linear-gradient(var(--text-grad-angle), var(--text-grad-from), var(--text-grad-to));
  -webkit-background-clip: text;
          background-clip: text;
  color: var(--color-text);
}
/* Activar según flags */
:root[style*="--text-grad-enabled:1"] h1,
:root[style*="--text-grad-enabled:1"] h2,
:root[style*="--text-grad-enabled:1"] h3 {
  color: transparent;
}
:root[style*="--title-grad-enabled:1"] .site-title a,
:root[style*="--title-grad-enabled:1"] .brand a {
  color: transparent !important;
}
/* Fin degradado */

/* Presets utilitarios de degradado */
.grad-luna     { background-image: linear-gradient(90deg, #fff18a, #22d3ee); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-amanecer { background-image: linear-gradient(45deg, #ff3dbd, #ff8a00); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-nebula   { background-image: linear-gradient(120deg,#b56cff,#22d3ee); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-oraculo  { background-image: linear-gradient(90deg, #fff18a, #ff3dbd); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-cosmos   { background-image: linear-gradient(60deg, #22d3ee, #6d28d9); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* === Halo (resplandor) y Stroke (contorno) === */
:root{
  --halo-enabled: 0;         /* 0/1 */
  --halo-color: #1fb6ff;
  --halo-blur: 10px;         /* e.g. 0px desactiva el efecto */
  --stroke-enabled: 0;       /* 0/1 */
  --stroke-color: #ffffff;
  --stroke-width: 0px;       /* 0px desactiva */
  --effects-scope: headings; /* headings | all */
}

/* HEADINGS scope */
:root[style*="--effects-scope: headings"] .site-title,
:root[style*="--effects-scope: headings"] h1,
:root[style*="--effects-scope: headings"] h2,
:root[style*="--effects-scope: headings"] h3,
:root[style*="--effects-scope: headings"] h4,
:root[style*="--effects-scope: headings"] h5,
:root[style*="--effects-scope: headings"] h6 {
  text-shadow: 0 0 var(--halo-blur) var(--halo-color), 0 0 calc(var(--halo-blur) * 1.8) var(--halo-color);
  -webkit-text-stroke: var(--stroke-width) var(--stroke-color);
  text-stroke: var(--stroke-width) var(--stroke-color);
}

/* ALL scope (aplica a elementos de texto comunes) */
body.astralis-effect-all,
body.astralis-effect-all p,
body.astralis-effect-all li,
body.astralis-effect-all a,
body.astralis-effect-all span,
body.astralis-effect-all blockquote,
body.astralis-effect-all small,
body.astralis-effect-all strong,
body.astralis-effect-all em,
body.astralis-effect-all h1,
body.astralis-effect-all h2,
body.astralis-effect-all h3,
body.astralis-effect-all h4,
body.astralis-effect-all h5,
body.astralis-effect-all h6 {
  text-shadow: 0 0 var(--halo-blur) var(--halo-color), 0 0 calc(var(--halo-blur) * 1.8) var(--halo-color);
  -webkit-text-stroke: var(--stroke-width) var(--stroke-color);
  text-stroke: var(--stroke-width) var(--stroke-color);
}

/* Presets de halo utilitarios */
.halo-luna   { text-shadow: 0 0 10px #22d3ee, 0 0 18px #22d3ee; }
.halo-astral { text-shadow: 0 0 10px #ff3dbd, 0 0 18px #ff3dbd; }
.halo-solar  { text-shadow: 0 0 10px #ffd166, 0 0 18px #ffd166; }

.stroke-blanco { -webkit-text-stroke: 1px #ffffff; text-stroke: 1px #ffffff; }
.stroke-dorado { -webkit-text-stroke: 1px #f5c542; text-stroke: 1px #f5c542; }
/* === Fin halo/stroke === */


/* === TEXTO CON DEGRADADO + HALO (para todos los encabezados) === */

/* Variables controladas por el personalizador del tema */
:root {
  --grad-angle: 90deg;
  --grad-start: #FFE66D;      /* Amarillo huevo */
  --grad-end:   #39C9FF;      /* Azul eléctrico */
  --halo-color: rgba(181,108,255,.55); /* Fucsia/lila */
  --halo-blur: 16px;
  --stroke-color: rgba(255,255,255,.35);
  --stroke-size: 1px;
}

/* Aplica a TODOS los encabezados, títulos del sitio y títulos enlazados */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .site-title,
.wp-block-heading, .wp-block-site-title,
.wp-block-post-title, .wp-block-post-title a,
.site-branding .site-title a {
  background: linear-gradient(var(--grad-angle), var(--grad-start), var(--grad-end)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block;
  font-weight: 800;
  text-shadow: 0 0 var(--halo-blur) var(--halo-color);
  -webkit-text-stroke: var(--stroke-size) var(--stroke-color);
}

/* Evita que los temas sobrescriban el color de los títulos con enlaces */
.entry-title a, .page-title a, .site-title a,
.wp-block-post-title a, .wp-block-site-title a {
  color: transparent !important;
  text-decoration: none;
}

/* Ajustes visuales */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  margin-top: 0.6em;
  margin-bottom: 0.4em;
}