/*
Theme Name: boolapp2026 Fullscreen (EXPERIMENTAL)
Theme URI: https://boolapp.com/
Author: boolapp
Author URI: https://boolapp.com/
Description: Clon experimental de boolapp2026 -- home tipo "una obra por pantalla", scroll-snap. NO USAR EN PRODUCCIÓN sin confirmar antes.
Version: 2026.0819-experimental
Text Domain: boolapp2026
*/

:root {
	/* 260818 - identidad "zine-dark": papel de fanzine oscuro, no blanco corporativo */
	--BPP_violet: #6d4583;
	--BPP_gray: #2a2830;
	--BPP_gray2: #2f3a47;

	--BPP_Black: #111;
	--BPP_White: #FFF;

	--BPP_bg: #1c1b1e;
	--BPP_text: #f1ede4;

	--BPP_H1color: var(--BPP_text);
	--BPP_H2color: var(--BPP_text);
	--BPP_H3color: var(--BPP_text);

	--BPP_Pcolor: var(--BPP_text);
	--BPP_Acolor: #b98fd6;

	--BPP_NAVItxt: var(--BPP_text);
	--BPP_NAVItxthover: #b98fd6;
	--BPP_NAVItxtselected: #b98fd6;

	--BPP_maxwidth: 1200px;
	--BPP_header_h: 88px; /* 260819 - EXPERIMENTAL: mismo alto que body{padding-top}, usado por .BPP-fullscreen-gallery */

	--BPP_font_heading: 'Amatic SC', cursive;
	--BPP_font_body: 'Work Sans', sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding-top: 88px; /* 260818 - compensa el header fixed para que no tape el contenido */
	font-family: var(--BPP_font_body);
	color: var(--BPP_Pcolor);
	background: var(--BPP_bg);
}

a { color: var(--BPP_Acolor); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; font-family: var(--BPP_font_heading); }
h1 { color: var(--BPP_H1color); }
h2 { color: var(--BPP_H2color); }
h3 { color: var(--BPP_H3color); }

img { max-width: 100%; height: auto; display: block; }

/* ---- contenedores ---- */
.wrapW { width: 100%; }
.pageW { max-width: var(--BPP_maxwidth); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

/* ---- header (fijo arriba, semitransparente) ---- */
#wrapHDR {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: #000;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
#HDR { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; } /* 260818 - sin padding-left/right para no pisar el lateral de .pageW */
#LOGO a {
	display: flex;
	align-items: flex-end; /* 260821 - "boolapp" y ".com" alineados abajo, aunque tengan distinto tamaño */
	font-family: var(--BPP_font_heading);
	font-weight: 700;
	letter-spacing: -0.05em;
	color: var(--BPP_text);
	transition: opacity 300ms;
}
#LOGO a:hover {
	opacity: 0.7;
	color: #FFF;
}
.BPP-logo-base { font-size: 3rem; }
.BPP-logo-tld {
	font-size: 2rem;
	color: #FFF9;
	position: relative;
	top: -3px; /* 260821 - ajuste fino: el align-items:flex-end del flex no alineaba bien por la métrica de la fuente en distinto tamaño */
}

#NAVI { position: relative; }
#NAVI .nav-menu { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
#NAVI .nav-menu a {
	font-family: var(--BPP_font_heading);
	font-size: 1.6em;
	font-weight: bold;
	color: #FFF;
	transition: opacity 300ms;
}
#NAVI .nav-menu a:hover {
	opacity: 0.7;
	color: #FFF;
}
/* 260818 - ícono "abre en ventana nueva" automático para cualquier link con target="_blank" en todo el sitio (menú, footer, etc.) */
a[target="_blank"]::after {
	content: "\f35d";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 0.5em;
	margin-left: 6px;
	vertical-align: super;
}
.menutoggle { display: none; cursor: pointer; font-size: 1.4rem; }

.archive-header { margin-bottom: 24px; }
.archive-description { font-size: 1rem; line-height: 1.6; opacity: 0.85; margin-bottom: 16px; }

/* ---- intro de la home ---- */
.BPP-intro { margin: 0 0 32px; }
.BPP-intro h2 { font-size: 3rem; margin: 0 0 8px; }
.BPP-intro p { font-size: 1rem; line-height: 1.5; opacity: 0.85; margin: 0; }

/* ---- portfolio grid (home/categoría/técnica) ---- */
#MAINwrap { padding: 32px 0; }
.PortfolioGrid { column-count: 3; column-gap: 2px; }
.PortfolioItem {
	display: inline-block;
	width: 100%;
	break-inside: avoid;
	margin-bottom: 2px;
	/* 260820 - mismo fondo de acento sutil que la Ficha del home, sin borde;
	 * el padding deja ver ese color alrededor de la imagen. Gap mínimo de 1px
	 * entre items -- bloques casi a tope, estilo mosaico. */
	background-color: var(--BPP-accent-bg-33, transparent);
	border-radius: 4px;
	padding: 50px;
	box-sizing: border-box;
}

/*
 * 260818 - masonry armado por JS (BPP_layoutMasonry en functions.js): reparte
 * cada item en la columna más corta, EN ORDEN DE FECHA, así los primeros N
 * quedan arriba de cada columna (1,2,3 / 4,5,6...) en vez de llenar toda la
 * columna 1 antes de pasar a la 2 (que es lo que hacía column-count solo).
 * Antes de que corra el JS (o sin JS) queda en una sola columna, sin
 * mezclar el orden.
 */
.PortfolioGrid.BPP-js-masonry { column-count: 1; }
.PortfolioGrid.BPP-js-ready {
	column-count: initial;
	display: flex;
	align-items: flex-start;
	gap: 2px;
}
.PortfolioCol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.PortfolioCol .PortfolioItem { margin-bottom: 0; }
.PortfolioItem figure {
	position: relative;
	margin: 0;
	background: var(--BPP_gray);
}
.PortfolioItem img { width: 100%; height: auto; }
.PortfolioItem a { color: inherit; }

/* 260818 - caption superpuesto, esquina inferior-izquierda de la imagen */
.BPP-caption {
	position: absolute;
	left: 8px;
	bottom: 8px;
	max-width: calc(100% - 16px);
	background: rgba(0, 0, 0, 0.6);
	color: var(--BPP_White);
	font-family: var(--BPP_font_heading);
	font-size: 1.2rem;
	line-height: 1.3;
	padding: 4px 8px;
	white-space: normal; /* 260820 - permite varias líneas en vez de truncar con "..." */
}

/* 260820 - descripción real (cuando existe): debajo de la imagen, antes de
 * categoría/técnicas, sin fondo, texto blanco 60% */
.BPP-excerpt {
	margin: 12px 0 0;
	background: none;
	color: #FFFC;
	font-family: var(--BPP_font_heading);
	font-size: 1.3rem;
	line-height: 1.2;
	padding: 0;
	font-style: normal;
}

/* 260820 - categoría y técnicas/materiales: mismo párrafo, separadas por <br>, sin fondo, alineadas a la izquierda */
.BPP-tags {
	margin: 16px 0 0;
	background: none;
	color: #FFF9;
	text-align: left;
	font-family: 'Work Sans', sans-serif;
	font-size: 0.75rem;
	line-height: 1.4;
	padding: 0;
}
.BPP-tags a {
	color: #FFF9;
	opacity: 0.85;
	text-transform: uppercase;
	transition: opacity 300ms;
}
.BPP-tags a:hover { opacity: 1; }

/* ---- single artwork ---- */
h1.entry-title { font-size: 4rem; margin-top: 0; } /* 260818 - equivalente a 48pt, en rem */
.ArtworkMeta { color: var(--BPP_text); font-size: 0.9rem; }
.ArtworkMeta p {
	font-family: var(--BPP_font_heading);
	font-size: 2em;
}
.ArtworkCategories a, .ArtworkTags a {
	color: #FFF;
	text-transform: uppercase;
	transition: opacity 300ms;
}
.ArtworkCategories a:hover, .ArtworkTags a:hover {
	opacity: 0.7;
	color: #FFF;
}

/*
 * ---- [gallery] dentro de un post ----
 * CSS Grid con grid-row-end:span (calculado en PHP según el alto real de cada
 * imagen), NO column-count: así se lee en orden 1,2,3... fila por fila, en vez
 * del orden por columna que usa el masonry del home (ahí el orden no importa).
 */
.PortfolioGrid.GalleryMasonry {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 10px;
	gap: 24px;
}
.GalleryMasonry .PortfolioItem { margin-bottom: 0; }
.GalleryMasonry .PortfolioItem a { cursor: zoom-in; }

@media (max-width: 767px) {
	.PortfolioGrid.GalleryMasonry { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
	.PortfolioGrid.GalleryMasonry { grid-template-columns: 1fr; }
}

/* ---- lightbox propio ---- */
.BPP-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 40px;
	cursor: zoom-out;
}
.BPP-lightbox-overlay img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	cursor: default;
}
.BPP-lightbox-close {
	position: fixed;
	top: 16px;
	right: 24px;
	color: var(--BPP_White);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

/* ---- paginación (categoría/técnica/home): mismo estilo que post-navigation, centrada ---- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 32px; }
.pagination a, .pagination span.current {
	color: #FFF;
	font-family: var(--BPP_font_heading);
	font-size: 2em;
	transition: opacity 300ms;
}
.pagination a:hover { color: #FFF; opacity: 0.7; text-decoration: none; }
.pagination i { font-size: 1.8rem; }
.pagination span.current { opacity: 0.7; }

/* ---- navegación anterior/siguiente (single) ---- */
.post-navigation { border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 32px; padding-top: 16px; }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 16px; }
.post-navigation .nav-previous, .post-navigation .nav-next { flex: 1; font-size: 0.9rem; }
.post-navigation .nav-next { text-align: right; }
.post-navigation a { color: #FFF; display: inline-flex; flex-direction: column; gap: 4px; transition: opacity 300ms; }
.post-navigation .nav-next a { align-items: flex-end; }
.post-navigation a:hover { color: #FFF; opacity: 0.7; text-decoration: none; }
.post-navigation i { font-size: 1.8rem; }
.BPP-navtitle { font-family: var(--BPP_font_heading); font-size: 2em; }
.BPP-navcat { font-family: var(--BPP_font_body); font-size: 0.8rem; padding: 0 2em; }

.CLEAR { clear: both; }

@media (max-width: 767px) {
	.menutoggle { display: block; }
	/*
	 * 260818 - dropdown flotante (position:absolute) en vez de empujar el flujo normal:
	 * el header es "fixed" con alto compensado a mano en body{padding-top}, así que si
	 * el menú abierto sumara alto real al header, tapaba el contenido de abajo (el alto
	 * fijo no se actualizaba). Al flotar, el hamburger no se mueve y el header no cambia
	 * de tamaño al togglear -- coincide con el comportamiento habitual de tus temas.
	 */
	#NAVI .nav-menu {
		display: none;
		position: absolute;
		top: 44px;
		right: 0;
		flex-direction: column;
		gap: 8px;
		margin-top: 16px;
		padding: 16px 24px;
		background: var(--BPP_bg);
		border: 1px solid rgba(255, 255, 255, 0.15);
		border-radius: 4px;
		min-width: 200px;
	}
	#site-navigation.toggled-on .nav-menu { display: flex; }

	/* 260818 - nav anterior/siguiente del post: apilados y centrados en mobile */
	.post-navigation .nav-links { flex-direction: column; align-items: center; gap: 24px; }
	.post-navigation .nav-previous, .post-navigation .nav-next { text-align: center; }
	.post-navigation a, .post-navigation .nav-next a { align-items: center; }
}

/* ---- compartir ---- */
.BPP-share { position: relative; display: inline-block; margin: 16px 0; }
.BPP-share-toggle {
	font-family: var(--BPP_font_body);
	font-size: 0.9rem;
	color: #FFF;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	padding: 8px 16px;
	cursor: pointer;
	transition: opacity 300ms;
}
.BPP-share-toggle:hover { opacity: 0.7; }
.BPP-share-links {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 8px;
	padding: 12px;
	background: var(--BPP_bg);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 4px;
	flex-direction: column;
	gap: 10px;
	min-width: 160px;
	z-index: 10;
}
.BPP-share-links.is-open { display: flex; }
.BPP-share-links a, .BPP-share-links button {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #FFF;
	background: none;
	border: none;
	font-family: var(--BPP_font_body);
	font-size: 0.9rem;
	text-align: left;
	padding: 0;
	cursor: pointer;
	transition: opacity 300ms;
}
.BPP-share-links a:hover, .BPP-share-links button:hover { opacity: 0.7; text-decoration: none; }

/*
 * ---- EXPERIMENTAL: home "una obra por pantalla" ----
 * body ya tiene padding-top:88px (el header fixed), así que el contenedor no
 * necesita restarlo de nuevo -- cada slide mide exactamente el resto del
 * viewport (100vh - header). scroll-snap-type:mandatory hace que soltar el
 * scroll/gesto "encastre" siempre en el borde de una obra, nunca a mitad.
 */
/* 260820 - el snap-scroll es de la PAGINA (html), no de un contenedor interno,
 * asi hay un solo scrollbar y el footer se alcanza siguiendo el mismo scroll
 * despues del ultimo slide, en vez de quedar en un scroll interno separado. */
html:has(.BPP-fullscreen-gallery) {
	scroll-snap-type: y mandatory;
}
/* 260820 - sin esto, "mandatory" queda encastrado en el borde del ultimo
 * slide y el pie nunca termina de entrar en pantalla: se agrega el bloque
 * de paginacion/pie como el proximo punto de "encastre" despues del ultimo
 * slide, asi el scroll SI llega a mostrarlo completo. */
.BPP-fullscreen-gallery + .pageW {
	scroll-snap-align: start;
	scroll-margin-top: var(--BPP_header_h);
}
/* 260820 - "Layout Ficha": imagen a la izquierda / info a la derecha, UNA
 * sola definición que usan tanto el home (.BPP-fullscreen-gallery, con
 * scroll-snap) como el post individual (single.php) -- misma altura, mismo
 * padding. Nada de reglas paralelas/duplicadas -- lo único que cambia entre
 * uno y otro es la intensidad del fondo de acento (ver --snap más abajo). */
.BPP-ficha {
	height: calc(100vh - var(--BPP_header_h));
	scroll-margin-top: var(--BPP_header_h); /* 260820 - el snap es del documento; sin esto encastra debajo del header fixed, no debajo de él */
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 24px;
	padding: 24px;
	background-color: var(--BPP-accent-bg-66, transparent); /* 260820 - post: fondo más marcado */
	box-sizing: border-box;
}
/* 260820 - el scroll-snap es solo del home (una obra encastra tras otra); en
 * el post individual es un único bloque, no hace falta que "encastre". El
 * fondo también es más sutil acá -- así se nota el cambio de intensidad al
 * entrar a una obra desde el home. */
.BPP-ficha--snap {
	scroll-snap-align: start;
	scroll-snap-stop: always;
	background-color: var(--BPP-accent-bg-33, transparent);
}

/* 260819 - imagen a la izquierda, ocupa todo el alto disponible de la ficha */
.BPP-ficha-image {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.BPP-ficha-image a,
.BPP-ficha-image figure {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	height: 100%; /* 260819 - alto DEFINIDO (no max-height), para que el max-height:100% de la imagen tenga contra qué medirse */
	min-height: 0;
	color: inherit;
}
.BPP-ficha-image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
}
/* 260819 - info a la DERECHA, sin fondo de color por ahora, todo en blanco */
.BPP-ficha-info {
	flex-shrink: 0;
	width: 320px;
	max-width: 35%;
	max-height: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}
.BPP-ficha-title {
	margin: 0;
	font-family: var(--BPP_font_heading);
	font-size: 2.4rem;
	line-height: 1.1;
	font-weight: 400;
}
.BPP-ficha-title a {
	color: #fff;
	text-decoration: none;
}
/* 260821 - la Ficha (home/post) usa el MISMO estilo de excerpt que las
 * tarjetas de categoría (grande, Amatic SC) -- solo se resetea el margen acá
 * porque el espaciado ya lo da el gap del flex, no hace falta duplicarlo. */
.BPP-ficha-info .BPP-excerpt {
	margin: 0;
}
.BPP-ficha-info .BPP-tags {
	background: none;
	color: #FFF9;
	text-align: left;
	padding: 0;
	margin: 0;
}
.BPP-ficha-info .BPP-tags a { color: #FFF9; }
.BPP-more-images { margin-top: 4px; }
.BPP-more-images a {
	color: #fff;
	font-family: var(--BPP_font_heading);
	font-size: 1.4rem;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	transition: opacity 300ms;
}
.BPP-more-images a:hover { opacity: 0.7; }

@media (max-width: 767px) {
	.BPP-ficha { flex-direction: column; }
	.BPP-ficha-info { width: 100%; max-width: 100%; flex-shrink: 1; }
}