/*
Theme Name: SIVA Blog
Theme URI: https://sivasiva.io/blog
Author: Si Va Digital S.A.S. (SIVA)
Description: Tema del blog de SIVA. Reutiliza el header y el footer reales del
  sitio principal (../../header.php y ../../footer.php) para ser 100% idéntico y
  mantenerse en sincronía. Sin sidebar; submenú propio para navegar el blog; las
  entradas heredan los estilos de "página de contenido" del sitio.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: siva-blog
*/

/* ──────────────────────────────────────────────────────────────────────────
   El grueso del estilo (Tailwind CDN, tokens de tema claro/oscuro, tipografía
   de .content-page, etc.) llega desde el <style> del header REAL del sitio.
   Aquí van solo los ajustes propios del blog, usando esos mismos tokens.
   ────────────────────────────────────────────────────────────────────────── */

/* La nav del sitio va en flujo normal (no es fija), así que el contenido del
   blog fluye justo debajo sin compensar altura. El respiro antes de la tarjeta
   lo aporta .content-page (padding 3rem), igual que en las páginas legales. */
.blog-shell {
  padding-top: 0;
}
/* La .content-page del sitio añade su propio margin-top de 80px; dentro del
   blog ya lo resolvió .blog-shell, así que lo anulamos para no duplicar. */
.blog-shell .content-page {
  margin-top: 0;
}
.blog-shell .content-page > .container {
  max-width: 60rem;
}

/* ── Submenú del blog ─────────────────────────────────────────────────────── */
.siva-blog-subnav {
  background: var(--theme-surface-strong);
  border-bottom: 1px solid var(--theme-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.siva-blog-subnav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  flex-wrap: wrap;
}
.siva-blog-subnav__brand {
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--theme-body-text);
  text-decoration: none;
}
.siva-blog-subnav__brand:hover {
  color: #00b4cc;
}
.siva-blog-subnav__links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  margin-left: auto;
}
.siva-blog-subnav__links ul {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.siva-blog-subnav a {
  color: var(--theme-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.siva-blog-subnav a:hover,
.siva-blog-subnav li.current-cat > a {
  color: #00b4cc;
}
.siva-blog-subnav__back {
  font-weight: 600;
}

/* ── Listado de entradas ──────────────────────────────────────────────────── */
.blog-list {
  display: grid;
  gap: 1.5rem;
}
.blog-card {
  display: block;
  text-decoration: none;
}
.blog-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #00b4cc; /* h1 / título: azul SIVA oscuro */
}
.blog-card a.blog-card__title:hover {
  color: #264e95; /* azul royal del logo al pasar el cursor */
}
.blog-meta {
  font-size: 0.85rem;
  color: var(--theme-muted);
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.blog-thumb {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.blog-thumb img {
  display: block;
  width: 100%;
  height: auto;
}
.blog-readmore {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
  color: #00b4cc;
  text-decoration: none;
}
.blog-readmore:hover {
  text-decoration: underline;
}

/* Paginación */
.blog-pagination {
  margin-top: 2.5rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.blog-pagination .page-numbers {
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--theme-border);
  color: var(--theme-body-text);
  text-decoration: none;
  transition: all 0.2s ease;
}
.blog-pagination .page-numbers.current {
  background: #00b4cc;
  color: #0a192f;
  border-color: #00b4cc;
}
.blog-pagination a.page-numbers:hover {
  border-color: #00b4cc;
  color: #00b4cc;
}

/* La entrada individual reutiliza .content-page (tipografía del sitio) para
   h2/h3/p/li; solo ajustamos la imagen destacada y el título principal. */
.blog-single__title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #00b4cc; /* azul SIVA (teal oscuro de marca) */
}
.blog-single .blog-thumb {
  margin: 1.5rem 0;
}

/* ── Colores de marca en las entradas del blog (scoped al blog) ─────────────
   h1 (título) → azul SIVA oscuro (#00b4cc, en .blog-single__title / card).
   h2 (subtítulos) → azul SIVA claro. Texto del cuerpo → negro real.
   Se anteponen a los estilos de .content-page del sitio con mayor especificidad,
   sin afectar las páginas legales del sitio principal. */
.blog-shell .content-page h2 {
  color: #264e95; /* h2: azul royal del logo SIVA */
}
.blog-shell .content-page p,
.blog-shell .content-page li,
.blog-shell .blog-excerpt {
  color: #000; /* texto de las entradas: negro de verdad */
}

/* Hoja de lectura del blog: SIEMPRE clara (blanca), en cualquier tema, para
   que el texto negro y los títulos se lean bien también en modo oscuro. El
   resto del chrome (header, submenú, footer) sí sigue el tema claro/oscuro. */
.blog-shell .content-page .content-card {
  background: #ffffff;
  border-color: rgba(15, 39, 64, 0.12);
  box-shadow: 0 8px 30px rgba(15, 39, 64, 0.08);
}
.blog-shell .blog-meta {
  color: #527083; /* meta (fecha/categoría) legible sobre blanco */
}

/* ── Contenedor de metadatos de la entrada (arriba a la derecha) ──────────── */
.post-meta-box {
  float: right;
  width: 15rem;
  max-width: 45%;
  margin: 0.25rem 0 1.25rem 1.75rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(15, 39, 64, 0.14);
  border-radius: 12px;
  background: #f6fafb;
  font-size: 0.85rem;
}
.post-meta-box__row {
  margin-bottom: 0.85rem;
}
.post-meta-box__row:last-child {
  margin-bottom: 0;
}
.post-meta-box__label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  font-weight: 700;
  color: #00b4cc; /* azul SIVA oscuro */
  margin-bottom: 0.2rem;
}
.post-meta-box__value,
.post-meta-box__value a {
  color: #0f2740; /* texto oscuro sobre la caja clara */
  text-decoration: none;
  line-height: 1.5;
}
.post-meta-box__value a:hover {
  color: #00b4cc;
  text-decoration: underline;
}
/* El artículo contiene el flotado para que no se desborde de la tarjeta. */
.blog-single::after {
  content: "";
  display: block;
  clear: both;
}
@media (max-width: 640px) {
  .post-meta-box {
    float: none;
    width: auto;
    max-width: none;
    margin: 0 0 1.5rem;
  }
}