/**
 * Layout — contenedor, ritmo vertical y alineaciones de Gutenberg.
 *
 * Regla de oro del diseño: las secciones ocupan todo el ancho de la ventana
 * (alignfull) y su contenido interior se limita a 1140px centrados.
 *
 * @package SilviaGarcia
 */

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

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

/* Contenedor ------------------------------------------------------------- */

.sg-container {
	width: 100%;
	max-width: var(--sg-container);
	margin-inline: auto;
	padding-inline: var(--sg-page-padding);
}

.sg-container--narrow {
	max-width: 820px;
}

.sg-container--wide {
	max-width: var(--sg-container-wide);
}

/* Ritmo vertical de secciones -------------------------------------------- */

.sg-section {
	padding-block: var(--sg-section-gap);
}

/* Variante de media sección. Necesita ganar a la regla de .alignfull. */
.sg-section--sm,
.wp-block-group.alignfull.sg-section--sm,
.wp-block-columns.alignfull.sg-section--sm {
	padding-block: calc(var(--sg-section-gap) / 2);
}

/* Fondos alternos (capas tonales en lugar de sombras). */
.sg-section--alt,
.bg-alt {
	background-color: var(--sg-sand);
}

.sg-section--dark {
	background-color: var(--sg-fir);
	color: var(--sg-linen);
}

/* Contenido de páginas y entradas ---------------------------------------- */

/**
 * Los bloques de primer nivel se centran en el contenedor. Las secciones
 * marcadas como "ancho completo" rompen el contenedor y devuelven su
 * contenido interior a 1140px, replicando el patrón de la maqueta original.
 *
 * El margen lateral se resuelve con max-width + margin auto (no con padding)
 * para no entrar en conflicto con el relleno propio de cada bloque ni con el
 * que la clienta configure desde el editor.
 *
 * --------------------------------------------------------------------------
 * El ancho se lee de --sg-width, no de un valor fijo. Es la única forma de
 * poder estrecharlo desde una clase.
 *
 * El motivo es de especificidad: estos selectores valen (0,3,0) y cualquier
 * utilidad de una sola clase —`.sg-narrow`, `.sg-measure`— vale (0,1,0), así
 * que perdía siempre y el max-width no llegaba a aplicarse. Las custom
 * properties no compiten en la cascada del mismo modo: heredan, y basta con
 * declararlas en el elemento (o en su sección) para que estas reglas las
 * recojan. Ver las utilidades sg-w-* al final de este archivo.
 * --------------------------------------------------------------------------
 */
.entry-content > * {
	max-width: min(var(--sg-width, var(--sg-container)), 100% - var(--sg-page-padding) * 2);
	margin-inline: auto;
}

.entry-content > .alignwide {
	max-width: min(var(--sg-width, var(--sg-container-wide)), 100% - var(--sg-page-padding) * 2);
}

.entry-content > .alignfull {
	max-width: none;
	width: 100%;
}

/* El contenido interior de una sección full-width vuelve al contenedor. */
.entry-content > .alignfull > .wp-block-group__inner-container > *,
.entry-content > .alignfull.is-layout-constrained > :where(:not(.alignfull):not(.wp-block-group__inner-container)),
.entry-content > .alignfull > .wp-block-cover__inner-container > * {
	max-width: min(var(--sg-width, var(--sg-container)), 100% - var(--sg-page-padding) * 2);
	margin-inline: auto;
}

/**
 * Toda sección a ancho completo lleva su aire vertical, con color de fondo o
 * sin él: el relleno es propio de "ser una sección", no del color.
 *
 * Se excluyen las piezas visuales, que deben sangrar hasta el borde sin
 * márgenes, y el separador, que ya tiene su propio ritmo.
 */
.entry-content > .alignfull:not(:where(.wp-block-cover, .wp-block-image, .wp-block-gallery, .wp-block-video, .wp-block-embed, .wp-block-separator)) {
	padding-block: var(--sg-section-gap);
}

/* Anchos ------------------------------------------------------------------ */

/**
 * Utilidades de ancho. Se escriben en el editor, en el panel del bloque:
 * Avanzado → Clases CSS adicionales.
 *
 * Dónde ponerlas cambia el efecto:
 *
 *   - en una SECCIÓN a ancho completo → el fondo sigue ocupando toda la
 *     ventana y se estrecha solo su contenido (--sg-width hereda a los hijos);
 *   - en un BLOQUE suelto → se estrecha solo ese bloque.
 *
 * No fijan `max-width` directamente: declaran la variable que leen las reglas
 * de contenedor de más arriba. Así funcionan en los dos sitios sin pelear con
 * la especificidad del layout de WordPress.
 */
.sg-w-xs {
	--sg-width: var(--sg-width-xs);   /*  560px */
}

.sg-w-sm {
	--sg-width: var(--sg-width-sm);   /*  720px */
}

.sg-w-md {
	--sg-width: var(--sg-width-md);   /*  900px */
}

.sg-w-lg {
	--sg-width: var(--sg-width-lg);   /* 1020px */
}

/* Vuelve al ancho normal dentro de una sección ya estrechada. */
.sg-w-full {
	--sg-width: var(--sg-container);
}

/* Alineaciones sueltas dentro del flujo. */
.alignleft {
	float: left;
	margin: 0.5em 1.5em 1.5em 0;
}

.alignright {
	float: right;
	margin: 0.5em 0 1.5em 1.5em;
}

.aligncenter {
	clear: both;
	margin-inline: auto;
}

/* Enlace de salto al contenido ------------------------------------------- */

.skip-link:focus {
	background-color: var(--sg-linen);
	color: var(--sg-fir);
	border-radius: var(--sg-radius);
	box-shadow: var(--sg-shadow-lift);
	font-size: var(--sg-label);
	letter-spacing: var(--sg-label-tracking);
	text-transform: uppercase;
	top: 16px;
	left: 16px;
	z-index: 1000;
}

/* La barra de administración no debe tapar el header fijo. */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {

	.admin-bar .site-header {
		top: 46px;
	}
}