/*
Theme Name:  Janninaliz
Theme URI:   https://janninaliz.com
Description: Child theme de Kadence para janninaliz.com.
Author:      Janninaliz
Template:    kadence
Version:     0.1.0
Text Domain: janninaliz
*/

/* Fuentes del sitio desde el propio servidor (2026-10-13; antes, Google Fonts).
   WOFF2 solo latín; Karla es variable (un archivo para 400 y 700). Se precargan
   en functions.php. */
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fuentes/Fraunces-Bold-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fuentes/Karla-latin.woff2") format("woff2");
}

/* Índice de la página Recetas ([janninaliz_indice_recetas]). Las tarjetas
   son el bloque "Entradas" de Kadence Blocks; aquí solo el espaciado. */
.jl-indice-grupo {
	margin-bottom: 2.5rem;
}
.jl-indice-titulo a {
	text-decoration: none;
}
/* Fondo blanco como Inicio. Inicio lo tiene por ser de ancho completo; Recetas
   mantiene el ancho normal para que la cuadrícula no llegue al borde. */
.site:has(.jl-indice),
.site:has(.jl-pagina-blanca) {
	background-color: var(--global-palette9, #ffffff);
}

/* "Explora por categoría" de la portada ([janninaliz_categorias]) y título
   "Sígueme" de Sobre mí. */
.jl-categorias-titulo,
.jl-centrado {
	text-align: center;
}
.jl-categorias-botones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

/* Foto de Jannina (Inicio y Sobre mí): esquinas suaves y, en móvil, que no
   ocupe toda la pantalla. */
.jl-foto-jannina img {
	border-radius: 8px;
}
.jl-foto-jannina.jl-foto-centrada {
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 767px) {
	.jl-foto-jannina,
	.jl-foto-jannina.jl-foto-centrada {
		max-width: 240px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Pie: la franja inferior va en columna (íconos encima del texto, todo
   centrado). Kadence deja el primer elemento con margin-left: auto, a la
   derecha, y el texto alineado a la izquierda en escritorio. */
.site-footer .footer-widget-area.footer-social {
	margin-left: auto;
	margin-right: auto;
}
.site-footer .footer-html {
	text-align: center;
}
/* Íconos de redes del pie: redondos y con los mismos colores que el bloque de
   redes de WordPress de Inicio (los que le gustan a Jannina). Los colores de
   marca de Kadence están apagados (footer_social_brand vacío); el selector largo
   es para ganar al de Kadence, que redondea las esquinas a 3px. */
.site-footer .site-footer-wrap .site-footer-section .footer-social-wrap .footer-social-inner-wrap a.social-button {
	width: 36px;
	height: 36px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
	color: #ffffff;
}
.site-footer .site-footer-wrap .footer-social-wrap a.social-link-facebook { background-color: #0866ff; }
.site-footer .site-footer-wrap .footer-social-wrap a.social-link-instagram { background-color: #de006c; }
.site-footer .site-footer-wrap .footer-social-wrap a.social-link-pinterest { background-color: #e60023; }
.site-footer .site-footer-wrap .footer-social-wrap a.social-link-tiktok { background-color: #000000; }
.site-footer .site-footer-wrap .footer-social-wrap a.social-link-youtube { background-color: #e50000; }

/* Cabecera fija (60 px al encogerse): los saltos a anclas ("Ir a la receta",
   #receta, títulos con id) se detienen debajo de ella y no quedan tapados.
   Con sesión iniciada se suma la barra de administración (32 px; 46 px en
   pantallas estrechas). */
[id] {
	scroll-margin-top: 80px;
}
body.admin-bar [id] {
	scroll-margin-top: 112px;
}
@media (max-width: 782px) {
	body.admin-bar [id] {
		scroll-margin-top: 126px;
	}
}

/* Tarjetas de recetas (portada, Recetas, categorías, búsqueda, entradas
   similares): título más compacto y sin hueco debajo. La foto es cuadrada
   (ajuste "1-1" de Kadence) y el punto de enfoque de Medios mueve el recorte. */
.loop-entry .entry-content-wrap .entry-header {
	margin-bottom: 0;
}
.loop-entry .entry-content-wrap h2.entry-title,
.loop-entry .entry-content-wrap h3.entry-title {
	font-size: 24px;
	line-height: 1.25;
}
@media (max-width: 767px) {
	.loop-entry .entry-content-wrap {
		padding: 16px 20px 20px;
	}
	.loop-entry .entry-content-wrap h2.entry-title,
	.loop-entry .entry-content-wrap h3.entry-title {
		font-size: 20px;
		line-height: 1.3;
	}
}

/* Foto grande de arriba de las recetas: franja encima del título con el recorte
   horizontal (3:2 o 4:3; la proporción la pone functions.php). */
.single-post .article-post-thumbnail.kadence-thumbnail-position-above {
	margin-bottom: 2em;
}
/* Red de seguridad: receta sin recorte horizontal = foto completa, sin recortar. */
.jl-sin-horizontal .article-post-thumbnail img.post-top-featured {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 80vh;
	margin: 0 auto;
}

/* Portada: presentación (grupo .jl-presentacion de la página Inicio). Foto de
   440 px y texto centrado a lo alto; en móvil, todo en columna y centrado.
   Con Kadence, cada grupo envuelve su contenido en .wp-block-group__inner-container:
   la foto y el texto son hijos de ese envoltorio, así que el flex va en él. */
.jl-presentacion {
	padding: 64px 24px;
}
.jl-presentacion .jl-presentacion-inner {
	max-width: 1000px;
	margin: 0 auto;
}
.jl-presentacion .jl-presentacion-inner > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	gap: 56px;
}
.jl-presentacion .jl-presentacion-foto {
	flex: 0 0 440px;
	margin: 0;
}
.jl-presentacion .jl-presentacion-foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.jl-presentacion .jl-presentacion-texto {
	flex: 1 1 auto;
	margin: 0;
}
.jl-presentacion .jl-presentacion-titulo {
	margin: 0 0 0.4em;
	color: var(--global-palette3);
	font-family: Fraunces, serif;
	font-size: 2.4rem;
	line-height: 1.15;
}
.jl-presentacion .jl-presentacion-parrafo {
	margin: 0 0 1.5em;
	font-size: 20px;
	line-height: 1.6;
}
.jl-presentacion .jl-presentacion-botones {
	gap: 12px;
	margin: 0 0 1.75em;
}
.jl-presentacion .jl-boton-secundario .wp-block-button__link {
	background: transparent;
	color: var(--global-palette1);
	box-shadow: inset 0 0 0 2px var(--global-palette1);
}
.jl-presentacion .jl-boton-secundario .wp-block-button__link:hover {
	background: var(--global-palette1);
	color: #fff;
}
.jl-siluetas {
	display: flex;
	gap: 18px;
	color: var(--global-palette3);
}
/* Separador: línea dorada fina con una galleta en el centro. */
.jl-separador {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 1000px;
	margin: 8px auto 40px;
	padding: 0 24px;
	color: var(--global-palette3);
}
.jl-separador span {
	flex: 1;
	height: 1px;
	background: var(--global-palette3);
	opacity: 0.5;
}
.jl-separador + * {
	margin-top: 48px;
}
/* "Ver todas las recetas" debajo de "Recetas recientes" (con .single-content
   para ganarle al margin: 0 que Kadence pone a .wp-block-buttons). */
.single-content .wp-block-buttons.jl-ver-todas {
	margin-top: 32px;
}
@media (max-width: 767px) {
	.jl-presentacion {
		padding: 40px 20px;
	}
	.jl-presentacion .jl-presentacion-inner > .wp-block-group__inner-container {
		flex-direction: column;
		gap: 24px;
		text-align: center;
	}
	.jl-presentacion .jl-presentacion-foto {
		flex: 0 0 auto;
		width: 240px;
	}
	.jl-presentacion .jl-presentacion-titulo {
		font-size: 1.9rem;
	}
	.jl-presentacion .jl-presentacion-parrafo {
		font-size: 18px;
	}
	.jl-presentacion .jl-presentacion-botones,
	.jl-siluetas {
		justify-content: center;
	}
}

/* Botón "Guárdalo en Pinterest" (público desde el 2026-10-13; functions.php).
   Los estilos de "Lo que usé en esta receta" están en el plugin
   janninaliz-productos. */
a.jl-pinterest,
.single-content a.jl-pinterest {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	background: #e60023;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}
a.jl-pinterest:hover,
.single-content a.jl-pinterest:hover {
	background: #ad081b;
	color: #fff;
}
.jl-pinterest .kadence-svg-iconset svg {
	width: 16px;
	height: 16px;
}
/* Arriba, junto a "Ir a la receta" e "Imprimir receta" (que miden ~36 px). */
.wprm-recipe-snippet a.jl-pinterest-arriba {
	box-sizing: border-box;
	min-height: 36px;
	margin-left: 4px;
	padding: 5px 10px;
	border-radius: 3px;
	font-size: 0.9em;
	font-weight: 400;
	vertical-align: middle;
}
.jl-pinterest-final {
	margin: 2em 0;
	text-align: center;
}
.single-content .jl-pinterest-final p {
	margin-bottom: 0.6em;
}

/* Página 404 propia (vista previa, template-parts/content/error-404.php). */
.jl-404 .search-form {
	margin: 1.5em 0 2.5em;
}
.single-content .jl-404-recientes {
	margin: 0 0 1rem;
}
.jl-404 .wp-block-buttons.jl-ver-todas {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

/* Contraste WCAG AA (aprobado por Jannina el 2026-10-13). El rosita
   (palette1, #ae566d) se cambió en la paleta de Kadence; aquí lo demás:
   botones de redes de Sobre mí (bloque de WordPress) un poco más oscuros y el
   asterisco de los campos obligatorios. Proporciones en docs/revision-sitio.md. */
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-youtube {
	background-color: #e50000;
}
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-instagram {
	background-color: #de006c;
}
.required,
.comment-form .required {
	color: #c5481f;
}

/* WebP con respaldo JPEG (functions.php): <picture> no cambia el diseño. */
picture.jl-webp {
	display: contents;
}