/* ==========================================================================
   Entrada individual + barra lateral — Live Consulting
   --------------------------------------------------------------------------
   POR QUE EXISTE ESTA HOJA

   La paleta del Customizer tiene los roles cruzados respecto a lo que asume
   el CSS del tema:

     --OZ-Color-2: #7dd230  (verde de marca)  -> el tema lo usa como COLOR DE
                                                 TEXTO del cuerpo del articulo
     --OZ-Color-3: #f6f9f5  (casi blanco)     -> el tema lo usa como COLOR DE
                                                 ENLACE (a { color: ... })

   Resultado: el articulo entero salia verde y los enlaces de la barra lateral
   eran blancos sobre blanco (invisibles). No se tocan esos tokens porque los
   comparten las paginas hechas con el maquetador; en su lugar, estas
   plantillas declaran sus propios colores semanticos.

   CONTRASTE: #7dd230 sobre blanco da ~1.9:1, muy lejos del 4.5:1 que pide
   WCAG AA para texto. Por eso el verde de marca queda como acento decorativo
   (filetes, viñetas, subrayados) y el texto enlazado usa --lc-link (~5.3:1).

   Se encola solo en is_singular('post') desde functions.php.
   ========================================================================== */

.single-post,
.single-sidebar,
.oz-related {
	--lc-ink: #0e2620;        /* titulares — igual que --OZ-Color-1 */
	--lc-body: #2b3a33;       /* cuerpo de texto */
	--lc-muted: #5c6b63;      /* metadatos, fechas, autor */
	--lc-link: #3f7d1f;       /* verde legible para texto enlazado */
	--lc-green: #7dd230;      /* verde de marca — solo decorativo */
	--lc-rule: #e3e9e0;       /* filetes y bordes */
	--lc-surface: #f6f9f5;    /* fondos suaves */
}

/* ==========================================================================
   0. Aire al final
   --------------------------------------------------------------------------
   El contenido terminaba pegado al pie: el ultimo parrafo quedaba a ras del
   borde verde y se leia como si formara parte del footer. Este colchon es el
   que ocupa el bloque de articulos relacionados.
   ========================================================================== */

.site-main--single {
	padding-bottom: 70px;
}

/* ==========================================================================
   1. Imagen destacada
   ========================================================================== */

.single-post__figure {
	margin: 0 0 2.5rem;
}

.single-post__thumbnail {
	border-radius: 14px;
	overflow: hidden;
}

.single-post__caption {
	margin-top: 0.75rem;
	color: var(--lc-muted);
	font-size: 0.85rem;
	text-align: center;
}

/* ==========================================================================
   2. Cabecera del articulo
   ========================================================================== */

/* Medida de lectura: ~72 caracteres. Una linea mas larga obliga al ojo a
   buscar el inicio de la siguiente y cansa. */
.single-post__body {
	max-width: 72ch;
	margin-inline: auto;
}

.single-post__header {
	margin-bottom: 2rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--lc-rule);
}

.single-post__eyebrow {
	margin: 0 0 0.85rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lc-link);
}

.single-post__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.single-post__eyebrow a:hover {
	text-decoration: underline;
}

.single-post .single-post__title.entry-title {
	margin: 0 0 1.1rem;
	color: var(--lc-ink);
	font-size: clamp(1.9rem, 4.2vw, 2.75rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.single-post .single-post__byline {
	margin: 0;
	color: var(--lc-muted);
	font-size: 0.92rem;
}

.single-post .single-post__author {
	color: var(--lc-body);
	font-weight: 600;
	text-decoration: none;
}

.single-post .single-post__author:hover {
	color: var(--lc-link);
	text-decoration: underline;
}

.single-post__byline-sep {
	background: var(--lc-green);
}

/* ==========================================================================
   3. Cuerpo del articulo
   ========================================================================== */

/* Aqui estaba el bug principal: el tema pintaba este bloque con
   var(--OZ-Color-2), que es el verde de marca. */
.single-post .single-post__content {
	color: var(--lc-body);
	font-size: 1.09rem;
	line-height: 1.78;
}

.single-post .single-post__content > * + * {
	margin-top: 1.35em;
}

.single-post .single-post__content p {
	margin: 0;
}

.single-post .single-post__content h2,
.single-post .single-post__content h3,
.single-post .single-post__content h4 {
	color: var(--lc-ink);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin-top: 2.4em;
	margin-bottom: 0;
}

.single-post .single-post__content h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); }
.single-post .single-post__content h3 { font-size: clamp(1.2rem, 2.1vw, 1.4rem); }
.single-post .single-post__content h4 { font-size: 1.1rem; }

/* Filete verde corto sobre los H2: separa secciones sin recargar. */
.single-post .single-post__content h2::before {
	content: "";
	display: block;
	width: 42px;
	height: 3px;
	margin-bottom: 0.75rem;
	border-radius: 2px;
	background: var(--lc-green);
}

.single-post .single-post__content a {
	color: var(--lc-link);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color .18s ease, text-decoration-color .18s ease;
}

.single-post .single-post__content a:hover {
	color: var(--lc-ink);
	text-decoration-color: var(--lc-green);
	text-decoration-thickness: 2px;
}

.single-post .single-post__content strong {
	color: var(--lc-ink);
	font-weight: 700;
}

.single-post .single-post__content ul,
.single-post .single-post__content ol {
	margin-left: 0;
	padding-left: 1.35em;
}

.single-post .single-post__content li + li {
	margin-top: 0.5em;
}

.single-post .single-post__content ul li::marker {
	color: var(--lc-green);
}

.single-post .single-post__content ol li::marker {
	color: var(--lc-link);
	font-weight: 700;
}

.single-post .single-post__content blockquote {
	margin-inline: 0;
	padding: 1.35rem 1.6rem;
	background: var(--lc-surface);
	border: 0;
	border-left: 4px solid var(--lc-green);
	border-radius: 0 10px 10px 0;
	color: var(--lc-ink);
	font-size: 1.08em;
	font-style: normal;
}

.single-post .single-post__content blockquote p {
	margin: 0;
}

.single-post .single-post__content blockquote > * + * {
	margin-top: 0.8em;
}

.single-post .single-post__content img,
.single-post .single-post__content .wp-block-image img {
	border-radius: 12px;
}

.single-post .single-post__content figcaption {
	margin-top: 0.6rem;
	color: var(--lc-muted);
	font-size: 0.85rem;
	text-align: center;
}

.single-post .single-post__content hr {
	height: 1px;
	margin-block: 2.5em;
	border: 0;
	background: var(--lc-rule);
}

.single-post .single-post__content code {
	padding: 0.15em 0.4em;
	background: var(--lc-surface);
	border: 1px solid var(--lc-rule);
	border-radius: 4px;
	font-size: 0.9em;
	color: var(--lc-ink);
}

.single-post .single-post__content pre {
	padding: 1.15rem 1.35rem;
	background: var(--lc-ink);
	border-radius: 10px;
	overflow-x: auto;
	color: #e8efe6;
}

.single-post .single-post__content pre code {
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
}

.single-post .single-post__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

.single-post .single-post__content th,
.single-post .single-post__content td {
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--lc-rule);
	text-align: left;
}

.single-post .single-post__content th {
	color: var(--lc-ink);
	font-weight: 700;
	background: var(--lc-surface);
}

/* ==========================================================================
   4. Etiquetas
   ========================================================================== */

.single-post__footer-tags {
	max-width: 72ch;
	margin: 3rem auto 0;
	padding-top: 1.75rem;
	border-top: 1px solid var(--lc-rule);
}

.single-post__tags-label {
	display: block;
	margin-bottom: 0.85rem;
	color: var(--lc-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.single-post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.single-post__tags a {
	display: inline-block;
	padding: 0.4rem 0.9rem;
	background: var(--lc-surface);
	border: 1px solid var(--lc-rule);
	border-radius: 50px;
	color: var(--lc-body);
	font-size: 0.85rem;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.single-post__tags a:hover {
	background: var(--lc-green);
	border-color: var(--lc-green);
	color: var(--lc-ink);
	text-decoration: none;
}

/* ==========================================================================
   5. Entradas relacionadas
   ========================================================================== */

.oz-related {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--lc-rule);
}

.oz-related .oz-related__title {
	margin: 0 0 1.5rem;
	color: var(--lc-ink);
	font-weight: 700;
}

/* El tema fija repeat(4, 1fr): con 2 entradas quedaban dos tarjetas estrechas
   pegadas a la izquierda y medio bloque vacio. Con auto-fit reparten el ancho
   disponible sea cual sea su numero, y el sitio hoy solo tiene 3 entradas. */
.oz-related .oz-related__grid {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.oz-related .oz-related-card__link {
	border-color: var(--lc-rule);
	border-radius: 12px;
}

.oz-related .oz-related-card__title {
	color: var(--lc-ink);
	padding: 0 0.95rem;
	margin-top: 0.95rem;
}

.oz-related .oz-related-card__link:hover .oz-related-card__title {
	color: var(--lc-link);
}

.oz-related .oz-related-card__byline {
	color: var(--lc-muted);
	padding: 0.45rem 0.95rem 1rem;
	opacity: 1;
}

/* ==========================================================================
   6. Barra lateral
   --------------------------------------------------------------------------
   Los enlaces de "Recent Posts" heredaban a { color: var(--OZ-Color-3) },
   que es #f6f9f5: blanco sobre blanco. De ahi que no se vieran.
   ========================================================================== */

.single-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	color: var(--lc-body);
}

.single-sidebar__widget {
	padding: 1.5rem;
	background: #ffffff;
	border: 1px solid var(--lc-rule);
	border-radius: 12px;
}

.single-sidebar__widget .widget-title,
.single-sidebar__widget .wp-block-heading,
.single-sidebar__widget h2,
.single-sidebar__widget h3 {
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--lc-green);
	color: var(--lc-ink);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* --- Enlaces generales de la barra (el arreglo del texto invisible) ------- */
.single-sidebar a {
	color: var(--lc-body);
	text-decoration: none;
	transition: color .18s ease;
}

.single-sidebar a:hover,
.single-sidebar a:focus-visible {
	color: var(--lc-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* --- Listas de entradas / comentarios ------------------------------------- */
.single-sidebar ul,
.single-sidebar ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-sidebar .wp-block-latest-posts__list li,
.single-sidebar .wp-block-latest-comments li,
.single-sidebar .widget_recent_entries li,
.single-sidebar .widget_categories li,
.single-sidebar .widget_archive li {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--lc-rule);
	font-size: 0.94rem;
	line-height: 1.45;
}

.single-sidebar li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.single-sidebar li:first-child {
	padding-top: 0;
}

.single-sidebar .wp-block-latest-posts__post-title {
	display: block;
	color: var(--lc-ink);
	font-weight: 600;
}

.single-sidebar .wp-block-latest-posts__post-title:hover {
	color: var(--lc-link);
}

.single-sidebar .wp-block-latest-posts__post-date {
	display: block;
	margin-top: 0.25rem;
	color: var(--lc-muted);
	font-size: 0.82rem;
}

.single-sidebar .wp-block-latest-comments__comment-meta {
	color: var(--lc-body);
}

.single-sidebar .wp-block-latest-comments__comment-author,
.single-sidebar .wp-block-latest-comments__comment-link {
	color: var(--lc-link);
	font-weight: 600;
}

.single-sidebar .wp-block-latest-comments__comment-date {
	color: var(--lc-muted);
	font-size: 0.82rem;
}

/* --- Buscador -------------------------------------------------------------- */
.single-sidebar .wp-block-search__label {
	display: block;
	margin-bottom: 0.6rem;
	color: var(--lc-ink);
	font-weight: 700;
	font-size: 1.05rem;
}

.single-sidebar .wp-block-search__inside-wrapper {
	display: flex;
	gap: 0.5rem;
}

.single-sidebar .wp-block-search__input {
	flex: 1;
	min-width: 0;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--lc-rule);
	border-radius: 8px;
	background: #ffffff;
	color: var(--lc-body);
	font: inherit;
	font-size: 0.94rem;
}

.single-sidebar .wp-block-search__input:focus {
	outline: 2px solid var(--lc-green);
	outline-offset: 1px;
	border-color: transparent;
}

.single-sidebar .wp-block-search__button {
	flex: none;
	padding: 0.6rem 1.1rem;
	border: 0;
	border-radius: 8px;
	background: var(--lc-green);
	color: var(--lc-ink);
	font: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.single-sidebar .wp-block-search__button:hover {
	background: #6bb926;
	color: #ffffff;
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */

@media (max-width: 991px) {
	.single-sidebar {
		margin-top: 2.5rem;
	}

	/* Aire lateral. Por debajo de 992px el layout es de una sola columna y
	   ningun contenedor aporta inset, asi que el texto llegaba a ras del borde
	   de la pantalla. El padding va en los bloques de texto y NO en
	   .site-main--single, para no meter hacia dentro la imagen destacada, que
	   es a sangre a proposito. */
	.single-post__shell,
	.oz-related,
	.single-sidebar {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* El colchon del final se mantiene por encima de los 50px pedidos. */
	.site-main--single {
		padding-bottom: 70px;
	}
}

@media (max-width: 575px) {
	.single-post .single-post__content {
		font-size: 1.02rem;
	}

	.single-sidebar__widget {
		padding: 1.25rem;
	}

	.single-post__thumbnail {
		border-radius: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.single-post a,
	.single-sidebar a,
	.single-post__tags a {
		transition: none;
	}
}