/*
Theme Name: Jorge Borja 1.2.3
Theme URI: https://jorgeborja.com
Author: Jorge Borja
Author URI: https://jorgeborja.com
Description: mi sitio Visita Sitio
Tags: Blog
Version: 1.2.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theme one
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* =========================
   BASE GLOBAL
========================= */

body {
  font-family: "Merriweather", sans-serif !important;
  font-size: 18px;
  /* ⬆ antes 16px */
  line-height: 1.8;
  color: #ffffff;
}

/* =========================
   TÍTULOS – MÁS IMPACTO
========================= */

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Merriweather', Georgia, serif !important;
  line-height: 1.15;
  margin-bottom: 1.2rem;
}

/* HERO */
h1 {
  font-size: clamp(3.2rem, 7vw, 4.8rem) !important;
  letter-spacing: -0.04em;
}

/* SECCIÓN PRINCIPAL */
h2 {
  font-size: clamp(2.6rem, 5vw, 3.6rem) !important;
}

/* SUBSECCIONES */
h3 {
  font-size: clamp(2rem, 4vw, 2.6rem) !important;
}

/* APOYO */
h4 {
  font-size: clamp(1.6rem, 3vw, 2rem) !important;
}

/* MICRO TÍTULOS */
h5 {
  font-size: 1.3rem !important;
  letter-spacing: 0.05em;
}

/* =========================
   TEXTO
========================= */

p,
.text-content {
  font-size: 1.15rem;
  /* ⬆ antes 1rem */
  line-height: 1.9;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Merriweather', Georgia, serif !important;
}


/* =========================
   BOTONES
========================= */

button,
.button {
  font-size: 0.85rem;
  /* ⬆ */
  padding: 1em 1.6em;
  letter-spacing: 0.12em;
}

/* =========================
   lISTA BLOG
========================= */

.wp-block-list {
  font-family: 'Merriweather', Georgia, serif !important;
  max-width: 600px;
  /* controla el ancho */
  margin: 20px auto;
  /* centra el bloque */
  text-align: left;
  /* 👈 clave: texto alineado a la izquierda */
  padding-left: 20px;
  /* espacio para bullets */
}

.wp-block-list li {
  margin-bottom: 10px;
  line-height: 1.6;
  font-size: 16px;
}

/* Personalización del bullet */
.wp-block-list li::marker {
  color: #038C3E;
  font-weight: bold;
}


/*
 * Bloque «Vídeo» de Gutenberg (video con controls): el overlay ::after y el posicionamiento
 * absoluto tapaban el reproductor. :has() evita depender de que video sea hijo directo.
 */
.entry-content .wp-block-video:has(video[controls]),
.wp-block-video:has(video[controls]) {
  cursor: default;
  background: transparent;
  overflow: visible;
}

.entry-content .wp-block-video:has(video[controls])::before,
.entry-content .wp-block-video:has(video[controls])::after,
.wp-block-video:has(video[controls])::before,
.wp-block-video:has(video[controls])::after {
  content: none;
  display: none;
}

.entry-content .wp-block-video:has(video[controls]) video,
.wp-block-video:has(video[controls]) video {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
}

.wp-block-video:has(video[controls]) .custom-play {
  display: none;
}

body {
  /* Hueco bajo menú fijo (evita títulos tapados en favoritos y resto de páginas) */
  margin-top: 6.25rem;
}

.jb-page-top-spacer {
  scroll-margin-top: 6.5rem;
}

/* Tarjetas listas: miniatura circular sin deformar */
.jb-lista-thumb-wrap {
  padding-top: 2px;
}

.jb-lista-thumb,
.jb-lista-thumb--empty {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.jb-lista-thumb--empty {
  background: rgba(255, 255, 255, 0.08);
}

.jb-lista-star-ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.jb-lista-card-footer-stats .glsr-summary-rating {
  font-size: 13px !important;
  line-height: inherit !important;
}

.jb-lista-excerpt__teaser,
.jb-lista-excerpt__full {
  max-height: none;
}

.jb-lista-excerpt__full {
  font-size: 0.95em;
}

.jb-lista-excerpt__toggle {
  display: inline-block;
  color: #7ad4ff !important;
  text-decoration: underline;
  font-weight: 600;
}

.jb-lista-excerpt__toggle:hover {
  color: #b8ecff !important;
}

.min-w-0 {
  min-width: 0;
}

/* Cabecera single lista: imagen circular */
.jb-lista-thumb-single {
  width: 120px;
  height: 120px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/*
 * Listas (single): sticky del sidebar.
 * No usar align-self-start en la columna del aside: si la columna solo mide lo del sidebar,
 * sticky deja de aplicarse en cuanto esa caja corta sale del viewport (parece “roto” en entradas largas).
 */
.jb-listas-single-layout {
  align-items: stretch;
}

.jb-sidebar-listas__sticky {
  position: sticky;
  top: 7rem;
  z-index: 2;
}

@media (max-width: 767.98px) {
  .jb-sidebar-listas__sticky {
    position: static;
    top: auto;
    z-index: auto;
  }

  /* Espacio para la barra fija de favoritos (single listas) */
  body.single-listas_post_type {
    padding-bottom: 4.75rem;
  }
}

/* Barra inferior favoritos: encima del contenido pero bajo modales típicos */
.jb-listas-fav-bar-fixed {
  z-index: 1020;
}

.jb-listas-fav-bar-fixed .col {
  min-width: 0;
}

.jb-listas-fav-bar-fixed .jb-favorite-button .jb-favorite-button__label {
  font-size: 0.78rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
   GRID VÍDEOS — ytube-grid.js
   .ytube (solo YouTube) · .jb-video-grid (YouTube + medios WP). 1 / 2 / 3 columnas.
========================= */

/* .ytube: textarea inicial; .jb-video-grid: data-items JSON ([video_grid]). */
.ytube,
.jb-video-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  /* Evita que las celdas se estiren a la altura de la fila. */
  align-items: start;
  width: 100%;
  margin: 1.5rem 0;
}

@media (min-width: 768px) {
  .ytube,
  .jb-video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .ytube,
  .jb-video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Fuente de datos para el script; no debe verse en pantalla. */
.ytube textarea {
  display: none;
}

/* Celda 16:9 (misma proporción que el iframe de YouTube). */
.ytube-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  border-radius: 10px;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Miniatura, preview vídeo, iframe, reproductor y SVG: rectángulo 16:9. */
.ytube-item img,
.ytube-item iframe,
.ytube-item video,
.ytube-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Rellena el 16:9; si la miniatura de YouTube es 4:3, recorta ligeramente los lados (comportamiento típico de cards de vídeo). */
.ytube-thumbnail {
  object-fit: cover;
  object-position: center;
}

/*
 * style-background.css aplica .entry-content img { height: 260px } (misma especificidad que .ytube-item img
 * pero carga después y ganaba). Esto fuerza altura al 100% del contenedor 16:9.
 */
.entry-content .ytube-item img.ytube-thumbnail {
  height: 100%;
  width: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

/* Si en algún momento el parallax envolvió la miniatura, el wrapper no debe acotar altura. */
.entry-content .ytube-item .parallax-wrapper {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  margin: 0;
}

.entry-content .ytube-item .parallax-wrapper img {
  height: 100%;
  width: 100%;
  max-height: none;
  object-fit: cover;
}

/* Vídeos propios: preview y reproductor a ancho/alto completo de la celda. */
.ytube-wp-preview,
.ytube-wp-embed {
  object-fit: cover;
}

.entry-content .ytube-item video.ytube-wp-preview,
.entry-content .ytube-item video.ytube-wp-embed {
  height: 100%;
  width: 100%;
  max-height: none;
}

/* Icono play centrado (margin:auto + inset:0 en regla compartida), encima de la imagen (z-index). */
.ytube-play {
  width: 60px;
  height: 60px;
  margin: auto;
  z-index: 2;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
  transition: transform 0.3s;
  pointer-events: none;
}

.ytube-item:hover .ytube-play,
.ytube-item:focus .ytube-play {
  transform: scale(1.2);
}

.ytube-item:focus {
  outline: 3px solid #007cba;
  outline-offset: 2px;
}

.ytube-embed {
  border: none;
}