/*
Theme Name: GDA Kadence Child
Description: Tema hijo de Kadence con el rediseño de gamedesignanalysis.com (oscuro minimal, acento violeta, toggle claro/oscuro).
Template: kadence
Version: 1.0.0
Author: Eduard Corral
*/

/* ==========================================================
   1. Tokens de diseño (variables)
   Oscuro por defecto; body.gda-light activa el tema claro.
   ========================================================== */
:root, body {
  --gda-bg: #0f0e14;
  --gda-surface: #17151f;
  --gda-surface2: #1e1b29;
  --gda-border: rgba(235, 232, 245, 0.09);
  --gda-text: #edeaf4;
  --gda-muted: #9a94ab;
  --gda-accent: #a583ff;
  --gda-accent-strong: #c29dff;
  --gda-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --gda-font-display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gda-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gda-font-mono: ui-monospace, Menlo, Consolas, monospace;
}
body.gda-light {
  --gda-bg: #faf9fc;
  --gda-surface: #ffffff;
  --gda-surface2: #f2f0f7;
  --gda-border: rgba(27, 22, 43, 0.1);
  --gda-text: #201b2e;
  --gda-muted: #6d6680;
  --gda-accent: #6d3fd4;
  --gda-accent-strong: #5a2fc0;
  --gda-shadow: 0 10px 28px rgba(40, 25, 90, 0.08);
}

/* ==========================================================
   2. Base
   ========================================================== */
body {
  background: var(--gda-bg) !important;
  color: var(--gda-text);
  font-family: var(--gda-font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
  font-family: var(--gda-font-display);
  color: var(--gda-text);
  letter-spacing: -0.02em;
}
p, li { color: var(--gda-muted); }
strong, b { color: var(--gda-text); }
a { color: var(--gda-accent); text-decoration: none; }
a:hover { color: var(--gda-accent-strong); }
::selection { background: var(--gda-accent); color: #0f0e14; }

/* Contenedores de Kadence */
.site, .content-area, .site-content, .content-bg,
.content-container, .site-main {
  background: var(--gda-bg) !important;
}

/* ==========================================================
   3. Cabecera
   ========================================================== */
#masthead, .site-header, .site-header-wrap,
.site-header-inner-wrap, .site-main-header-wrap,
.site-header-row, .site-header-inner-inner-wrap {
  background: transparent !important;
}
#masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--gda-bg) 82%, transparent) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gda-border);
}
.site-branding .site-title {
  font-size: 19px;
  font-weight: 700;
}
.main-navigation .primary-menu-container > ul > li > a {
  color: var(--gda-muted);
  font-size: 14.5px;
  padding: 7px 13px;
  border-radius: 7px;
  transition: color .15s, background .15s;
}
.main-navigation .primary-menu-container > ul > li > a:hover,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a {
  color: var(--gda-text);
  background: var(--gda-surface2);
}
.main-navigation .primary-menu-container > ul > li.current-menu-item > a {
  font-weight: 600;
}

/* ==========================================================
   4. Listado del blog (loop)
   ========================================================== */
.loop-entry, article.entry {
  background: var(--gda-surface) !important;
  border: 1px solid var(--gda-border) !important;
  border-radius: 14px;
  box-shadow: var(--gda-shadow);
  overflow: hidden;
  transition: border-color .15s;
}
.loop-entry:hover { border-color: var(--gda-accent) !important; }
.loop-entry .entry-title { font-size: 22px; line-height: 1.25; }
.loop-entry .entry-title a { color: var(--gda-text); }
.loop-entry .entry-title a:hover { color: var(--gda-accent); }
.entry-taxonomies, .entry-taxonomies a, .entry-meta {
  font-family: var(--gda-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.entry-taxonomies a { color: var(--gda-accent); }
.entry-meta, .entry-meta a { color: var(--gda-muted); }
.entry-summary p { font-size: 14.5px; line-height: 1.6; }

/* Botón "Leer más" como enlace acento */
.entry .button, .kb-button, button[type="submit"], input[type="submit"] {
  background: var(--gda-accent) !important;
  color: #14101f !important;
  border: none !important;
  border-radius: 9px !important;
  font-family: var(--gda-font-display);
  font-weight: 600;
}
button[type="submit"]:hover, input[type="submit"]:hover {
  background: var(--gda-accent-strong) !important;
}

/* ==========================================================
   5. Entrada individual
   ========================================================== */
.single .entry-header .entry-title {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12;
  text-wrap: balance;
}
.single .entry-content {
  font-size: 17px;
  line-height: 1.75;
}
.single .entry-content h2,
.single .entry-content h3 {
  font-size: 26px;
  margin-top: 2.2em;
  line-height: 1.25;
}
.single .entry-content blockquote {
  border-left: 3px solid var(--gda-accent);
  background: transparent;
  font-family: var(--gda-font-display);
  font-size: 20px;
  color: var(--gda-text);
}
.post-thumbnail img, .entry-content img {
  border-radius: 16px;
  box-shadow: var(--gda-shadow);
}
.tags-links a, .entry-tags a {
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--gda-border);
  border-radius: 99px;
  color: var(--gda-muted);
  background: transparent;
}
.tags-links a:hover, .entry-tags a:hover {
  color: var(--gda-text);
  border-color: var(--gda-accent);
}

/* Formularios (comentarios y contacto) */
input[type="text"], input[type="email"], input[type="url"], textarea {
  background: var(--gda-surface) !important;
  border: 1px solid var(--gda-border) !important;
  border-radius: 9px !important;
  color: var(--gda-text) !important;
}
input:focus, textarea:focus { border-color: var(--gda-accent) !important; outline: none; }

/* ==========================================================
   6. Pie
   ========================================================== */
#colophon, .site-footer, .site-footer-wrap {
  background: var(--gda-bg) !important;
  border-top: 1px solid var(--gda-border);
  color: var(--gda-muted);
}
#colophon a { color: var(--gda-muted); }
#colophon a:hover { color: var(--gda-text); }

/* ==========================================================
   7. Toggle claro/oscuro (botón inyectado por theme-toggle.js)
   ========================================================== */
.gda-theme-toggle {
  border: 1px solid var(--gda-border);
  background: transparent;
  color: var(--gda-muted);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  margin-left: 10px;
}
.gda-theme-toggle:hover { color: var(--gda-text); border-color: var(--gda-muted); }

/* Widget ES/EN del plugin gda-auto-translate: integrarlo en cabecera */
.gda-lang-switcher, #gda-lang-widget {
  position: static !important;
  box-shadow: none !important;
  border: 1px solid var(--gda-border) !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-family: var(--gda-font-display);
  font-size: 12.5px;
  font-weight: 600;
}

/* ==========================================================
   8. Ajustes finos para producción
   ========================================================== */
/* Franja de título de página (entry hero de Kadence) en oscuro */
.entry-hero-container-inner {
  background: var(--gda-bg) !important;
}
.entry-hero .entry-title,
.page-title, .archive-title, .entry-hero h1 { color: var(--gda-text) !important; }
.kadence-breadcrumbs, .kadence-breadcrumbs a { color: var(--gda-muted); }

/* Logo: wordmark de texto en lugar de la imagen */
.site-branding a.brand img.custom-logo { display: none !important; }
.site-branding .site-title {
  color: var(--gda-text) !important;
  font-family: var(--gda-font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Toggle alineado en la sección derecha de la cabecera */
.site-header-section-right .gda-theme-toggle { align-self: center; }

/* Encabezados del contenido siempre claros */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
h1.entry-title { color: var(--gda-text) !important; }

/* v1.0.2 */

/* Wordmark bicolor y alineado a la izquierda (como el diseño) */
.site-title .gda-accent { color: var(--gda-accent); }
.site-branding, .site-branding a.brand { justify-content: flex-start !important; }
.site-header-main-section-left { justify-content: flex-start !important; display: flex; align-items: center; }

/* Leer mas como enlace acento (como el diseño) */
.post-more-link, .post-more-link:visited {
  display: inline-block;
  background: transparent !important;
  color: var(--gda-accent) !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-family: var(--gda-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.post-more-link:hover { color: var(--gda-accent-strong) !important; background: transparent !important; }

/* Selector ES/EN tipo pildora en cabecera */
.gda-lang-switcher {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gda-border);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--gda-font-display);
  font-size: 12.5px;
  font-weight: 600;
  margin-left: 12px;
}
.gda-lang-switcher a { padding: 6px 11px; color: var(--gda-muted) !important; line-height: 1; }
.gda-lang-switcher a:hover { color: var(--gda-text) !important; }
.gda-lang-switcher a.gda-lang-active { background: var(--gda-accent); color: #14101f !important; }
body.gda-light .gda-lang-switcher a.gda-lang-active { color: #ffffff !important; }

/* Item de menu activo legible y selector de idioma centrado */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a .nav-drop-title-wrap,
.main-navigation .current_page_item > a .nav-drop-title-wrap { color: var(--gda-text) !important; }
.site-header-section-right .gda-lang-switcher { align-self: center; }

/* Leer mas en caja normal, no mayusculas */
.entry-footer .post-more-link, .loop-entry .post-more-link, a.post-more-link {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--gda-font-body) !important;
  font-size: 14px !important;
}

/* ==========================================================
   9. Carrusel de portada (PostX Post Slider) + sin titulo Home
   ========================================================== */
.ultp-block-content-inner {
  background: color-mix(in oklab, var(--gda-surface) 94%, transparent) !important;
  backdrop-filter: blur(6px);
  border: 1px solid var(--gda-border);
  border-radius: 14px;
}
.ultp-block-content-inner .ultp-block-title,
.ultp-block-content-inner .ultp-block-title a {
  color: var(--gda-text) !important;
  font-family: var(--gda-font-display);
  letter-spacing: -0.015em;
}
.ultp-block-content-inner .ultp-block-title a:hover { color: var(--gda-accent) !important; }
.ultp-block-content-inner .ultp-block-excerpt,
.ultp-block-content-inner .ultp-block-meta,
.ultp-block-content-inner .ultp-block-meta a,
.ultp-block-content-inner .ultp-block-meta span { color: var(--gda-muted) !important; }
.ultp-block-content-inner .ultp-block-cat a,
.ultp-block-content-inner a[rel="tag"] {
  background: var(--gda-accent) !important;
  color: #14101f !important;
  border-radius: 6px;
}
.ultp-block-slider-wrap { border-radius: 16px; overflow: hidden; box-shadow: var(--gda-shadow); }

/* La portada no muestra el titulo de pagina "Home" */
.home .entry-hero { display: none; }

/* Especificidad extra para pisar el CSS inline de PostX */
html body .ultp-block-items-wrap .ultp-block-item .ultp-block-title,
html body .ultp-block-items-wrap .ultp-block-item .ultp-block-title a {
  color: var(--gda-text) !important;
}
html body .ultp-block-items-wrap .ultp-block-item .ultp-block-title a:hover { color: var(--gda-accent) !important; }
html body .ultp-block-items-wrap .ultp-block-item .ultp-block-excerpt,
html body .ultp-block-items-wrap .ultp-block-item .ultp-block-meta,
html body .ultp-block-items-wrap .ultp-block-item .ultp-block-meta a,
html body .ultp-block-items-wrap .ultp-block-item .ultp-block-meta span {
  color: var(--gda-muted) !important;
}
html body .ultp-block-items-wrap .ultp-block-item .ultp-block-cat a {
  background: var(--gda-accent) !important;
  color: #14101f !important;
}

/* Chips de categoria del carrusel en acento */
html body div[class*="ultp-block-"] .ultp-category-in a,
html body .ultp-block-items-wrap .ultp-category-in a {
  background: var(--gda-accent) !important;
  color: #14101f !important;
  border-radius: 6px;
  font-family: var(--gda-font-display);
  font-weight: 600;
}

/* Tarjeta del carrusel: compacta, abajo-izquierda */
html body .ultp-block-items-wrap .ultp-block-content-inner {
  max-width: 600px;
  padding: 22px 26px !important;
  margin: 0 0 30px 30px;
  text-align: left;
}
html body .ultp-block-items-wrap .ultp-block-item .ultp-block-title {
  font-size: 26px !important;
  line-height: 1.25 !important;
  margin: 0 0 10px !important;
}
html body .ultp-block-items-wrap .ultp-block-item .ultp-block-excerpt {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
html body .ultp-block-items-wrap .ultp-block-item .ultp-block-meta { margin: 0 0 8px !important; }
html body .ultp-block-items-wrap .ultp-category-in a { font-size: 11.5px; padding: 4px 10px; }

/* Aire entre el carrusel y la rejilla de posts */
html body .ultp-block-slider-wrap { margin-bottom: 56px; }