/*
Theme Name: San José Obrero
Theme URI: https://sanjoseobrero.local
Author: Pattern
Author URI: https://pattern.pe
Description: Theme del Colegio San José Obrero. Las plantillas son Blade, sobre Acorn; el contenido de la portada se escribe en campos SCF.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.2
Version: 3.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: san-jose-obrero
Tags: editor-style, block-styles, wide-blocks, accessibility-ready, custom-logo, custom-menu, translation-ready
*/

/* Los estilos globales se gestionan desde theme.json.
   Usa este archivo solo para ajustes que no cubre theme.json. */

/* ---------------------------------------------------------------------------
 * Pie de página siempre al fondo
 *
 * En páginas con poco contenido el pie subía y quedaba el blanco del body por
 * debajo. La pila de bloques ocupa como mínimo el alto de la ventana y el
 * <main> se queda con el espacio sobrante, así que el pie remata en el borde
 * inferior; cuando el contenido es largo, todo sigue fluyendo con normalidad.
 *
 * Se descuenta la barra de administración: WordPress publica su alto en
 * --wp-admin--admin-bar--height (32 px, 46 px en pantallas pequeñas) y solo
 * define la variable cuando la barra existe, de ahí el 0px de respaldo.
 * ------------------------------------------------------------------------ */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc( 100vh - var( --wp-admin--admin-bar--height, 0px ) );
	/* dvh evita el salto de la barra de direcciones en móviles. */
	min-height: calc( 100dvh - var( --wp-admin--admin-bar--height, 0px ) );
}

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

/* En flexbox los márgenes verticales ya no se funden entre hermanos: sin esto,
   el margen inferior del <main> y el superior del pie se sumarían y el hueco
   sobre el pie crecería en todas las páginas. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * El contenedor principal
 *
 * El aire vertical de cada plantilla lo daba un « style » en línea que escribía
 * el editor de bloques en su grupo « main ». Al dejar de haber bloques, se
 * escribe aquí: una clase por cada medida que se usaba.
 * ------------------------------------------------------------------------ */

.sjo-main {
	margin-block: var( --wp--preset--spacing--60 );
}

/* La página de error tiene poco que decir y pide más respiro alrededor. */
.sjo-main--holgada {
	margin-block: var( --wp--preset--spacing--70 );
}

/* La portada no lleva ni margen ni columna centrada: cada una de sus diez
   secciones ocupa el ancho completo y se ocupa de su propio interior. */
.sjo-main--portada {
	margin-block: 0;
	padding-inline: 0;
}

/* El enlace de salto al contenido.
 *
 * Lo ponía el núcleo solo para themes de bloques. Vive fuera de la pantalla
 * hasta que recibe el foco con el tabulador. */
.skip-link.screen-reader-text {
	background-color: var( --wp--preset--color--base, #fff );
	color: var( --wp--preset--color--tinta, #11181f );
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba( 0, 0, 0, 0.6 );
	font-size: 0.875rem;
	font-weight: 700;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	z-index: 100000;
}

.skip-link.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	left: 5px;
	top: 5px;
	width: auto;
	display: block;
}

/* ---------------------------------------------------------------------------
 * Desplazamiento suave para los saltos internos
 *
 * Afecta solo a los saltos que provoca el navegador —el enlace «Saltar al
 * contenido», un ancla « #algo », « scrollIntoView() »—, no a la rueda del
 * ratón ni al dedo: eso lo sigue llevando el sistema operativo, que es como
 * debe ser. Un desplazamiento que se interpola en vez de dar un salto seco
 * deja claro adónde ha ido la página.
 *
 * « scroll-padding-top » descuenta la cabecera: sin él, el destino de un ancla
 * queda por debajo de la barra y parece que el enlace no ha funcionado.
 *
 * Va tras « prefers-reduced-motion » porque para quien pide menos movimiento un
 * salto seco es exactamente lo correcto.
 * ------------------------------------------------------------------------ */

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

/* El relleno de anclaje va en todas partes menos en la portada.
 *
 * « scroll-padding-top » no solo descuenta la cabecera en los saltos de ancla:
 * también desplaza los puntos donde se detiene el « scroll-snap ». La portada
 * ancla sus secciones a pantalla completa —« scroll-snap-align: start » en
 * portada.css—, así que ahí el relleno dejaría asomando noventa píxeles de la
 * sección anterior en cada parada.
 *
 * Se excluye con el mismo selector con el que portada.css enciende el anclaje,
 * para que las dos reglas hablen del mismo sitio.
 */
html:not( :has( body.home ) ) {
	scroll-padding-top: clamp( 4.5rem, 10vh, 7rem );
}

/* ---------------------------------------------------------------------------
 * La letra, un punto más pequeña en móvil
 *
 * Todo el tema mide en « rem » —los clamp() de cada tipo de sección llevan su
 * mínimo en rem, que es el que manda en pantalla pequeña—, así que bajar la
 * raíz baja la escala entera de una vez: el cuerpo pasa de 16 a 15, la bajada
 * de 15 a 14, el titular de sección de 30 a 28. Es el punto que pedía el
 * diseño en móvil, y se consigue sin tocar doscientas reglas ni desafinar las
 * proporciones entre ellas.
 *
 * Lo que no se mueve es lo que está en píxeles por definición: los filetes,
 * los bordes y las juntas de las baldosas.
 * ------------------------------------------------------------------------ */

@media ( max-width: 781px ) {

	html {
		font-size: 15px;
	}

	/* El canalón de la maqueta móvil son 32 px, y esos no bajan: es la retícula
	   sobre la que están medidas todas las secciones. */
	.sjo-s,
	.sjo-hero,
	.sjo-cta {
		--sjo-gutter: 32px;
	}
}