/*
	Theme Name:   Jannah Child
	Theme URI:    http://jannah.tielabs.com/
	Description:  Jannh Child Theme
	Author:       TieLabs
	Author URI:   https://tielabs.com
	Template:     jannah
	Version:      1.0.2
	License:      license purchased
	License URI:  http://themeforest.net/licenses/regular_extended
	Tags:         Tags: two-columns, buddypress, left-sidebar, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, microformats, rtl-language-support, sticky-post, threaded-comments, translation-ready
	Text Domain:  jannah-child
*/


/* write custom css after this line */

/* =========================================================================
   FIX: Botones visibles en modo CLARO (tema claro)
   -------------------------------------------------------------------------
   La variable --tie-buttons-color está configurada con un color claro/blanco,
   y como el texto del botón también es blanco, el botón se vuelve invisible
   sobre el fondo claro del widget en el tema CLARO.
   Solución: en modo claro (body SIN .dark-skin) NO usamos esa variable;
   forzamos un color de fondo sólido directo + texto blanco contrastante.
   Cambia el valor de --cs-boton-* si quieres otro color de marca.
   ========================================================================= */
body:not(.dark-skin) {
	--cs-boton-bg: #e23b5a;        /* magenta/rosa de la marca "Cabe Señalar" */
	--cs-boton-bg-hover: #c22e49;  /* tono más oscuro al pasar el mouse */
	--cs-boton-texto: #ffffff;     /* color del texto */
}

body:not(.dark-skin) .button,
body:not(.dark-skin) [type="submit"],
body:not(.dark-skin) button[type="submit"],
body:not(.dark-skin) input[type="submit"],
body:not(.dark-skin) .generic-button a,
body:not(.dark-skin) .generic-button button,
body:not(.dark-skin) .subscribe-widget .button,
body:not(.dark-skin) .subscribe-widget [type="submit"] {
	background-color: var(--cs-boton-bg) !important;
	background-image: none !important;        /* anula gradientes (--tie-preset-gradient-*) */
	color: var(--cs-boton-texto) !important;
	border: 1px solid var(--cs-boton-bg) !important;
	text-shadow: none !important;
	opacity: 1 !important;
}

body:not(.dark-skin) .button:hover,
body:not(.dark-skin) [type="submit"]:hover,
body:not(.dark-skin) button[type="submit"]:hover,
body:not(.dark-skin) input[type="submit"]:hover,
body:not(.dark-skin) .generic-button a:hover,
body:not(.dark-skin) .generic-button button:hover,
body:not(.dark-skin) .subscribe-widget .button:hover,
body:not(.dark-skin) .subscribe-widget [type="submit"]:hover {
	background-color: var(--cs-boton-bg-hover) !important;
	background-image: none !important;
	color: var(--cs-boton-texto) !important;
	border-color: var(--cs-boton-bg-hover) !important;
}

/* =========================================================================
   VISTA DE AUTOR: notas del autor en grilla de 3 columnas tipo "cards"
   -------------------------------------------------------------------------
   Solo aplica en la página de archivo de autor (body.author). Convierte la
   lista vertical (.posts-items) que genera Jannah en un grid responsive de
   tarjetas: 3 columnas en escritorio, 2 en tablet y 1 en móvil.
   Es CSS puro: no se tocan las plantillas PHP del tema padre.
   ========================================================================= */

/* La lista de posts pasa a ser un grid de 3 columnas */
body.author .posts-items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cada nota se convierte en una tarjeta vertical */
body.author .posts-items > li.post-item {
	display: flex;
	flex-direction: column;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Elimina los separadores/bordes que trae el layout de lista original */
body.author .posts-items > li.post-item::before,
body.author .posts-items > li.post-item::after {
	display: none !important;
}

body.author .posts-items > li.post-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

/* Miniatura a todo el ancho, arriba de la tarjeta */
body.author .posts-items > li.post-item .post-thumb {
	float: none !important;
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

body.author .posts-items > li.post-item .post-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Contenido de la tarjeta */
body.author .posts-items > li.post-item .post-details {
	width: auto !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px 18px 20px;
}

body.author .posts-items > li.post-item .post-title {
	font-size: 18px;
	line-height: 1.35;
	margin: 6px 0 10px;
}

body.author .posts-items > li.post-item .post-excerpt {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 12px;
}

/* Empuja el botón "leer más" al fondo de la tarjeta para alinear alturas */
body.author .posts-items > li.post-item .post-details .read-more,
body.author .posts-items > li.post-item .post-details .more-link {
	margin-top: auto;
	align-self: flex-start;
}

/* Modo oscuro: tarjetas con fondo/borde acorde al skin oscuro */
body.author.dark-skin .posts-items > li.post-item {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

body.author.dark-skin .posts-items > li.post-item:hover {
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}

/* ---------- Responsive ---------- */
/* Tablet: 2 columnas */
@media (max-width: 991px) {
	body.author .posts-items {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

/* Móvil: 1 columna */
@media (max-width: 600px) {
	body.author .posts-items {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}