/**
 * Búsqueda (core/search): buscadores del blog, de la página de resultados y
 * de la página 404.
 *
 * El diseño dibuja un campo en forma de píldora con borde y, al lado, un
 * botón redondo de color «marca» (con lupa) o una píldora con el texto
 * «Buscar» (modificador --grande). theme.json puede dar estilo al botón, que
 * es un elemento button, pero no al campo; y el botón no debe llevar el
 * naranja de los demás botones del sitio.
 *
 * Las clases del núcleo se envuelven en :where() para no pasar de una clase
 * de especificidad.
 */

.fermento-buscador {
	--fermento-alto-buscador: 52px;
	min-inline-size: 0;

	& :where(.wp-block-search__inside-wrapper) {
		gap: 8px;
	}

	& :where(.wp-block-search__input) {
		box-sizing: border-box;
		block-size: var(--fermento-alto-buscador);
		padding: 0 18px;
		border: 1.5px solid var(--wp--preset--color--borde-campo);
		border-radius: var(--wp--preset--border-radius--pildora);
		background: var(--wp--preset--color--fondo);
		color: var(--wp--preset--color--texto);
		font-size: 16px;
	}

	& :where(.wp-block-search__input:focus-visible) {
		outline: 3px solid var(--wp--custom--foco);
		outline-offset: 3px;
	}

	& :where(.wp-block-search__button) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		box-sizing: border-box;
		min-inline-size: var(--fermento-alto-buscador);
		block-size: var(--fermento-alto-buscador);
		margin: 0;
		padding: 0 26px;
		border: 0;
		border-radius: var(--wp--preset--border-radius--pildora);
		background: var(--wp--preset--color--marca);
		color: var(--wp--preset--color--sobre-marca);
		font-weight: 700;
	}

	/* Botón con lupa: círculo sin relleno lateral. */
	& :where(.has-icon) {
		padding: 0;
	}

	& :where(.wp-block-search__button:hover) {
		background: color-mix(in srgb, var(--wp--preset--color--marca) 85%, var(--wp--preset--color--sobre-marca));
		color: var(--wp--preset--color--sobre-marca);
	}

	& :where(.wp-block-search__button:focus-visible) {
		outline: 3px solid var(--wp--custom--foco);
		outline-offset: 3px;
	}
}

/* Página de resultados: campo y botón más altos, botón con texto. */
.fermento-buscador--grande {
	--fermento-alto-buscador: 56px;

	& :where(.wp-block-search__input) {
		padding-inline: 20px;
		font-size: var(--wp--preset--font-size--normal);
	}
}

/* Cabecera del blog: el buscador ocupa como mucho 380 px junto al título. */
.fermento-cabecera-blog__buscador {
	flex: 0 1 380px;
}

/* Página 404: el buscador no pasa de 480 px. */
.fermento-error__buscador {
	max-inline-size: 480px;
}