/*
Theme Name: Entre Maitenes
Theme URI: https://www.entremaitenes.cl
Description: Block Theme de Entre Maitenes, desarrollo empresarial en un entorno natural. Sistema visual en theme.json; el contenido se edita desde WordPress.
Version: 0.8.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: entre-maitenes
*/

/*
 * Los estilos del sitio viven en theme.json.
 * Aquí solo va lo que theme.json no puede expresar y aplica a todo el sitio.
 * El CSS de cada bloque está en assets/css/blocks/ y se carga solo donde se usa.
 */

/* Enlaces: subrayado fino y separado del texto. */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--wp--custom--transicion), text-decoration-color var(--wp--custom--transicion);
}

/* Foco visible y consistente en todo elemento interactivo. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

:where(a, button, summary):focus:not(:focus-visible) {
	outline: none;
}

::selection {
	background: var(--wp--preset--color--marron);
	color: var(--wp--preset--color--crema);
}

/* Botones: altura táctil mínima y transición suave. */
.wp-element-button,
.wp-block-button__link {
	min-height: var(--wp--custom--alto-minimo-control);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	transition: background-color var(--wp--custom--transicion), color var(--wp--custom--transicion), border-color var(--wp--custom--transicion);
}

/* Botón secundario: al pasar el cursor se rellena con el color del texto. */
.wp-block-button.is-style-secundario .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--marron);
	border-color: var(--wp--preset--color--marron);
	color: var(--wp--preset--color--crema);
}

.is-style-seccion-marron .wp-block-button.is-style-secundario .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--crema);
	border-color: var(--wp--preset--color--crema);
	color: var(--wp--preset--color--tierra);
}

.wp-block-button.is-style-secundario .wp-block-button__link,
.wp-block-button.is-style-texto .wp-block-button__link {
	color: var(--wp--preset--color--marron);
}

.is-style-seccion-marron .wp-block-button.is-style-secundario .wp-block-button__link,
.is-style-seccion-marron .wp-block-button.is-style-texto .wp-block-button__link {
	color: var(--wp--preset--color--crema);
}

/* Botón de texto: flecha que avanza levemente al pasar el cursor. */
.wp-block-button.is-style-texto .wp-block-button__link {
	justify-content: flex-start;
	min-height: auto;
	text-align: left;
}

.wp-block-button.is-style-texto .wp-block-button__link::after {
	content: "→";
	transition: transform var(--wp--custom--transicion);
}

.wp-block-button.is-style-texto .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--marron-profundo);
}

.wp-block-button.is-style-texto .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* Sin animaciones para quien lo pide en su sistema. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Las secciones a todo el ancho se apilan sin franjas entre ellas. */
.wp-site-blocks > * + *,
.wp-block-post-content > .alignfull + .alignfull,
.wp-block-post-content > .alignfull:first-child {
	margin-block-start: 0;
}

/* Antítulo legible sobre fondo oscuro. */
.is-style-seccion-marron .is-style-antitulo {
	color: var(--wp--preset--color--linea);
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Fijo arriba al hacer scroll, sin JavaScript. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background-color: var(--wp--preset--color--crema);
	border-bottom: 1px solid transparent;
}

/* En móvil la barra de administración no queda fija. */
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* Al bajar aparece una línea inferior sutil (en navegadores que lo permiten; si no, no se muestra). */
@supports (animation-timeline: scroll()) {
	.wp-site-blocks > header.wp-block-template-part {
		animation: entre-maitenes-header-al-bajar linear both;
		animation-timeline: scroll(root);
		animation-range: 0 80px;
	}

	@keyframes entre-maitenes-header-al-bajar {
		to {
			border-bottom-color: var(--wp--preset--color--linea);
			box-shadow: var(--wp--preset--shadow--sutil);
		}
	}
}

.em-header__barra {
	min-height: 64px;
}

.em-logo {
	flex-shrink: 0;
	margin: 0;
}

.em-logo img {
	display: block;
	width: 132px;
	height: auto;
}

.em-header__cta .wp-block-button__link {
	padding-inline: 1.25rem;
	white-space: nowrap;
}

/* Botón completo en pantallas medianas y grandes, compacto en móvil. */
.em-header__cta .em-solo-escritorio {
	display: none;
}

@media (min-width: 600px) {
	.em-logo img {
		width: 168px;
	}

	.em-header__cta .em-solo-escritorio {
		display: block;
	}

	.em-header__cta .em-solo-movil {
		display: none;
	}
}

@media (min-width: 1024px) {
	.em-header__barra {
		min-height: 80px;
	}
}

/* Mientras el menú es hamburguesa, el botón va antes del ícono del menú. */
@media (max-width: 1199.98px) {
	.em-header__acciones .em-header__cta {
		order: -1;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.em-footer,
.em-footer__legal {
	border-top: 1px solid rgb(255 255 234 / 0.14);
}

.em-logo-pie {
	margin: 0;
}

.em-logo-pie img {
	display: block;
	width: 120px;
	height: auto;
}

.em-lista-enlaces,
.em-lista-simple {
	list-style: none;
	margin-block-end: 0;
	padding-left: 0;
}

.em-lista-enlaces li + li,
.em-lista-simple li + li {
	margin-top: 0.15rem;
}

/* Enlaces del footer con al menos 28 px de alto, cómodos de tocar en el teléfono. */
.em-lista-enlaces a,
.em-lista-simple a {
	display: inline-block;
	padding-block: 0.2rem;
}

/* En listas formadas solo por enlaces, el subrayado aparece al pasar el cursor. */
.em-lista-enlaces a {
	text-decoration: none;
}

.em-lista-enlaces a:hover,
.em-lista-enlaces a:focus-visible {
	text-decoration: underline;
}

.em-footer__legal > * {
	margin: 0;
}

.em-lista-simple a {
	white-space: nowrap;
}

/* Footer en tablet (600–1199 px): la marca ocupa una fila y las tres listas van
   lado a lado debajo, en lugar de apilar todo o apretar cuatro columnas. */
@media (min-width: 600px) and (max-width: 1199.98px) {
	.em-footer .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.em-footer .wp-block-columns > .wp-block-column {
		flex-basis: calc((100% - 2 * var(--wp--preset--spacing--50)) / 3) !important;
		flex-grow: 1;
	}

	.em-footer .wp-block-columns > .em-footer__marca {
		flex-basis: 100% !important;
	}
}

/* ==========================================================================
   Patterns
   ========================================================================== */

/* Número de etapa en serif ("01"). */
.em-numero {
	margin: 0;
}

/* Etapas y elementos: línea superior fina. */
.em-etapa,
.em-elemento {
	border-top: 1px solid var(--wp--preset--color--linea);
	padding-top: var(--wp--preset--spacing--30);
}

/* Proceso en pasos: línea vertical que une los números. */
.em-paso {
	position: relative;
}

.em-paso > .em-numero {
	flex: 0 0 3.5rem;
	text-align: center;
}

.em-paso:not(:last-child)::before {
	border-left: 1px solid var(--wp--preset--color--linea);
	bottom: calc(-1 * var(--wp--preset--spacing--50));
	content: "";
	left: 1.75rem;
	position: absolute;
	top: 3.75rem;
}

/* Tarjetas: la imagen sin margen extra. */
.em-tarjeta-servicio .wp-block-image {
	margin-bottom: 0;
}

.em-tarjeta-servicio .wp-block-image img {
	width: 100%;
}

/* Grillas de tarjetas: las columnas se reparten entre los elementos que haya,
   sin dejar huecos a la derecha, y bajan a una columna en móvil. */
.wp-block-group.em-grilla,
.wp-block-post-template.em-grilla {
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.wp-block-group.em-grilla--angosta {
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

.wp-block-group.em-grilla--ancha {
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

/* Grillas de cinco elementos (etapas, opciones): en una sola fila desde 1000 px,
   en lugar de dejar el quinto solo en una segunda fila. */
@media (min-width: 1000px) {
	.wp-block-group.em-grilla:has(> :nth-child(5):last-child) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Blog: tarjetas de artículo, categoría y fecha. */
.wp-block-post-template.em-grilla--articulos {
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.em-tarjeta-articulo .wp-block-post-title {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
	font-weight: 500;
	line-height: 1.2;
}

.em-tarjeta-articulo .wp-block-post-featured-image {
	overflow: hidden;
	width: 100%;
}

.em-tarjeta-articulo .wp-block-post-featured-image img {
	transition: transform 400ms ease;
}

.em-tarjeta-articulo:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.em-tarjeta-articulo .wp-block-post-title a {
	text-decoration: none;
}

.em-tarjeta-articulo .wp-block-post-title a:hover {
	color: var(--wp--preset--color--marron);
	text-decoration: underline;
}

.em-categoria {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.em-categoria a {
	color: var(--wp--preset--color--verde);
	display: inline-block;
	padding-block: 0.25rem;
	text-decoration: none;
}

.em-categoria a:hover {
	text-decoration: underline;
}

.em-fecha {
	color: var(--wp--preset--color--gris);
	font-size: var(--wp--preset--font-size--small);
}

.em-paginacion {
	font-size: var(--wp--preset--font-size--small);
}

.em-paginacion .page-numbers {
	display: inline-flex;
	justify-content: center;
	min-width: 44px;
	padding: 0.6rem 0.25rem;
}

.em-paginacion .page-numbers.current {
	color: var(--wp--preset--color--marron);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.em-tarjeta-articulo .wp-block-post-featured-image img {
		transition: none;
	}
}