/*
Theme Name:  Twenty Twenty-Three Revista
Theme URI:   https://humanmarketing.mx
Description: Tema hijo de Twenty Twenty-Three para el sitio de la revista. Añade plantillas para las ediciones y una capa ligera de diseño.
Author:      Miguel de la Mora
Template:    twentytwentythree
Version:     0.10.1
Text Domain: tt3-revista
*/

/* Casi todo el diseño vive en theme.json. Aquí solo lo que theme.json
   no puede expresar: detalles de las piezas que dibuja el plugin. */

:root {
	--rev-flipbook-max: 1080px;
	--rev-ancho: 1200px;
	--rev-banda-oscura: #515558;
}

/* Las bandas de color están apagadas. Para encenderlas: [edicion bandas="1"] */

/* Las bandas se salen del contenedor; sin esto la barra de desplazamiento
   provoca unos píxeles de scroll horizontal. clip en vez de hidden porque
   hidden rompe el position:sticky del encabezado. */

.wp-site-blocks {
	overflow-x: clip;
}

/* Encabezado ----------------------------------------------------------- */

.rev-header {
	font-size: 0.875rem;
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: saturate( 1.4 ) blur( 8px );
	background-color: color-mix( in srgb, var( --wp--preset--color--base ) 88%, transparent );
}

/* Todo en una sola línea, centrado verticalmente. El bloque de shortcode
   mete un wrapper propio, así que hay que aplanarlo o rompe la alineación. */

.rev-header__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: nowrap;
	min-height: 0;
}

.rev-header__barra > * {
	margin-block: 0;
}

.rev-header .wp-block-site-logo,
.rev-header .wp-block-site-logo img {
	display: block;
	margin: 0;
	height: auto;
	max-height: 78px;
	width: auto;
}

.rev-header .rev-nav {
	margin: 0;
	align-items: center;
}

.rev-header .rev-nav__anio summary {
	padding-block: 0.2rem;
}

@media ( max-width: 600px ) {
	.rev-header__barra {
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* Título de la edición ------------------------------------------------- */

.rev-titulo {
	font-family: var( --wp--preset--font-family--source-serif-pro );
	font-size: clamp( 2rem, 5vw, 3.25rem );
	letter-spacing: -0.02em;
}

.rev-titulo::after {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin: 0.9rem auto 0;
	background: var( --wp--preset--color--accent );
}

/* Ediciones anteriores ------------------------------------------------- */

.rev-anteriores {
	padding-top: clamp( 2rem, 5vw, 3.5rem );
	border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--contrast ) 12%, transparent );
}

.rev-anteriores__titulo {
	font-family: var( --wp--preset--font-family--source-serif-pro );
	text-align: center;
}

.rev-card__titulo {
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.rev-card:hover .rev-card__titulo {
	color: var( --wp--preset--color--accent );
}

/* Navegación ----------------------------------------------------------- */

.rev-nav {
	font-size: 0.95rem;
}

.rev-nav__archivo {
	color: var( --wp--preset--color--accent );
}

.rev-nav__lista {
	background: var( --wp--preset--color--base );
}

/* Pie de página -------------------------------------------------------- */

.rev-footer {
	margin-top: 0;
	border-top: 3px solid var( --wp--preset--color--accent );
}

.rev-footer__logo {
	margin-bottom: 1rem;
}

.rev-footer__nota {
	max-width: 32ch;
	color: var( --wp--preset--color--contrast-2 );
}

.rev-footer__titulo {
	margin: 0 0 0.9rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --wp--preset--color--contrast-2 );
}

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

.rev-footer__linea {
	margin: clamp( 2rem, 4vw, 3rem ) 0 1.25rem;
	opacity: 0.25;
}

/* Acciones y paginación ------------------------------------------------ */

.rev-acciones {
	padding-top: 0.5rem;
}

.rev-acciones .rev-boton:not( .rev-boton--suave ) {
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--accent );
}

.rev-acciones .rev-boton:not( .rev-boton--suave ):hover {
	background: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
}

.rev-paginacion {
	margin-top: clamp( 2rem, 4vw, 3rem );
	border-top-color: color-mix( in srgb, var( --wp--preset--color--contrast ) 12%, transparent );
}

/* Nada de franja blanca debajo del pie ---------------------------------- */

/**
 * La franja no era un color mal puesto: era que la página no llenaba la
 * altura de la ventana, así que debajo del pie quedaba fondo del documento
 * a la vista.
 *
 * La solución de verdad es hacer que el contenedor raíz ocupe al menos la
 * altura completa y que el contenido central se estire para llenarla. Así
 * el pie siempre queda abajo del todo, sin importar cuánto contenido haya.
 * El intento anterior pintaba el documento de color papel, que era un
 * parche y además teñía el encabezado, que es traslúcido.
 */

html,
body {
	background-color: var( --wp--preset--color--base );
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	overflow-x: clip;

	/* Twenty Twenty-Three define relleno superior e inferior en la raíz.
	   El de abajo dejaba franja bajo el pie; el de arriba, un hueco sobre
	   el encabezado. Los dos fuera: aquí el header va a ras. */
	padding-top: 0;
	padding-bottom: 0;
}

.wp-site-blocks > :first-child {
	margin-block-start: 0;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-site-blocks > :last-child {
	margin-block-end: 0;
}

/* Redes sociales en el pie --------------------------------------------- */

/* Monocromas en vez de los colores de cada marca: cinco logos de colores
   distintos compiten con el contenido. El selector lleva una clase de más
   para ganarle a los colores por servicio que trae el estilo del bloque. */

.rev-footer .wp-block-social-links.rev-footer__redes {
	margin-top: 1.25rem;
	gap: 0.9rem;
}

.rev-footer .wp-block-social-links.rev-footer__redes .wp-social-link {
	color: var( --wp--preset--color--contrast );
	transition: color 0.2s ease, transform 0.2s ease;
}

.rev-footer .wp-block-social-links.rev-footer__redes .wp-social-link:hover,
.rev-footer .wp-block-social-links.rev-footer__redes .wp-social-link:focus-within {
	color: var( --wp--preset--color--accent );
	transform: translateY( -2px );
}