/*
Theme Name: Joanzam
Theme URI: https://joanzam.com/
Description: Tema hijo de bloques para la marca personal de Joan Zambrano (Joanzam). Hereda de Twenty Twenty-Five (tema oficial de WordPress) y aplica la identidad visual R2 (Outfit + Plus Jakarta Sans locales en WOFF2, paleta Opción B con acento turquesa controlado #26A69A de Riderzam, jerarquía visual de producto digital y motion progresivo al hacer scroll) mediante theme.json, plantillas, patrones y bloques nativos editables en Gutenberg. No modifica el tema padre.
Author: Antigravity para Joan Zambrano
Template: twentytwentyfive
Version: 2.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: joanzam
*/

/* ---------- Tokens de interfaz y sombras estilo Riderzam ---------- */
:root {
	--jz-teal: #26A69A;
	--jz-teal-aa: #14634D;
	--jz-teal-soft: rgba(38, 166, 154, 0.14);
	--jz-shadow-sm: 0 8px 24px -6px rgba(16, 43, 48, 0.06), 0 2px 6px -1px rgba(16, 43, 48, 0.04);
	--jz-shadow-md: 0 20px 44px -12px rgba(16, 43, 48, 0.11), 0 4px 12px -2px rgba(16, 43, 48, 0.05);
	--jz-shadow-lg: 0 28px 60px -15px rgba(16, 43, 48, 0.16);
	--jz-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Foco accesible visible con turquesa accesible (WCAG AA) ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--jz-teal-aa);
	outline-offset: 3px;
	border-radius: 6px;
}

.has-contrast-background-color :where(a, button, summary):focus-visible,
.has-accent-5-background-color :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--accent-1);
}

/* ---------- Tipografía y rótulos editoriales (R3: Escala relajada, sin compresión) ---------- */
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-post-title,
.wp-block-site-title {
	font-family: var(--wp--preset--font-family--outfit);
	text-wrap: balance;
	overflow-wrap: break-word;
}

:is(h1, h2, h3, h4, [id]) {
	scroll-margin-top: 5.5rem;
}

.wp-block-post-title {
	font-weight: 650;
	line-height: 1.22;
	letter-spacing: -0.015em;
}

.entry-content > p,
.wp-block-post-content > p {
	max-width: 72ch;
}

.jz-kicker {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	text-transform: uppercase;
	letter-spacing: 0.11em;
	font-weight: 700;
	font-size: 0.8rem;
}

/* Subrayado y marcador de marca en titulares */
.jz-highlight,
mark.jz-highlight {
	background: linear-gradient(180deg, transparent 60%, rgba(114, 199, 171, 0.55) 60%);
	color: inherit;
	padding: 0 0.14em;
	border-radius: 4px;
}

.has-contrast-background-color .jz-highlight,
.has-accent-5-background-color .jz-highlight {
	background: linear-gradient(180deg, transparent 60%, rgba(38, 166, 154, 0.45) 60%);
}

/* Etiquetas tipo píldora (inspiradas en Riderzam: badge sutil, superficie limpia y turquesa armónico) */
.jz-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	border-radius: 999px;
	padding: 0.28rem 0.85rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	width: fit-content;
	background-color: #EDF8F5 !important;
	color: #10433E !important;
	border: 1px solid rgba(20, 99, 77, 0.22) !important;
	box-shadow: none !important;
}

.has-contrast-background-color .jz-pill,
.has-accent-5-background-color .jz-pill {
	background-color: #10433E !important;
	color: #EFF6F4 !important;
	border: 1px solid rgba(114, 199, 171, 0.35) !important;
}

/* ---------- Botones modernos e interacciones (Estilo Riderzam) ---------- */
.wp-block-button__link {
	border-radius: 10px !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	padding: 0.72rem 1.45rem !important;
	transition: transform 0.22s var(--jz-ease-out), box-shadow 0.22s var(--jz-ease-out), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	box-shadow: 0 4px 14px -3px rgba(16, 43, 48, 0.16);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -5px rgba(38, 166, 154, 0.32);
}

.wp-block-button.is-style-outline>.wp-block-button__link {
	border: 1.5px solid rgba(23, 60, 67, 0.18) !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	box-shadow: none !important;
}

.wp-block-button.is-style-outline>.wp-block-button__link:hover {
	border-color: var(--jz-teal) !important;
	background: rgba(38, 166, 154, 0.08) !important;
	color: var(--jz-teal-aa) !important;
	transform: translateY(-2px);
}

.has-contrast-background-color .wp-block-button.is-style-outline>.wp-block-button__link,
.has-accent-5-background-color .wp-block-button.is-style-outline>.wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.25) !important;
	background: rgba(255, 255, 255, 0.06) !important;
	color: var(--wp--preset--color--base) !important;
}

/* ---------- Tarjetas y superficies de producto digital (Estilo Riderzam) ---------- */
.jz-card {
	height: 100%;
	background: var(--wp--preset--color--base) !important;
	border-radius: 16px !important;
	border: 1px solid rgba(23, 60, 67, 0.08) !important;
	box-shadow: 0 2px 10px rgba(16, 43, 48, 0.04), 0 8px 24px -6px rgba(16, 43, 48, 0.06);
	transition: transform 0.28s var(--jz-ease-out), box-shadow 0.28s var(--jz-ease-out), border-color 0.24s ease;
}

.jz-card:hover,
.jz-card:focus-within {
	transform: translateY(-3px);
	border-color: rgba(38, 166, 154, 0.45) !important;
	box-shadow: 0 14px 34px -10px rgba(16, 43, 48, 0.12), 0 2px 8px rgba(16, 43, 48, 0.04);
}

.jz-card-top {
	border-top-color: rgba(23, 60, 67, 0.08) !important;
}

/* Marcos de imagen con acabado limpio y zoom progresivo */
.jz-media-frame,
.wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 10px 30px -8px rgba(16, 43, 48, 0.09);
	border: 1px solid rgba(23, 60, 67, 0.08);
	background: var(--wp--preset--color--accent-5);
}

.jz-media-frame img,
.wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	transform: scale(var(--jz-zoom, 1));
	transition: transform 0.55s var(--jz-ease-out);
	will-change: transform;
}

.jz-card:hover .wp-block-post-featured-image img,
.jz-media-frame:hover img {
	transform: scale(1.035);
}

/* Corrección D2: Contraste accesible en pie de foto del hero y marcos oscuros (WCAG AA >= 4.5:1) */
.jz-media-frame figcaption,
.wp-block-image.jz-media-frame figcaption,
.has-contrast-background-color figcaption,
.has-accent-5-background-color figcaption {
	color: var(--wp--preset--color--accent-2) !important;
	padding: 0.75rem 1rem !important;
	font-size: 0.8125rem !important;
	line-height: 1.45 !important;
}

/* ---------- Cabecera pegajosa con cristal esmerilado estilo Riderzam (R3-C1 + C2) ----------
   Cero saltos de composición (layout jumps) y sticky persistente en todo el documento:
   El contenedor estructural header.wp-block-template-part es el elemento con position: sticky,
   fijado a top: 0 y con altura externa constante de 70px tanto en reposo como en scroll. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 999;
	width: 100%;
	height: 70px;
	min-height: 70px;
	max-height: 70px;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.98) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(23, 60, 67, 0.07);
	transition: background-color 0.28s ease, box-shadow 0.28s var(--jz-ease-out), border-color 0.28s ease;
}

header.wp-block-template-part.is-scrolled {
	background-color: rgba(255, 255, 255, 0.94) !important;
	box-shadow: 0 8px 28px -6px rgba(23, 60, 67, 0.10), 0 2px 6px -1px rgba(23, 60, 67, 0.04);
	border-bottom-color: rgba(23, 60, 67, 0.10);
}

.jz-header {
	height: 100%;
	min-height: 100%;
	max-height: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	background-color: transparent !important;
	border: none !important;
}

.jz-header > .wp-block-group {
	width: 100%;
}

.jz-header .wp-block-site-logo {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.jz-header .wp-block-site-logo a {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.jz-header .wp-block-site-logo img {
	display: block;
	width: auto;
	max-width: 200px;
	height: 38px;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: contain;
	transition: transform 0.22s var(--jz-ease-out), opacity 0.2s ease;
}

@media (max-width: 768px) {
	.jz-header .wp-block-site-logo img {
		max-width: 160px;
		height: 34px;
	}
}

.jz-header .wp-block-navigation a:hover {
	color: var(--jz-teal-aa);
}

.jz-header .wp-block-navigation .current-menu-item>a,
.jz-header .wp-block-navigation a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-decoration-color: var(--jz-teal-aa);
	text-underline-offset: 7px;
}

/* Menú móvil modal opaco a pantalla completa (Corrección D1: contención y box-sizing estricto) */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open * {
	box-sizing: border-box !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	max-width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	z-index: 100000 !important;
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	opacity: 1 !important;
	animation: none !important;
	padding: 1.25rem 1.25rem 2rem 1.25rem !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	min-width: 44px !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: none !important;
	color: var(--wp--preset--color--contrast) !important;
	cursor: pointer !important;
	z-index: 2 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100% !important;
	max-width: 100% !important;
	padding-top: 3.5rem !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0.25rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100% !important;
	max-width: 100% !important;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	box-sizing: border-box !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: 1.25rem;
	font-weight: 700;
	padding: 0.9rem 0.25rem !important;
	width: 100%;
	color: var(--wp--preset--color--contrast) !important;
	box-sizing: border-box !important;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	align-items: center;
}

/* Objetivos táctiles mínimos */
.wp-block-navigation .wp-block-navigation-item__content,
.jz-footer a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.jz-footer .wp-block-navigation .wp-block-navigation-item__content {
	padding: 0;
}

/* Pie: enlaces claros sobre petróleo oscuro */
.jz-footer a {
	color: var(--wp--preset--color--base);
}

.jz-footer a:hover {
	color: var(--wp--preset--color--accent-1);
}

/* Fichas de proyecto: bloque de rol y avisos */
.jz-role {
	border-left: 4px solid var(--jz-teal);
	border-radius: 10px;
}

.jz-notice {
	border-left: 5px solid var(--jz-teal);
}

/* Categorías en formato píldoras interactivas */
.wp-block-categories-list {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.75rem;
}

.wp-block-categories-list li {
	background: var(--wp--preset--color--base);
	border: 1.5px solid var(--wp--preset--color--accent-6);
	border-radius: 999px;
	padding: 0.35rem 0.95rem;
	font-size: 0.88rem;
	font-weight: 600;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.wp-block-categories-list li:hover {
	border-color: var(--jz-teal);
	transform: translateY(-1px);
}

.wp-block-categories-list li a {
	text-decoration: none;
	font-weight: 700;
}

/* Rejilla de entradas */
.jz-post-grid .wp-block-post {
	display: flex;
	min-width: 0;
}

.jz-post-grid .wp-block-post>.wp-block-group {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.jz-post-grid .wp-block-group.is-vertical {
	width: 100%;
	min-width: 0;
	align-items: stretch;
}

.wp-block-post-terms,
.wp-block-post-terms a,
.jz-post-grid .wp-block-post-terms,
.jz-post-grid .wp-block-post-terms a {
	white-space: normal !important;
	overflow-wrap: break-word !important;
	word-break: break-word !important;
	max-width: 100%;
	display: inline;
}

.jz-post-grid .wp-block-post-featured-image {
	margin-bottom: 0.5rem;
	border-radius: 14px;
	aspect-ratio: 16 / 9;
}

.jz-post-grid .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 960px) {
	.jz-post-grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 640px) {
	.jz-post-grid .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

@media (max-width: 400px) {
	.jz-post-grid .jz-kicker {
		letter-spacing: 0.03em;
		font-size: 0.72rem;
	}
}

/* Tablas con acabado moderno y limpio */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.7rem 0.85rem;
	border-color: rgba(200, 223, 216, 0.35);
}

/* Ocultar elementos decorativos en móvil / tablet */
@media (max-width: 920px) {
	.jz-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 599px) {
	.jz-hide-mobile {
		display: none !important;
	}
}

/* Evitar desbordes de palabras largas */
.entry-content,
.wp-block-post-content {
	overflow-wrap: anywhere;
}

.wp-block-post-content :where(p, li) {
	overflow-wrap: break-word;
}

/* ---------- SISTEMA DE MOTION Y SCROLL (Sección 5 de F02-WEB-01-R2) ----------
   Regla de seguridad: Si JavaScript no se ejecuta o antes de inicializar,
   TODO el contenido es 100 % visible (opacity: 1, transform: none).
   Solo cuando html.jz-motion-ready está activo y el usuario no pide reducir
   movimiento se animan los bloques en el hilo compositor. */
@media (prefers-reduced-motion: no-preference) {
	html.jz-motion-ready .jz-reveal {
		opacity: 0;
		transform: translate3d(0, 26px, 0);
		transition: opacity 0.68s var(--jz-ease-out), transform 0.68s var(--jz-ease-out);
		transition-delay: var(--jz-delay, 0ms);
		will-change: opacity, transform;
	}

	html.jz-motion-ready .jz-reveal.is-visible {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	html.jz-motion-ready .jz-parallax {
		transform: translate3d(0, var(--jz-parallax-y, 0px), 0);
		transition: transform 0.12s linear;
		will-change: transform;
	}

	/* Scroll-driven CSS progressive enhancement con detección obligatoria de animation-range */
	@supports ((animation-timeline: view()) and (animation-range: entry)) {
		@keyframes jz-scroll-zoom-soft {
			from {
				scale: 0.96;
			}

			to {
				scale: 1.04;
			}
		}

		.jz-zoom-scroll img {
			animation: jz-scroll-zoom-soft linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 85%;
		}
	}
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		transition-duration: 0.01s !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}

	.jz-reveal,
	.jz-parallax,
	.jz-media-frame img {
		opacity: 1 !important;
		transform: none !important;
		scale: 1 !important;
	}
}