/*
 Theme Name:   GeneratePress LensBlox Child
 Theme URI:    https://lensblox.com
 Description:  Tema hijo de GeneratePress para LensBlox — blog SEO
 Author:       LensBlox
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  generatepress-lensblox-child
*/

/* Las fuentes ya no se cargan aquí con @import (causaba el destello
   blanco al cambiar de página) — ahora se cargan en functions.php
   como <link> propio, en paralelo, sin bloquear el renderizado */


/* ==========================================================
   Paleta de marca (coherente con la landing, adaptada a fondo
   claro para mejor legibilidad de contenido largo de blog)
   ========================================================== */
:root {
  --lb-accent: #1f8a5c;        /* verde de marca, ajustado a contraste sobre blanco */
  --lb-accent-dark: #146641;
  --lb-text: #12151a;
  --lb-text-dim: #5b6470;
  --lb-border: #e4e7eb;
  --lb-bg-code: #f4f6f5;
  --lb-mono: 'JetBrains Mono', 'Courier New', monospace;
}

/* ==========================================================
   Tipografía general del contenido de blog
   ========================================================== */
body {
  color: var(--lb-text);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  color: var(--lb-text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.entry-content p {
  color: var(--lb-text);
  line-height: 1.7;
}

.entry-content a {
  color: var(--lb-accent);
  text-decoration: underline;
  text-decoration-color: var(--lb-border);
  text-underline-offset: 2px;
}

.entry-content a:hover {
  color: var(--lb-accent-dark);
}

/* ==========================================================
   Elementos tipo "dato/código" — para mantener el hilo visual
   con la landing (monospace + verde) cuando citemos métricas,
   nombres de keywords, o snippets dentro de los artículos
   ========================================================== */
.entry-content code,
.entry-content pre {
  font-family: var(--lb-mono);
  background: var(--lb-bg-code);
  border: 1px solid var(--lb-border);
  border-radius: 4px;
  color: var(--lb-accent-dark);
}

.entry-content code {
  padding: 2px 6px;
  font-size: 0.9em;
}

.entry-content pre {
  padding: 16px;
  overflow-x: auto;
}

/* Clase de utilidad para resaltar cifras/datos dentro de un artículo,
   ej: <span class="lb-stat">2.5×</span> */
.lb-stat {
  font-family: var(--lb-mono);
  font-weight: 700;
  color: var(--lb-accent-dark);
  background: rgba(31, 138, 92, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
}

/* ==========================================================
   Botones / CTA dentro de artículos (ej. enlace a la app o a
   la landing de registro) — mismo verde que el botón de la
   landing, para reforzar continuidad de marca
   ========================================================== */
.lb-cta-button {
  display: inline-block;
  background: var(--lb-accent);
  color: #ffffff !important;
  padding: 12px 22px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.15s ease;
}

.lb-cta-button:hover {
  background: var(--lb-accent-dark);
}

/* ==========================================================
   Tablas de comparativa dentro de artículos (útil para el
   contenido de "RoLearn vs RoMonitor vs..." etc.)
   ========================================================== */
.entry-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 24px 0;
}

.entry-content table th {
  background: var(--lb-bg-code);
  font-family: var(--lb-mono);
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--lb-text-dim);
  padding: 10px 14px;
  border: 1px solid var(--lb-border);
  text-align: left;
}

.entry-content table td {
  padding: 10px 14px;
  border: 1px solid var(--lb-border);
}

/* ==========================================================
   Cabecera y navegación — aplicar identidad de marca LensBlox
   a la cabecera nativa de GeneratePress (visible en Blog,
   artículos, y cualquier página que no use la plantilla en
   blanco de la home)
   ========================================================== */
.site-header,
.site-header .inside-header {
  background-color: #0b0d0f !important;
  border-bottom: 1px solid #22262c;
}

.site-header .site-title,
.site-header .site-title a,
.site-header .main-title,
.site-header .main-title a,
.site-branding .site-title,
.site-branding .site-title a,
.site-branding .main-title,
.site-branding .main-title a {
  font-family: var(--lb-mono) !important;
  font-weight: 700 !important;
  color: #e8eaed !important;
  letter-spacing: 0.01em;
  text-shadow: none !important;
  opacity: 1 !important;
  font-size: 22px !important;
}

.site-header .site-title a::before,
.site-branding .main-title a::before {
  content: '● ';
  color: var(--lb-accent);
  font-size: 12px;
  vertical-align: middle;
}

.site-header .site-title a:hover,
.site-header .main-title a:hover,
.site-branding .site-title a:hover,
.site-branding .main-title a:hover {
  color: var(--lb-accent) !important;
}

.site-header .site-description {
  color: var(--lb-text-dim) !important;
}

.main-navigation,
.main-navigation .inside-navigation {
  background-color: #0b0d0f !important;
}

.main-navigation .main-nav ul li a {
  color: #e8eaed !important;
  font-family: 'Inter', sans-serif;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--lb-accent) !important;
}

.site-header svg,
.site-header .menu-toggle {
  color: #e8eaed !important;
  fill: #e8eaed !important;
}

/* ==========================================================
   Pie de página — mismo tratamiento oscuro, coherente con el
   footer que ya usa la landing y la página de blog
   ========================================================== */
.site-footer,
.site-footer .inside-site-info,
footer.site-info {
  background-color: #0b0d0f !important;
  color: var(--lb-text-dim) !important;
  border-top: 1px solid #22262c;
  font-family: var(--lb-mono);
  font-size: 13px;
}

.site-footer a,
footer.site-info a {
  color: var(--lb-accent) !important;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--lb-accent-dark) !important;
}

/* ==========================================================
   Ajustes responsive — piezas añadidas en las últimas rondas
   que no tenían puntos de ruptura móvil todavía
   ========================================================== */
@media (max-width: 640px) {
  /* Cabecera de la home: logo + menú, apilar si no cabe */
  header nav {
    gap: 16px !important;
    font-size: 14px !important;
  }

  /* Cabecera del índice de Blog: título + desplegable de orden */
  .lb-blog-header {
    flex-direction: column;
    align-items: flex-start !important;
  }
}

body.page-template-page-blog-php,
body.page-template-page-blog-php .site-content,
body.page-template-page-blog-php #content,
body.page-template-page-blog-php #primary,
body.page-template-page-blog-php .content-area,
body.page-template-page-blog-php main.site-main,
body.page-template-page-blog-php .inside-article,
body.page-template-page-blog-php .entry-content {
  background-color: #0b0d0f !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.single-post {
  background-color: #ffffff !important;
}

body.single-post .site-content,
body.single-post #content,
body.single-post #primary,
body.single-post .content-area,
body.single-post main.site-main {
  background-color: #ffffff !important;
}





/* ==========================================================
   Artículos — fondo claro por legibilidad, pero con toques
   de marca reales en vez del estilo genérico de GeneratePress
   ========================================================== */

/* Contenedor del artículo: quitar la sensación de "caja" plana */
body.single-post .inside-article {
  background-color: #ffffff;
  border-radius: 0;
  box-shadow: none;
  padding-top: 8px;
}

/* Kicker superior, estilo "eyebrow" como en la landing */
body.single-post .entry-header::before {
  content: '› LENSBLOX / BLOG';
  display: block;
  font-family: var(--lb-mono);
  font-size: 12px;
  color: var(--lb-accent);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

/* Título del artículo (H1) */
body.single-post .entry-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--lb-text) !important;
  font-size: clamp(30px, 4vw, 44px) !important;
  margin-bottom: 18px;
}

/* Fila de meta (fecha / autor) */
body.single-post .entry-meta {
  font-family: var(--lb-mono);
  font-size: 12.5px;
  color: var(--lb-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--lb-border);
}

/* Ocultar el nombre/email del autor en el listado de meta —
   deja solo la fecha visible. Si prefieres mostrar un nombre
   de autor "bonito" en vez de ocultarlo, cambia el display
   name en Usuarios → Tu perfil → "Nombre público a mostrar" */
body.single-post .entry-meta .byline {
  display: none !important;
}

/* Subtítulos H2 dentro del artículo — barra de acento a la
   izquierda, para que se distingan de un vistazo al escanear */
body.single-post .entry-content h2 {
  border-left: 3px solid var(--lb-accent);
  padding-left: 16px;
  margin-top: 44px;
  margin-bottom: 18px;
  font-size: 26px !important;
}

body.single-post .entry-content h3 {
  margin-top: 32px;
  font-size: 20px !important;
}

/* Ancho de línea más cómodo para lectura larga */
body.single-post .entry-content {
  max-width: 720px;
  font-size: 17px;
}

/* Cita/nota final tipo CTA (el párrafo en cursiva al cierre
   de cada artículo, con el enlace a LensBlox) */
body.single-post .entry-content > p:last-child em {
  display: block;
  background: var(--lb-bg-code);
  border-left: 3px solid var(--lb-accent);
  padding: 16px 20px;
  border-radius: 6px;
  font-style: normal;
  color: var(--lb-text);
}




/* ==========================================================
   CTA de email al final de cada artículo
   ========================================================== */
body.single-post .lb-post-cta {
  margin-top: 48px;
  background: #0b0d0f;
  border: 1px solid var(--lb-accent);
  border-radius: 12px;
  padding: 32px 36px;
  color: #e8eaed;
}

body.single-post .lb-post-cta-tag {
  font-family: var(--lb-mono);
  font-size: 12px;
  color: var(--lb-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

body.single-post .lb-post-cta h3 {
  color: #e8eaed !important;
  font-size: 22px !important;
  margin: 0 0 10px 0 !important;
  border-left: none !important;
  padding-left: 0 !important;
}

body.single-post .lb-post-cta p {
  color: #8b929c;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 560px;
}

body.single-post .lb-post-cta-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body.single-post .lb-post-cta-form input[type="email"] {
  background: #12151a;
  border: 1px solid #22262c;
  color: #e8eaed;
  padding: 13px 16px;
  border-radius: 6px;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  min-width: 260px;
  outline: none;
}

body.single-post .lb-post-cta-form input[type="email"]:focus {
  border-color: var(--lb-accent);
}

body.single-post .lb-post-cta-btn {
  background: var(--lb-accent);
  color: #08130d;
  border: none;
  padding: 13px 22px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

body.single-post .lb-post-cta-btn:hover {
  background: var(--lb-accent-dark);
}

body.single-post .lb-post-cta-success {
  font-family: var(--lb-mono);
  font-size: 14px;
  color: var(--lb-accent);
  margin-top: 6px;
}

@media (max-width: 640px) {
  body.single-post .lb-post-cta { padding: 24px; }
  body.single-post .lb-post-cta-form input[type="email"] { min-width: 100%; }
  body.single-post .lb-post-cta-btn { width: 100%; }
}