/*
Theme Name: Kadence VR
Theme URI: https://vanessarojas.com
Description: Tema hijo de Kadence para vanessarojas.com. Da a cada entrada y a cada categoría del blog el diseño nuevo (menú lateral en escritorio, cabecera con botones en móvil). El diseño se edita en Apariencia > Patrones: «VR · Plantilla de entrada de blog».
Author: Vanessa Rojas
Template: kadence
Version: 1.0.0
Text Domain: kadence-vr
*/

/* En móvil y tableta el fondo de la entrada es claro (el menú queda en su recuadro oscuro). */
@media (max-width: 782px) {
	.vr-entry { background-color: var(--global-palette7) !important; }
}

/* La plantilla de entrada ocupa todo el ancho de la pantalla sin generar desplazamiento lateral. */
.vr-entry-page .vr-entry { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* Las listas de entradas (bloque Lista de entradas) no llevan el margen de lista del tema: alinean con el resto de la página. */
.wp-block-post-template { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; }
.wp-block-post-template > li { margin-left: 0; }

/* Entradas: las imágenes dentro del texto ocupan el mismo ancho que el texto y la foto principal. */
.vr-entry .wp-block-post-content .wp-block-image { width: 100%; }
.vr-entry .wp-block-post-content .wp-block-image .aligncenter { display: block; width: 100%; margin-left: 0; margin-right: 0; }
.vr-entry .wp-block-post-content .wp-block-image img { width: 100%; height: auto; }

/* Tarjetas de una misma fila con el mismo alto. */
.wp-block-post-template.is-layout-grid > li > .wp-block-group { height: 100%; }

/* Listado del blog: en móvil la miniatura queda junto al texto, con menos espacio entre columnas. */
@media (max-width: 782px) {
	.vr-row { gap: 14px !important; flex-wrap: nowrap !important; }
	.vr-row > .wp-block-column { min-width: 0; }
	.vr-row > .wp-block-column:first-child { flex-basis: 28% !important; }
	.vr-row > .wp-block-column:last-child { flex-basis: 72% !important; }
	.vr-row .wp-block-post-title { font-size: 1.02rem !important; }
	.vr-row .wp-block-post-excerpt__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.86rem; }
}

/* Títulos de entradas en el color oscuro del diseño (el tema los pinta con el color de enlace). */
.wp-block-post-title a { color: var(--global-palette3); }
.wp-block-post-title a:hover { color: var(--global-palette1); }

/* Inicio: en móvil y tableta los dos botones bajo la foto del primer recuadro quedan centrados. */
@media (max-width: 782px) {
	.vr-apertura-botones { justify-content: center; }
}

/* ==========================================================================
   Movimiento sutil (guía la atención hacia: quién soy → qué hago → escribirme).
   Todo queda desactivado si la persona pidió menos movimiento en su dispositivo.
   ========================================================================== */

/* Frase clave de la apertura: subrayado que se dibuja. */
h1 mark.has-inline-color {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 96%;
	background-size: 100% 3px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-bottom: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }

	@keyframes vr-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
	@keyframes vr-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
	@keyframes vr-underline { to { background-size: 100% 3px; } }
	@keyframes vr-pulse {
		0% { box-shadow: 0 0 0 0 rgba(247, 138, 12, 0.6); }
		70% { box-shadow: 0 0 0 14px rgba(247, 138, 12, 0); }
		100% { box-shadow: 0 0 0 0 rgba(247, 138, 12, 0); }
	}

	/* 1) Apertura de cada página: entra en el orden en que se lee. */
	.wp-block-group.has-theme-palette-1-background-color:has(h1) p.has-theme-palette-2-color { animation: vr-rise 0.5s ease-out both; }
	.wp-block-group.has-theme-palette-1-background-color:has(h1) h1 { animation: vr-rise 0.6s ease-out 0.12s both; }
	.wp-block-group.has-theme-palette-1-background-color:has(h1) p:not(.has-theme-palette-2-color) { animation: vr-rise 0.6s ease-out 0.26s both; }
	.wp-block-group.has-theme-palette-1-background-color:has(h1) .wp-block-image { animation: vr-pop 0.6s ease-out 0.3s both; }
	.wp-block-group.has-theme-palette-1-background-color:has(h1) .wp-block-buttons { animation: vr-rise 0.6s ease-out 0.42s both; }
	h1 mark.has-inline-color { background-size: 0 3px; animation: vr-underline 0.8s ease-out 0.9s forwards; }

	/* 2) Tarjetas: aparecen al llegar a ellas (el script marca cuáles; sin script se ven normales). */
	html.vr-js .wp-block-group.has-border-color.has-theme-palette-8-background-color:not(li > *),
	html.vr-js .wp-block-post-template > li {
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
	html.vr-js .wp-block-group.has-border-color.has-theme-palette-8-background-color:not(li > *):not(.vr-in),
	html.vr-js .wp-block-post-template > li:not(.vr-in) {
		opacity: 0;
		transform: translateY(18px);
	}

	/* 3) Botones de contacto: pulso suave, 3 veces, cuando se ven. */
	a.wp-block-button__link.vr-pulse { animation: vr-pulse 1.6s ease-out 0.8s 3; }

	/* 4) Botones: reaccionan al pasar el cursor. */
	.wp-block-button__link { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
	.wp-block-button__link:hover { transform: translateY(-2px); }
}